@databiosphere/findable-ui 7.0.0 → 8.0.0

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/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/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.js

@@ -1,10 +1,8 @@
 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";
@@ -12,24 +10,24 @@ import { Navigation } from "./components/Content/components/Navigation/navigatio
 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".
+    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) }),
                 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/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);
+    const { mdUp } = useBreakpoint();
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const openMenu = (event) => {
@@ -17,7 +16,7 @@ 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",
             } },

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

@@ -1,18 +1,18 @@
 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;

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

@@ -1,19 +1,17 @@
 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, 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 })) : (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, menuItems: menuItems, menuLabel: label })),
         divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
         React.createElement(Button, { onClick: () => {
                 isClientSideNavigation(url)

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>, {}>;