@databiosphere/findable-ui 7.0.0 → 8.0.1

package/lib/common/entities.d.ts

@@ -14,15 +14,6 @@ export interface CategoryTag {
  * Category values to be used as keys. For example, "Homo sapiens" or "10X 3' v2 sequencing".
  */
 export declare type CategoryValueKey = string;
-/**
- * Element alignment.
- */
-export declare enum ELEMENT_ALIGNMENT {
-    CENTER = "CENTER",
-    LEFT = "LEFT",
-    RIGHT = "RIGHT"
-}
-export declare type ElementAlignment = ELEMENT_ALIGNMENT;
 /**
  * Set of selected category values.
  */

package/lib/common/entities.js

@@ -1,9 +1 @@
-/**
- * Element alignment.
- */
-export var ELEMENT_ALIGNMENT;
-(function (ELEMENT_ALIGNMENT) {
-    ELEMENT_ALIGNMENT["CENTER"] = "CENTER";
-    ELEMENT_ALIGNMENT["LEFT"] = "LEFT";
-    ELEMENT_ALIGNMENT["RIGHT"] = "RIGHT";
-})(ELEMENT_ALIGNMENT || (ELEMENT_ALIGNMENT = {}));
+export {};

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.d.ts

@@ -12,7 +12,7 @@ export declare const FilterLabel: import("@emotion/styled").StyledComponent<{
     size?: "large" | "medium" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/lib/components/Index/components/Tabs/common/utils.d.ts

@@ -0,0 +1,8 @@
+import { EntityConfig } from "../../../../../config/entities";
+import { Tab } from "../../../../common/Tabs/tabs";
+/**
+ * Returns entity list tabs list for the tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+export declare function getEntityListTabs(entities: EntityConfig[]): Tab[];

package/lib/components/Index/components/Tabs/common/utils.js

@@ -0,0 +1,18 @@
+/**
+ * Returns entity list tabs list for the tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+export function getEntityListTabs(entities) {
+    return entities.reduce((acc, { label, listView: { enableTab = true } = {}, route, tabIcon: icon, tabIconPosition: iconPosition, }) => {
+        if (enableTab) {
+            acc.push({
+                icon,
+                iconPosition,
+                label,
+                value: route,
+            });
+        }
+        return acc;
+    }, []);
+}

package/lib/components/Index/components/Tabs/tabs.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Tabs: () => JSX.Element | null;

package/lib/components/Index/components/Tabs/tabs.js

@@ -0,0 +1,20 @@
+import Router from "next/router";
+import React, { useCallback, useMemo } from "react";
+import { useConfig } from "../../../../hooks/useConfig";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { Tabs as DXTabs } from "../../../common/Tabs/tabs";
+import { getEntityListTabs } from "./common/utils";
+export const Tabs = () => {
+    const { config } = useConfig();
+    const { exploreState } = useExploreState();
+    const { entities } = config;
+    const { tabValue } = exploreState;
+    const tabs = useMemo(() => getEntityListTabs(entities), [entities]);
+    // Callback fired when selected tab value changes.
+    const onTabChange = useCallback(async (tabValue) => {
+        await Router.push(`/${tabValue}`);
+    }, []);
+    if (tabs.length <= 1)
+        return null;
+    return React.createElement(DXTabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue });
+};

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

@@ -1,14 +1,9 @@
+import { AppBarProps as MAppBarProps, ToolbarProps as MToolbarProps } from "@mui/material";
 export declare const HEADER_HEIGHT = 56;
-export declare const HEADER_FADE_TIMEOUT = 0;
+export declare const APP_BAR_PROPS: Partial<MAppBarProps>;
 export declare const FADE_TRANSITION_PROPS: {
+    appear: boolean;
     timeout: number;
     unmountOnExit: boolean;
 };
-export declare const HEADER_NAVIGATION_LABEL: {
-    MORE: string;
-    SOCIALS: string;
-};
-export declare const SWITCH_TRANSITION_PROPS: {
-    timeout: number;
-    unmountOnExit: boolean;
-};
+export declare const TOOLBAR_PROPS: Partial<MToolbarProps>;

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

@@ -1,14 +1,13 @@
 export const HEADER_HEIGHT = 56;
-export const HEADER_FADE_TIMEOUT = 0;
-export const FADE_TRANSITION_PROPS = {
-    timeout: HEADER_FADE_TIMEOUT,
-    unmountOnExit: true,
-};
-export const HEADER_NAVIGATION_LABEL = {
-    MORE: "More",
-    SOCIALS: "Follow Us",
+export const APP_BAR_PROPS = {
+    elevation: 1,
+    position: "fixed",
 };
-export const SWITCH_TRANSITION_PROPS = {
+export const FADE_TRANSITION_PROPS = {
+    appear: false,
     timeout: 0,
     unmountOnExit: true,
 };
+export const TOOLBAR_PROPS = {
+    variant: "dense",
+};

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

@@ -1,5 +1,11 @@
 import { ReactNode } from "react";
 import { Social } from "../../../../common/Socials/socials";
+import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
+export declare type Navigation = [
+    NavLinkItem[] | undefined,
+    NavLinkItem[] | undefined,
+    NavLinkItem[] | undefined
+];
 export interface SocialMedia {
     label: ReactNode;
     socials: Social[];

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

@@ -1,22 +1,17 @@
+import { Breakpoint } from "@mui/material";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { SocialMedia } from "./entities";
+import { Navigation } from "./entities";
 /**
- * Returns the navigation links as configured, where the "More" menu is flattened.
- * @param links - Header navigation links.
- * @returns header navigation links, without links grouped under the "More" menu.
+ * Returns the configured menu navigation links, for the current breakpoint.
+ * @param navigation - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-export declare function flattenMoreLink(links: NavLinkItem[]): NavLinkItem[];
+export declare function getMenuNavigationLinks(navigation?: Navigation, breakpoint?: Breakpoint): NavLinkItem[];
 /**
- * Returns the navigation links as configured, all menu links specified as "flatten" are flattened, including the "More" menu.
- * @param links - Header navigation links.
- * @returns header navigation links.
+ * Returns configured navigation links, for the current breakpoint.
+ * @param navigationLinks - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-export declare function flattenNavigationLinks(links: NavLinkItem[]): NavLinkItem[];
-/**
- * Returns header navigation links with socials appended with the corresponding label "Follow Us".
- * @param links - Header navigation links.
- * @param socialMedia - Header social media.
- * @param onlySmDesktop - Media breakpoint query is "true" for small desktop only.
- * @returns header navigation links.
- */
-export declare function getHeaderNavigationLinks(links: NavLinkItem[], socialMedia: SocialMedia | undefined, onlySmDesktop: boolean): NavLinkItem[];
+export declare function getNavigationLinks(navigationLinks?: NavLinkItem[], breakpoint?: Breakpoint): NavLinkItem[];

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

@@ -1,72 +1,90 @@
-import { RenderComponent } from "../../../../ComponentCreator/components/RenderComponent/renderComponent";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
-import { HEADER_NAVIGATION_LABEL } from "./constants";
 /**
- * Returns the navigation links as configured, where the "More" menu is flattened.
- * @param links - Header navigation links.
- * @returns header navigation links, without links grouped under the "More" menu.
+ * Returns the configured menu navigation links, for the current breakpoint.
+ * @param navigation - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-export function flattenMoreLink(links) {
-    return links.flatMap((link) => {
-        if (link.label === HEADER_NAVIGATION_LABEL.MORE) {
-            if (link.flatten === false) {
-                return link;
-            }
-            return link.menuItems;
-        }
-        return link;
-    });
+export function getMenuNavigationLinks(navigation, breakpoint) {
+    if (!navigation)
+        return [];
+    const navLinkItems = navigation.reduce((acc, navLinkItems) => {
+        if (!navLinkItems)
+            return acc;
+        acc.push(...navLinkItems);
+        return acc;
+    }, []);
+    return getNavigationLinks(navLinkItems, breakpoint);
 }
 /**
- * Returns the navigation links as configured, all menu links specified as "flatten" are flattened, including the "More" menu.
- * @param links - Header navigation links.
- * @returns header navigation links.
+ * Returns configured navigation links, for the current breakpoint.
+ * @param navigationLinks - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-export function flattenNavigationLinks(links) {
-    return links.flatMap((link) => {
-        if (link.flatten || link.label === HEADER_NAVIGATION_LABEL.MORE) {
-            return link.menuItems;
+export function getNavigationLinks(navigationLinks, breakpoint) {
+    if (!navigationLinks)
+        return [];
+    return navigationLinks.reduce((acc, navLinkItem) => {
+        const processedNavLink = processNavLinkItem(navLinkItem, breakpoint);
+        if (processedNavLink) {
+            acc.push(...processedNavLink);
         }
-        return link;
-    });
+        return acc;
+    }, []);
 }
 /**
- * Returns header navigation links with socials appended with the corresponding label "Follow Us".
- * @param links - Header navigation links.
- * @param socialMedia - Header social media.
- * @param onlySmDesktop - Media breakpoint query is "true" for small desktop only.
- * @returns header navigation links.
+ * Returns true if the link is flattened at the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns true if the link is flattened.
  */
-export function getHeaderNavigationLinks(links, socialMedia, onlySmDesktop) {
-    if (onlySmDesktop) {
-        const navLinks = [...links];
-        if (socialMedia) {
-            navLinks.push({
-                label: socialMedia.label,
-                menuItems: getFollowUsMenuItems(socialMedia.socials),
-                url: "",
-            });
-        }
-        return navLinks;
-    }
-    // Return the links without the "More" or "Follow Us" menu.
-    return flattenMoreLink(links);
+function isLinkFlattened(navLinkItem, breakpoint) {
+    if (!breakpoint)
+        return false; // Default is not flattened.
+    if (!navLinkItem.flatten)
+        return false; // Default is not flattened.
+    return navLinkItem.flatten[breakpoint] === true;
 }
 /**
- * Returns menu items for the "Follow Us" menu.
- * @param socials - Social configuration.
- * @returns a list of social menu items for the "Follow Us" menu.
+ * Returns true if the link is visible at the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns true if the link is visible.
  */
-function getFollowUsMenuItems(socials) {
-    return socials.map(({ Icon, label, url }) => {
-        return {
-            icon: RenderComponent({
-                Component: Icon,
-                ...{ fontSize: "small" },
-            }),
-            label,
-            target: ANCHOR_TARGET.BLANK,
-            url,
-        };
-    });
+function isLinkVisible(navLinkItem, breakpoint) {
+    if (!breakpoint)
+        return true; // Default is visible.
+    if (!navLinkItem.visible)
+        return true; // Default is visible.
+    return navLinkItem.visible[breakpoint] !== false;
+}
+/**
+ * Returns the processed navigation link item.
+ * Flattens menu items, and removes items that are not visible for the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns processed navigation link item.
+ */
+function processNavLinkItem(navLinkItem, breakpoint) {
+    if (isLinkVisible(navLinkItem, breakpoint)) {
+        const cloneLink = { ...navLinkItem };
+        // Recursively process menu items.
+        if (cloneLink.menuItems) {
+            const menuItems = getNavigationLinks(navLinkItem.menuItems, breakpoint);
+            // Remove menu items if empty.
+            if (menuItems.length === 0) {
+                delete cloneLink.menuItems;
+            }
+            else {
+                // Flatten the menu items if the navigation is flattened.
+                if (isLinkFlattened(cloneLink, breakpoint)) {
+                    return menuItems;
+                }
+                else {
+                    cloneLink.menuItems = menuItems;
+                }
+            }
+        }
+        return [cloneLink];
+    }
 }

package/lib/components/Layout/components/Header/components/Announcements/announcements.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentsConfig } from "../../../../../../config/entities";
+export interface AnnouncementsProps {
+    announcements?: ComponentsConfig;
+}
+export declare const Announcements: ({ announcements, }: AnnouncementsProps) => JSX.Element | null;

package/lib/components/Layout/components/Header/components/Announcements/announcements.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+export const Announcements = ({ announcements, }) => {
+    if (!announcements)
+        return null;
+    return React.createElement(ComponentCreator, { components: announcements, response: {} });
+};

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 export interface ActionsProps {
     children: ReactNode | ReactNode[];
-    showActions?: boolean;
 }
-export declare const Actions: ({ children, showActions, }: ActionsProps) => JSX.Element;
+export declare const Actions: ({ children }: ActionsProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.js

@@ -1,5 +1,5 @@
 import React from "react";
 import { HeaderActions } from "./actions.styles";
-export const Actions = ({ children, showActions = true, }) => {
-    return React.createElement(React.Fragment, null, showActions && React.createElement(HeaderActions, null, children));
+export const Actions = ({ children }) => {
+    return React.createElement(HeaderActions, null, children);
 };

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.js

@@ -1,20 +1,13 @@
 import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
-import { Fade, IconButton } from "@mui/material";
+import { IconButton as MIconButton } from "@mui/material";
 import React from "react";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../../../theme/common/breakpoints";
-import { SWITCH_TRANSITION_PROPS } from "../../../../../../../../common/constants";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
 import { Button } from "./requestAuthentication.styles";
 export const RequestAuthentication = ({ closeMenu, requestAuthorization, }) => {
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-    const switchProps = SWITCH_TRANSITION_PROPS;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Fade, { in: smDesktop, ...switchProps },
-            React.createElement(Button, { onClick: requestAuthorization, startIcon: React.createElement(LoginRoundedIcon, null), variant: "nav" }, "Sign in")),
-        React.createElement(Fade, { in: !smDesktop, ...switchProps },
-            React.createElement(IconButton, { color: "ink", onClick: () => {
-                    closeMenu();
-                    requestAuthorization();
-                } },
-                React.createElement(LoginRoundedIcon, null)))));
+    const { mdUp } = useBreakpoint();
+    return mdUp ? (React.createElement(Button, { onClick: requestAuthorization, startIcon: React.createElement(LoginRoundedIcon, null), variant: "nav" }, "Sign in")) : (React.createElement(MIconButton, { color: "ink", onClick: () => {
+            closeMenu();
+            requestAuthorization();
+        } },
+        React.createElement(LoginRoundedIcon, null)));
 };

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.d.ts

@@ -12,7 +12,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     size?: "large" | "medium" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

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

@@ -9,6 +9,7 @@ export const Navigation = styled(DXNavigation) `
   margin: 0;
   justify-content: flex-start;
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBodyLarge500};
     justify-content: space-between;
@@ -22,6 +23,7 @@ export const Navigation = styled(DXNavigation) `
 export const DrawerNavigation = styled(Navigation) `
   gap: 0;
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBody500};
     padding: 14px 24px;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from "react";
+import { ComponentsConfig } from "../../../../../../../../../../../../config/entities";
 export interface DialogTitleProps {
     actions?: ReactNode;
-    Announcements?: ReactNode;
+    announcements?: ComponentsConfig;
     authenticationEnabled?: boolean;
-    Logo?: ReactNode;
+    logo?: ReactNode;
     onClose: () => void;
     searchEnabled?: boolean;
     searchURL?: string;
 }
-export declare const Toolbar: ({ actions, Announcements, authenticationEnabled, Logo, onClose, searchEnabled, searchURL, }: DialogTitleProps) => JSX.Element;
+export declare const Toolbar: ({ actions, announcements, authenticationEnabled, logo, onClose, searchEnabled, searchURL, }: DialogTitleProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.js

@@ -1,14 +1,15 @@
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import { IconButton, Toolbar as MToolbar } from "@mui/material";
 import React, { Fragment } from "react";
+import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
 import { Authentication } from "../../../Authentication/authentication";
 import { Search } from "../../../Search/search";
-export const Toolbar = ({ actions, Announcements, authenticationEnabled, Logo, onClose, searchEnabled, searchURL, }) => {
+export const Toolbar = ({ actions, announcements, authenticationEnabled, logo, onClose, searchEnabled, searchURL, }) => {
     return (React.createElement(Fragment, null,
-        Announcements,
+        React.createElement(Announcements, { announcements: announcements }),
         React.createElement(MToolbar, null,
-            Logo,
+            logo,
             React.createElement(Actions, null,
                 React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
                 React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.d.ts

@@ -5,6 +5,7 @@ export interface MenuProps {
     headerProps: HeaderProps;
     open: boolean;
     openMenu: () => void;
+    pathname?: string;
     style?: CSSProperties;
 }
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,35 +1,33 @@
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import { Dialog as MDialog, Fade, IconButton } from "@mui/material";
-import React, { forwardRef, useEffect } from "react";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../theme/common/breakpoints";
-import { SWITCH_TRANSITION_PROPS } from "../../../../../../common/constants";
-import { flattenNavigationLinks } from "../../../../../../common/utils";
+import React, { forwardRef, Fragment, useEffect } from "react";
+import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
+import { getMenuNavigationLinks } from "../../../../../../common/utils";
 import { AppBar } from "../../../../../../header.styles";
 import { Content } from "../../../../content.styles";
 import { Slogan } from "../../../Slogan/slogan";
 import { Navigation } from "./components/Content/components/Navigation/navigation.styles";
 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, style }, ref) {
-    const { navLinks, slogan, socialMedia } = headerProps;
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-    const switchProps = SWITCH_TRANSITION_PROPS;
-    // Set drawer open state to false on change of media breakpoint from mobile to "small desktop".
+export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, open, openMenu, pathname, style }, ref) {
+    const { navigation, slogan, socialMedia } = headerProps;
+    const { breakpoint, smDown } = useBreakpoint();
+    // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
     useEffect(() => {
-        if (smDesktop) {
-            closeMenu();
-        }
-    }, [closeMenu, smDesktop]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Fade, { in: !smDesktop, ...switchProps },
-            React.createElement(IconButton, { color: "ink", onClick: openMenu, ref: ref, style: style },
-                React.createElement(MenuRoundedIcon, null))),
-        React.createElement(MDialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeMenu, open: open, PaperProps: { elevation: 0 }, TransitionComponent: Fade, transitionDuration: smDesktop ? 0 : 600, TransitionProps: { easing: "ease-out" } },
+        if (smDown)
+            return;
+        closeMenu();
+    }, [closeMenu, smDown]);
+    if (!smDown)
+        return null;
+    return (React.createElement(Fragment, null,
+        React.createElement(IconButton, { color: "ink", onClick: openMenu, ref: ref, style: style },
+            React.createElement(MenuRoundedIcon, null)),
+        React.createElement(MDialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeMenu, open: open, PaperProps: { elevation: 0 }, TransitionComponent: Fade, transitionDuration: smDown ? 600 : 0, TransitionProps: { easing: "ease-out" } },
             React.createElement(AppBar, { component: "div", elevation: 0 },
                 React.createElement(Toolbar, { onClose: closeMenu, ...headerProps })),
             React.createElement(Content, null,
                 slogan && React.createElement(Slogan, { slogan: slogan }),
-                React.createElement(Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: flattenNavigationLinks(navLinks) }),
+                React.createElement(Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: getMenuNavigationLinks(navigation, breakpoint), pathname: pathname }),
                 socialMedia && (React.createElement(Socials, { buttonSize: "xlarge", socials: socialMedia.socials }))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.js

@@ -1,17 +1,10 @@
-import { Fade, IconButton } from "@mui/material";
+import { IconButton } from "@mui/material";
 import React from "react";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../../../theme/common/breakpoints";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
 import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { SWITCH_TRANSITION_PROPS } from "../../../../../../../../common/constants";
 import { Button } from "./searchButton.styles";
 export const SearchButton = ({ openSearch }) => {
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-    const switchProps = SWITCH_TRANSITION_PROPS;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Fade, { in: smDesktop, ...switchProps },
-            React.createElement(Button, { onClick: openSearch, startIcon: React.createElement(SearchIcon, null), variant: "nav" }, "Search")),
-        React.createElement(Fade, { in: !smDesktop, ...switchProps },
-            React.createElement(IconButton, { color: "ink", onClick: openSearch },
-                React.createElement(SearchIcon, { fontSize: "medium" })))));
+    const { mdUp } = useBreakpoint();
+    return mdUp ? (React.createElement(Button, { onClick: openSearch, startIcon: React.createElement(SearchIcon, null), variant: "nav" }, "Search")) : (React.createElement(IconButton, { color: "ink", onClick: openSearch },
+        React.createElement(SearchIcon, { fontSize: "medium" })));
 };

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.d.ts

@@ -12,7 +12,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     size?: "large" | "medium" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

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

@@ -6,5 +6,6 @@ export interface NavigationDrawerProps {
     headerProps?: HeaderProps;
     menuItems: MenuItem[];
     menuLabel: ReactNode;
+    pathname?: string;
 }
-export declare const NavigationDrawer: ({ closeAncestor, headerProps, menuItems, menuLabel, }: NavigationDrawerProps) => JSX.Element;
+export declare const NavigationDrawer: ({ closeAncestor, headerProps, menuItems, menuLabel, pathname, }: NavigationDrawerProps) => JSX.Element;

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

@@ -8,7 +8,7 @@ import { DrawerNavigation as Navigation } from "../../../Actions/components/Menu
 import { Toolbar } from "../../../Actions/components/Menu/components/Toolbar/toolbar";
 import { Slide } from "./components/Slide/slide";
 import { Button as BackButton, Content } from "./navigationDrawer.styles";
-export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLabel, }) => {
+export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLabel, pathname, }) => {
     const [drawerOpen, setDrawerOpen] = useState(false);
     const openDrawer = () => {
         setDrawerOpen(true);
@@ -27,5 +27,5 @@ export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLa
                 React.createElement(Toolbar, { onClose: closeDrawers, ...headerProps })),
             React.createElement(Content, null,
                 React.createElement(BackButton, { fullWidth: true, onClick: closeDrawer, StartIcon: BackArrowIcon, variant: "nav" }, menuLabel),
-                React.createElement(Navigation, { closeAncestor: closeDrawers, headerProps: headerProps, links: menuItems })))));
+                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

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