@databiosphere/findable-ui 9.1.0 → 10.0.0

package/lib/components/Layout/components/Header/common/entities.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { BreakpointKey } from "../../../../../hooks/useBreakpointHelper";
 import { Social } from "../../../../common/Socials/socials";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
 export declare type Navigation = [
@@ -6,11 +6,11 @@ export declare type Navigation = [
     NavLinkItem[] | undefined,
     NavLinkItem[] | undefined
 ];
+export declare type SelectedMatch = SELECTED_MATCH | Partial<Record<BreakpointKey, boolean | SELECTED_MATCH>>;
 export declare enum SELECTED_MATCH {
     EQUALS = "EQUALS",
     STARTS_WITH = "STARTS_WITH"
 }
 export interface SocialMedia {
-    label: ReactNode;
     socials: Social[];
 }

package/lib/components/Layout/components/Header/common/utils.d.ts

@@ -2,12 +2,11 @@ import { Breakpoint } from "@mui/material";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
 import { Navigation } from "./entities";
 /**
- * Returns the configured menu navigation links, for the current breakpoint.
+ * Returns the configured menu navigation links.
  * @param navigation - Navigation links.
- * @param breakpoint - Current breakpoint.
  * @returns navigation links.
  */
-export declare function getMenuNavigationLinks(navigation?: Navigation, breakpoint?: Breakpoint): NavLinkItem[];
+export declare function getMenuNavigationLinks(navigation?: Navigation): NavLinkItem[];
 /**
  * Returns configured navigation links, for the current breakpoint.
  * @param navigationLinks - Navigation links.

package/lib/components/Layout/components/Header/common/utils.js

@@ -1,19 +1,42 @@
+import { isClientSideNavigation } from "../../../../Links/common/utils";
+import { SELECTED_MATCH } from "./entities";
 /**
- * Returns the configured menu navigation links, for the current breakpoint.
+ * Adds to the set of selected patterns, for the navigation link, at the current breakpoint.
+ * @param setOfPatterns - Set of selected patterns.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Breakpoint.
+ */
+function addSelectedPattern(setOfPatterns, navLinkItem, breakpoint) {
+    if (!navLinkItem.url)
+        return;
+    // Exclude external links.
+    if (!isClientSideNavigation(navLinkItem.url))
+        return;
+    // Get the configured selected match for the current breakpoint.
+    const selectedMatch = getSelectedMatch(navLinkItem.selectedMatch, breakpoint);
+    if (!selectedMatch)
+        return;
+    // Add the selected pattern for the navigation link.
+    if (selectedMatch === SELECTED_MATCH.EQUALS) {
+        setOfPatterns.add(getPatternEquals(navLinkItem.url));
+        return;
+    }
+    setOfPatterns.add(getPatternStartsWith(navLinkItem.url));
+}
+/**
+ * Returns the configured menu navigation links.
  * @param navigation - Navigation links.
- * @param breakpoint - Current breakpoint.
  * @returns navigation links.
  */
-export function getMenuNavigationLinks(navigation, breakpoint) {
+export function getMenuNavigationLinks(navigation) {
     if (!navigation)
         return [];
-    const navLinkItems = navigation.reduce((acc, navLinkItems) => {
+    return navigation.reduce((acc, navLinkItems) => {
         if (!navLinkItems)
             return acc;
         acc.push(...navLinkItems);
         return acc;
     }, []);
-    return getNavigationLinks(navLinkItems, breakpoint);
 }
 /**
  * Returns configured navigation links, for the current breakpoint.
@@ -24,7 +47,9 @@ export function getMenuNavigationLinks(navigation, breakpoint) {
 export function getNavigationLinks(navigationLinks, breakpoint) {
     if (!navigationLinks)
         return [];
-    return navigationLinks.reduce((acc, navLinkItem) => {
+    return navigationLinks
+        .map((navigationLink) => mapSelectedMatches(navigationLink, breakpoint))
+        .reduce((acc, navLinkItem) => {
         const processedNavLink = processNavLinkItem(navLinkItem, breakpoint);
         if (processedNavLink) {
             acc.push(...processedNavLink);
@@ -32,6 +57,49 @@ export function getNavigationLinks(navigationLinks, breakpoint) {
         return acc;
     }, []);
 }
+/**
+ * Returns the pattern for an exact match, for the given URL e.g. "^/about$".
+ * @param url - URL.
+ * @returns pattern for an exact match.
+ */
+function getPatternEquals(url) {
+    return `^${url}$`;
+}
+/**
+ * Returns the pattern for a match that starts with the given URL e.g. "^/about".
+ * @param url - URL.
+ * @returns pattern for a match that starts with the given URL.
+ */
+function getPatternStartsWith(url) {
+    return `^${url}`;
+}
+/**
+ * Returns the configured selected match.
+ * @param selectedMatch - Selected match.
+ * @param breakpoint - Breakpoint.
+ * @returns selected match.
+ */
+function getSelectedMatch(selectedMatch, breakpoint) {
+    if (!selectedMatch)
+        return SELECTED_MATCH.STARTS_WITH;
+    if (typeof selectedMatch === "string")
+        return selectedMatch;
+    if (!breakpoint)
+        return;
+    return getSelectMatchValue(selectedMatch[breakpoint]);
+}
+/**
+ * Returns the selected match value, for the current breakpoint.
+ * @param selectedMatchValue - Selected match value.
+ * @returns selected match.
+ */
+function getSelectMatchValue(selectedMatchValue) {
+    if (selectedMatchValue === false)
+        return undefined;
+    if (selectedMatchValue === true)
+        return SELECTED_MATCH.STARTS_WITH;
+    return selectedMatchValue || SELECTED_MATCH.STARTS_WITH;
+}
 /**
  * Returns true if the link is flattened at the current breakpoint.
  * @param navLinkItem - Navigation link.
@@ -58,6 +126,26 @@ function isLinkVisible(navLinkItem, breakpoint) {
         return true; // Default is visible.
     return navLinkItem.visible[breakpoint] !== false;
 }
+/**
+ * Returns the navigation link with the selected matches, for the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Breakpoint.
+ * @returns navigation link with the selected matches.
+ */
+function mapSelectedMatches(navLinkItem, breakpoint) {
+    const setOfPatterns = new Set();
+    // Add selected pattern for the current navigation link.
+    addSelectedPattern(setOfPatterns, navLinkItem, breakpoint);
+    const cloneLink = { ...navLinkItem };
+    if (cloneLink.menuItems) {
+        cloneLink.menuItems = [...cloneLink.menuItems].map((menuItem) => mapSelectedMatches(menuItem, breakpoint));
+        for (const { selectedPatterns = [] } of cloneLink.menuItems) {
+            selectedPatterns.forEach((pattern) => setOfPatterns.add(pattern));
+        }
+    }
+    cloneLink.selectedPatterns = [...setOfPatterns];
+    return cloneLink;
+}
 /**
  * Returns the processed navigation link item.
  * Flattens menu items, and removes items that are not visible for the current breakpoint.

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.js

@@ -11,7 +11,7 @@ import { Socials } from "./components/Content/components/Socials/socials.styles"
 import { Toolbar } from "./components/Toolbar/toolbar";
 export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, open, openMenu, pathname, style }, ref) {
     const { navigation, slogan, socialMedia } = headerProps;
-    const { breakpoint, smDown } = useBreakpoint();
+    const { smDown } = useBreakpoint();
     // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
     useEffect(() => {
         if (smDown)
@@ -28,6 +28,6 @@ export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, ope
                 React.createElement(Toolbar, { onClose: closeMenu, ...headerProps })),
             React.createElement(Content, null,
                 slogan && React.createElement(Slogan, { slogan: slogan }),
-                React.createElement(Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: getMenuNavigationLinks(navigation, breakpoint), pathname: pathname }),
+                React.createElement(Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: getMenuNavigationLinks(navigation), pathname: pathname }),
                 socialMedia && (React.createElement(Socials, { buttonSize: "xlarge", socials: socialMedia.socials }))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Navigation/common/utils.d.ts

@@ -1,15 +1,8 @@
-import { SELECTED_MATCH } from "../../../../../common/entities";
 /**
  * Returns true if the navigation link is selected.
- * @param url - The URL of the navigation link.
+ * The pathname is matched against the selected patterns.
  * @param pathname - The current pathname.
- * @param selectedMatch - The selected match type.
+ * @param selectedPatterns - Selected match patterns.
  * @returns true if the navigation link is selected.
  */
-export declare function isNavigationLinkSelected(url: string, pathname?: string, selectedMatch?: SELECTED_MATCH): boolean;
-/**
- * Returns true if the selected match type is "EQUAL".
- * @param selectedMatch - The selected match type.
- * @returns True if the selected match type is "EQUAL".
- */
-export declare function isSelectedMatchEqual(selectedMatch: SELECTED_MATCH): boolean;
+export declare function isNavigationLinkSelected(pathname?: string, selectedPatterns?: string[]): boolean;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/common/utils.js

@@ -1,23 +1,17 @@
-import { SELECTED_MATCH } from "../../../../../common/entities";
 /**
  * Returns true if the navigation link is selected.
- * @param url - The URL of the navigation link.
+ * The pathname is matched against the selected patterns.
  * @param pathname - The current pathname.
- * @param selectedMatch - The selected match type.
+ * @param selectedPatterns - Selected match patterns.
  * @returns true if the navigation link is selected.
  */
-export function isNavigationLinkSelected(url, pathname, selectedMatch = SELECTED_MATCH.STARTS_WITH) {
+export function isNavigationLinkSelected(pathname, selectedPatterns) {
     if (!pathname)
         return false;
-    if (isSelectedMatchEqual(selectedMatch))
-        return url === pathname;
-    return pathname.startsWith(url);
-}
-/**
- * Returns true if the selected match type is "EQUAL".
- * @param selectedMatch - The selected match type.
- * @returns True if the selected match type is "EQUAL".
- */
-export function isSelectedMatchEqual(selectedMatch) {
-    return selectedMatch === SELECTED_MATCH.EQUALS;
+    for (const selectedPattern of selectedPatterns ?? []) {
+        if (new RegExp(selectedPattern).test(pathname)) {
+            return true;
+        }
+    }
+    return false;
 }

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.d.ts

@@ -4,8 +4,9 @@ import { MenuItem } from "../NavigationMenuItems/navigationMenuItems";
 export interface NavigationDrawerProps {
     closeAncestor?: () => void;
     headerProps?: HeaderProps;
+    isSelected?: boolean;
     menuItems: MenuItem[];
     menuLabel: ReactNode;
     pathname?: string;
 }
-export declare const NavigationDrawer: ({ closeAncestor, headerProps, menuItems, menuLabel, pathname, }: NavigationDrawerProps) => JSX.Element;
+export declare const NavigationDrawer: ({ closeAncestor, headerProps, isSelected, menuItems, menuLabel, pathname, }: NavigationDrawerProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.js

@@ -1,30 +1,25 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
-import React, { useState } from "react";
+import React, { useCallback } from "react";
 import { Button } from "../../../../../../../../../common/Button/button";
 import { BackArrowIcon } from "../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon";
+import { useDialog } from "../../../../../../../../../common/Dialog/hooks/useDialog";
 import { AppBar } from "../../../../../../header.styles";
 import { DrawerNavigation as Navigation } from "../../../Actions/components/Menu/components/Content/components/Navigation/navigation.styles";
 import { Toolbar } from "../../../Actions/components/Menu/components/Toolbar/toolbar";
 import { Slide } from "./components/Slide/slide";
 import { Button as BackButton, Content, Dialog, } from "./navigationDrawer.styles";
-export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLabel, pathname, }) => {
-    const [drawerOpen, setDrawerOpen] = useState(false);
-    const openDrawer = () => {
-        setDrawerOpen(true);
-    };
-    const closeDrawer = () => {
-        setDrawerOpen(false);
-    };
-    const closeDrawers = () => {
-        setDrawerOpen(false);
+export const NavigationDrawer = ({ closeAncestor, headerProps, isSelected = false, menuItems, menuLabel, pathname, }) => {
+    const { onClose, onOpen, open } = useDialog();
+    const closeDrawers = useCallback(() => {
+        onClose();
         closeAncestor?.();
-    };
+    }, [closeAncestor, onClose]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, onClick: openDrawer, variant: "nav" }, menuLabel),
-        React.createElement(Dialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeDrawers, open: drawerOpen, PaperProps: { elevation: 0 }, TransitionComponent: Slide, transitionDuration: 300 },
+        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" }, menuLabel),
+        React.createElement(Dialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeDrawers, open: open, PaperProps: { elevation: 0 }, TransitionComponent: Slide, transitionDuration: 300 },
             React.createElement(AppBar, { component: "div", elevation: 1 },
                 React.createElement(Toolbar, { onClose: closeDrawers, ...headerProps })),
             React.createElement(Content, null,
-                React.createElement(BackButton, { fullWidth: true, onClick: closeDrawer, StartIcon: BackArrowIcon, variant: "backNav" }, menuLabel),
+                React.createElement(BackButton, { fullWidth: true, onClick: onClose, StartIcon: BackArrowIcon, variant: "backNav" }, menuLabel),
                 React.createElement(Navigation, { closeAncestor: closeDrawers, headerProps: headerProps, links: menuItems, pathname: pathname })))));
 };

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.d.ts

@@ -5,8 +5,9 @@ export interface NavLinkMenuProps {
     anchorOrigin?: MMenuProps["anchorOrigin"];
     closeAncestor?: () => void;
     disablePortal?: boolean;
+    isSelected?: boolean;
     menuItems: MenuItem[];
     menuLabel: ReactNode;
     pathname?: string;
 }
-export declare const NavigationMenu: ({ anchorOrigin, closeAncestor, disablePortal, menuItems, menuLabel, pathname, }: NavLinkMenuProps) => JSX.Element;
+export declare const NavigationMenu: ({ anchorOrigin, closeAncestor, disablePortal, isSelected, menuItems, menuLabel, pathname, }: NavLinkMenuProps) => JSX.Element;

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

@@ -1,18 +1,18 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import React, { Fragment } from "react";
 import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
-import { useMenuWithPosition } from "../../../../../../../../../../hooks/useMenuWithPosition";
+import { useMenu } from "../../../../../../../../../common/Menu/hooks/useMenu";
 import { NavigationButtonLabel } from "../NavigationButtonLabel/navigationButtonLabel";
 import { NavigationMenuItems, } from "../NavigationMenuItems/navigationMenuItems";
 import { MENU_ANCHOR_ORIGIN_LEFT_BOTTOM, MENU_PROPS } from "./common/constants";
 import { Button, Menu, StyledMenuItem } from "./navigationMenu.styles";
-export const NavigationMenu = ({ anchorOrigin = MENU_ANCHOR_ORIGIN_LEFT_BOTTOM, closeAncestor, disablePortal, menuItems, menuLabel, pathname, }) => {
+export const NavigationMenu = ({ anchorOrigin = MENU_ANCHOR_ORIGIN_LEFT_BOTTOM, closeAncestor, disablePortal, isSelected = false, menuItems, menuLabel, pathname, }) => {
     const { mdUp } = useBreakpoint();
-    const { anchorEl, onClose, onToggleOpen, open } = useMenuWithPosition();
+    const { anchorEl, onClose, onToggleOpen, open } = useMenu();
     const MenuItem = disablePortal ? StyledMenuItem : Fragment;
     const menuItemProps = disablePortal ? { onMouseLeave: onClose } : {};
     return (React.createElement(MenuItem, { ...menuItemProps },
-        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: open, onClick: onToggleOpen, variant: "nav" },
+        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: open, onClick: onToggleOpen, variant: isSelected ? "activeNav" : "nav" },
             React.createElement(NavigationButtonLabel, { label: menuLabel })),
         React.createElement(Menu, { ...MENU_PROPS, anchorEl: anchorEl, anchorOrigin: anchorOrigin, disablePortal: disablePortal, onClose: () => {
                 onClose();

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

@@ -9,13 +9,13 @@ import { MENU_ANCHOR_ORIGIN_RIGHT_TOP } from "../NavigationMenu/common/constants
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
 export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
     const router = useRouter();
-    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, selectedMatch, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, anchorOrigin: MENU_ANCHOR_ORIGIN_RIGHT_TOP, closeAncestor: closeMenu, disablePortal: true, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname })) : (React.createElement(Fragment, { key: i },
+    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, anchorOrigin: MENU_ANCHOR_ORIGIN_RIGHT_TOP, closeAncestor: closeMenu, disablePortal: true, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname })) : (React.createElement(Fragment, { key: i },
         React.createElement(MMenuItem, { disabled: !url, onClick: () => {
                 closeMenu();
                 isClientSideNavigation(url)
                     ? router.push(url)
                     : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
-            }, selected: isNavigationLinkSelected(url, pathname, selectedMatch) },
+            }, selected: isNavigationLinkSelected(pathname, selectedPatterns) },
             icon && React.createElement(ListItemIcon, null, icon),
             React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
                     variant: url

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

@@ -1,7 +1,7 @@
 import React, { CSSProperties, ReactNode } from "react";
 import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
-import { SELECTED_MATCH } from "../../../../common/entities";
+import { SelectedMatch } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { MenuItem } from "./components/NavigationMenuItems/navigationMenuItems";
 export interface NavLinkItem {
@@ -9,7 +9,8 @@ export interface NavLinkItem {
     flatten?: Partial<Record<BreakpointKey, boolean>>;
     label: ReactNode;
     menuItems?: MenuItem[];
-    selectedMatch?: SELECTED_MATCH;
+    selectedMatch?: SelectedMatch;
+    selectedPatterns?: string[];
     target?: ANCHOR_TARGET;
     url: string;
     visible?: Partial<Record<BreakpointKey, boolean>>;

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

@@ -12,15 +12,15 @@ import { Navigation as Links } from "./navigation.styles";
 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, className: className, style: style }, links.map(({ divider, label, menuItems, selectedMatch, 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 })),
+    return (React.createElement(Links, { ref: ref, className: className, style: style }, links.map(({ divider, label, menuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => menuItems ? (React.createElement(Fragment, { key: i },
+        mdUp ? (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })),
         divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
         React.createElement(Button, { disabled: !url, onClick: () => {
                 closeAncestor?.();
                 isClientSideNavigation(url)
                     ? router.push(url)
                     : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
-            }, variant: isNavigationLinkSelected(url, pathname, selectedMatch)
+            }, variant: isNavigationLinkSelected(pathname, selectedPatterns)
                 ? "activeNav"
                 : "nav" },
             React.createElement(NavigationButtonLabel, { label: label })),

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

@@ -1,10 +1,7 @@
 import { Fade, Toolbar } from "@mui/material";
 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";
@@ -15,16 +12,22 @@ 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, Center, Left, Right } from "./header.styles";
+import { useHeaderNavigation } from "./hooks/useHeaderNavigation";
 import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
 import { useMeasureHeader } from "./hooks/useMeasureHeader";
+import { useMenu } from "./hooks/useMenu";
 export const Header = ({ ...headerProps }) => {
-    const { breakpoint } = useBreakpoint();
-    const { isIn } = useHeaderVisibility(headerProps);
+    const { navigation } = useHeaderNavigation(headerProps);
+    const { isIn } = useHeaderVisibility({ ...headerProps, navigation });
     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 };
+    const { actions, announcements, authenticationEnabled, className, logo, searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
+    const [navItemsL, navItemsC, navItemsR] = navigation;
+    const navigationProps = {
+        headerProps: { ...headerProps, navigation },
+        pathname,
+    };
     return (React.createElement(AppBar, { ...APP_BAR_PROPS, ref: headerRef, className: className },
         React.createElement(Announcements, { announcements: announcements }),
         React.createElement(Toolbar, { ...TOOLBAR_PROPS },
@@ -33,12 +36,12 @@ export const Header = ({ ...headerProps }) => {
                     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) })))),
+                    isIn.isLeftNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsL })))),
             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(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsC })))),
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isRightGroupIn },
                 React.createElement(Right, null,
-                    isIn.isRightNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: getNavigationLinks(navItemsR) })),
+                    isIn.isRightNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: 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 }),

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

@@ -65,7 +65,6 @@ export const HeaderStory = {
         searchEnabled: true,
         slogan: "Header Slogan",
         socialMedia: {
-            label: "Follow Us",
             socials: [
                 {
                     Icon: XIcon,

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

@@ -0,0 +1,6 @@
+import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
+import { HeaderProps } from "../header";
+export interface UseHeaderNavigation {
+    navigation: [NavLinkItem[], NavLinkItem[], NavLinkItem[]];
+}
+export declare const useHeaderNavigation: (headerProps: HeaderProps) => UseHeaderNavigation;

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

@@ -0,0 +1,10 @@
+import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+import { getNavigationLinks } from "../common/utils";
+export const useHeaderNavigation = (headerProps) => {
+    const { breakpoint } = useBreakpoint();
+    const { navigation: [navL, navC, navR] = [] } = headerProps;
+    const navItemsL = getNavigationLinks(navL, breakpoint);
+    const navItemsC = getNavigationLinks(navC, breakpoint);
+    const navItemsR = getNavigationLinks(navR, breakpoint);
+    return { navigation: [navItemsL, navItemsC, navItemsR] };
+};

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

@@ -12,9 +12,9 @@ export const useHeaderVisibility = (headerProps) => {
     const hasActions = Boolean(actions);
     const hasLogo = Boolean(logo);
     const hasMenu = !mdUp;
-    const hasNavItemsC = Boolean(navItemsC);
-    const hasNavItemsL = Boolean(navItemsL);
-    const hasNavItemsR = Boolean(navItemsR);
+    const hasNavItemsC = Boolean(navItemsC && navItemsC.length > 0);
+    const hasNavItemsL = Boolean(navItemsL && navItemsL.length > 0);
+    const hasNavItemsR = Boolean(navItemsR && navItemsR.length > 0);
     const hasSlogan = Boolean(slogan);
     const hasSocials = Boolean(socialMedia);
     // Determines header content visibility.

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

@@ -0,0 +1,10 @@
+export interface UseMenu {
+    onClose: () => void;
+    onOpen: () => void;
+    open: boolean;
+}
+/**
+ * Menu functionality for menu dropdown.
+ * @returns menu functionality.
+ */
+export declare const useMenu: () => UseMenu;

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

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+/**
+ * Menu functionality for menu dropdown.
+ * @returns menu functionality.
+ */
+export const useMenu = () => {
+    const [open, setOpen] = useState(false);
+    // Closes menu.
+    const onClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+    // Opens menu.
+    const onOpen = useCallback(() => {
+        setOpen(true);
+    }, []);
+    return { onClose, onOpen, open };
+};

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.js

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { mediaDesktopSmallUp } from "../../../../../../styles/common/mixins/breakpoints";
 export const SidebarPositioner = styled("div") `
+  box-sizing: border-box;
   height: 100%;
   overflow: visible;
   padding: 16px 0;

package/lib/components/common/Dialog/hooks/useDialog.d.ts

@@ -0,0 +1,11 @@
+export interface UseDialog {
+    onClose: () => void;
+    onOpen: () => void;
+    open: boolean;
+}
+/**
+ * Dialog functionality.
+ * @param isOpen - Open state (initial).
+ * @returns dialog functionality.
+ */
+export declare const useDialog: (isOpen?: boolean) => UseDialog;

package/lib/components/common/Dialog/hooks/useDialog.js

@@ -0,0 +1,18 @@
+import { useCallback, useState } from "react";
+/**
+ * Dialog functionality.
+ * @param isOpen - Open state (initial).
+ * @returns dialog functionality.
+ */
+export const useDialog = (isOpen = false) => {
+    const [open, setOpen] = useState(isOpen);
+    // Closes dialog.
+    const onClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+    // Opens dialog
+    const onOpen = useCallback(() => {
+        setOpen(true);
+    }, []);
+    return { onClose, onOpen, open };
+};

package/lib/components/common/Menu/hooks/useMenu.d.ts

@@ -0,0 +1,14 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+import { MouseEvent } from "react";
+export interface UseMenu {
+    anchorEl: MMenuProps["anchorEl"];
+    onClose: () => void;
+    onOpen: (event: MouseEvent<HTMLElement>) => void;
+    onToggleOpen: (event: MouseEvent<HTMLElement>) => void;
+    open: boolean;
+}
+/**
+ * Menu functionality for menu dropdown, with menu position.
+ * @returns menu functionality.
+ */
+export declare const useMenu: () => UseMenu;

package/lib/components/common/Menu/hooks/useMenu.js

@@ -0,0 +1,33 @@
+import { useCallback, useMemo, useState } from "react";
+/**
+ * Menu functionality for menu dropdown, with menu position.
+ * @returns menu functionality.
+ */
+export const useMenu = () => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+    // Closes menu.
+    const onClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    // Opens menu.
+    const onOpen = useCallback((event) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+    // Toggles menu open/close.
+    const onToggleOpen = useCallback((event) => {
+        if (open) {
+            setAnchorEl(null);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    }, [open]);
+    return {
+        anchorEl,
+        onClose,
+        onOpen,
+        onToggleOpen,
+        open,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "9.1.0",
+  "version": "10.0.0",
   "description": "",
   "scripts": {
     "test": "jest",