@databiosphere/findable-ui 10.1.0 → 10.2.0

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

@@ -1,4 +1,2 @@
-import { MenuProps as MMenuProps } from "@mui/material";
-export declare const MENU_ANCHOR_ORIGIN_LEFT_BOTTOM: MMenuProps["anchorOrigin"];
-export declare const MENU_ANCHOR_ORIGIN_RIGHT_TOP: MMenuProps["anchorOrigin"];
-export declare const MENU_PROPS: Partial<MMenuProps>;
+import { PopperProps as MPopperProps } from "@mui/material";
+export declare const POPPER_PROPS: Partial<MPopperProps>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/common/constants.js

@@ -1,19 +1,13 @@
-export const MENU_ANCHOR_ORIGIN_LEFT_BOTTOM = {
-    horizontal: "left",
-    vertical: "bottom",
-};
-export const MENU_ANCHOR_ORIGIN_RIGHT_TOP = {
-    horizontal: "right",
-    vertical: "top",
-};
-export const MENU_PROPS = {
-    slotProps: {
-        paper: {
-            variant: "menu",
+export const POPPER_PROPS = {
+    modifiers: [
+        {
+            name: "flip",
+            options: {
+                padding: 16,
+            },
         },
-    },
-    transformOrigin: {
-        horizontal: "left",
-        vertical: "top",
-    },
+    ],
+    placement: "bottom-start",
+    role: "presentation",
+    transition: true,
 };

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

@@ -1,13 +1,13 @@
-import { MenuProps as MMenuProps } from "@mui/material";
+import { PopperProps as MPopperProps } from "@mui/material";
 import { ReactNode } from "react";
 import { MenuItem } from "../NavigationMenuItems/navigationMenuItems";
 export interface NavLinkMenuProps {
-    anchorOrigin?: MMenuProps["anchorOrigin"];
     closeAncestor?: () => void;
-    disablePortal?: boolean;
     isSelected?: boolean;
+    isSubMenu?: boolean;
     menuItems: MenuItem[];
     menuLabel: ReactNode;
     pathname?: string;
+    popperProps?: Partial<MPopperProps>;
 }
-export declare const NavigationMenu: ({ anchorOrigin, closeAncestor, disablePortal, isSelected, menuItems, menuLabel, pathname, }: NavLinkMenuProps) => JSX.Element;
+export declare const NavigationMenu: ({ closeAncestor, isSelected, isSubMenu, menuItems, menuLabel, pathname, popperProps, }: NavLinkMenuProps) => JSX.Element;

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

@@ -1,25 +1,34 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
-import React, { Fragment } from "react";
-import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
+import { ClickAwayListener as MClickAwayListener, Grow, MenuList as MMenuList, Paper as MPaper, } from "@mui/material";
+import React, { Fragment, useEffect } from "react";
 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, isSelected = false, menuItems, menuLabel, pathname, }) => {
-    const { mdUp } = useBreakpoint();
-    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: isSelected ? "activeNav" : "nav" },
+import { POPPER_PROPS } from "./common/constants";
+import { Button, StyledMenuItem, StyledPopper } from "./navigationMenu.styles";
+export const NavigationMenu = ({ closeAncestor, isSelected = false, isSubMenu = false, menuItems, menuLabel, pathname, popperProps, }) => {
+    const { anchorEl, onClose, onDisableScrollLock, onEnableScrollLock, onOpen, open, } = useMenu();
+    const MenuItem = isSubMenu ? StyledMenuItem : Fragment;
+    useEffect(() => {
+        return () => {
+            if (isSubMenu || !open)
+                return;
+            onDisableScrollLock();
+        };
+    }, [isSubMenu, onDisableScrollLock, open]);
+    return (React.createElement(MenuItem, null,
+        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: open, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" },
             React.createElement(NavigationButtonLabel, { label: menuLabel })),
-        React.createElement(Menu, { ...MENU_PROPS, anchorEl: anchorEl, anchorOrigin: anchorOrigin, disablePortal: disablePortal, onClose: () => {
-                onClose();
-                closeAncestor?.();
-            }, open: mdUp && open },
-            React.createElement(NavigationMenuItems, { closeMenu: () => {
-                    onClose();
-                    closeAncestor?.();
-                }, menuItems: menuItems, pathname: pathname }))));
+        React.createElement(StyledPopper, { ...POPPER_PROPS, ...popperProps, anchorEl: anchorEl, open: open }, ({ TransitionProps }) => (React.createElement(Grow, { ...TransitionProps, onEntered: () => {
+                if (isSubMenu)
+                    return;
+                onEnableScrollLock();
+            } },
+            React.createElement(MPaper, { variant: "menu" },
+                React.createElement(MClickAwayListener, { onClickAway: onClose },
+                    React.createElement(MMenuList, null,
+                        React.createElement(NavigationMenuItems, { closeMenu: () => {
+                                onClose();
+                                closeAncestor?.();
+                            }, menuItems: menuItems, pathname: pathname })))))))));
 };

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

@@ -2,7 +2,16 @@
 interface Props {
     isActive: boolean;
 }
-export declare const Menu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+export declare const StyledPopper: import("@emotion/styled").StyledComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
+    component?: import("react").ElementType<any> | undefined;
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
+    } | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<Omit<import("../../../../../../../../../common/Button/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {

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

@@ -1,75 +1,77 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Menu as MMenu, MenuItem as MMenuItem } from "@mui/material";
+import { MenuItem as MMenuItem, Popper as MPopper } from "@mui/material";
 import { inkLight, smokeLight, smokeMain, } from "../../../../../../../../../../styles/common/mixins/colors";
 import { Button as DXButton } from "../../../../../../../../../common/Button/button";
-export const Menu = styled(MMenu) `
+export const StyledPopper = styled(MPopper) `
+  z-index: 1300;
+
   .MuiPaper-menu {
     border-color: ${smokeMain};
     margin: 4px 0;
+    max-height: calc(100vh - 96px);
     max-width: 324px;
     min-width: 204px;
-  }
+    overflow-y: auto;
 
-  .MuiList-root {
-    .MuiMenuItem-root {
-      gap: 8px;
-      margin: 0;
+    .MuiList-root {
+      display: flex;
+      flex-direction: column;
 
-      .MuiListItemIcon-root {
-        align-self: flex-start;
-        min-width: unset;
-      }
+      .MuiMenuItem-root {
+        gap: 8px;
+        margin: 0;
 
-      .MuiListItemText-root {
-        display: grid;
-        gap: 4px;
-        white-space: normal;
+        .MuiListItemIcon-root {
+          align-self: flex-start;
+          min-width: unset;
+        }
 
-        .MuiListItemText-primary {
-          align-items: center;
-          display: flex;
+        .MuiListItemText-root {
+          display: grid;
           gap: 4px;
-          min-width: 0;
+          white-space: normal;
+
+          .MuiListItemText-primary {
+            align-items: center;
+            display: flex;
+            gap: 4px;
+            min-width: 0;
+          }
+
+          .MuiListItemText-secondary {
+            color: ${inkLight};
+            white-space: normal;
+          }
         }
 
-        .MuiListItemText-secondary {
+        &.Mui-disabled {
           color: ${inkLight};
-          white-space: normal;
+          opacity: 1;
         }
-      }
 
-      &.Mui-disabled {
-        color: ${inkLight};
-        opacity: 1;
+        &.Mui-selected {
+          background-color: ${smokeLight};
+        }
       }
 
-      &.Mui-selected {
-        background-color: ${smokeLight};
-      }
-    }
+      .MuiButton-activeNav,
+      .MuiButton-nav {
+        font-weight: 400;
+        justify-content: space-between;
+        width: 100%;
 
-    .MuiButton-activeNav,
-    .MuiButton-nav {
-      font-weight: 400;
-      justify-content: space-between;
-      width: 100%;
-
-      .MuiButton-endIcon {
-        margin-left: -6px;
-        margin-right: -6px;
+        .MuiButton-endIcon {
+          margin-left: -6px;
+          margin-right: -6px;
+        }
       }
-    }
 
-    .MuiDivider-root {
-      margin: 8px 0;
+      .MuiDivider-root {
+        margin: 8px 0;
+      }
     }
   }
-
-  .MuiPopover-root {
-    cursor: default;
-    z-index: -1;
-  }
 `;
 export const Button = styled(DXButton, {
     shouldForwardProp: (prop) => prop !== "isActive",

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

@@ -0,0 +1,2 @@
+import { PopperProps as MPopperProps } from "@mui/material";
+export declare const POPPER_PROPS: Partial<MPopperProps>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/common/constants.js

@@ -0,0 +1,3 @@
+export const POPPER_PROPS = {
+    placement: "right-start",
+};

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

@@ -5,11 +5,11 @@ import { TEXT_BODY_400, TEXT_BODY_500, TEXT_BODY_SMALL_400_2_LINES, TEXT_UPPERCA
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../../../Links/common/utils";
 import { isNavigationLinkSelected } from "../../common/utils";
-import { MENU_ANCHOR_ORIGIN_RIGHT_TOP } from "../NavigationMenu/common/constants";
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
+import { POPPER_PROPS } from "./common/constants";
 export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
     const router = useRouter();
-    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 },
+    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, closeAncestor: closeMenu, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), isSubMenu: true, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname, popperProps: POPPER_PROPS })) : (React.createElement(Fragment, { key: i },
         React.createElement(MMenuItem, { disabled: !url, onClick: () => {
                 closeMenu();
                 isClientSideNavigation(url)

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

@@ -19,6 +19,7 @@ export interface NavigationProps {
     className?: string;
     closeAncestor?: () => void;
     headerProps?: HeaderProps;
+    isMenuIn?: boolean;
     links: NavLinkItem[];
     pathname?: string;
     style?: CSSProperties;

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

@@ -1,7 +1,6 @@
 import { Button, Divider } from "@mui/material";
 import { useRouter } from "next/router";
 import React, { forwardRef, Fragment } from "react";
-import { useBreakpoint } from "../../../../../../../../hooks/useBreakpoint";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
 import { isNavigationLinkSelected } from "./common/utils";
@@ -9,11 +8,10 @@ import { NavigationButtonLabel } from "./components/NavigationButtonLabel/naviga
 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({ className, closeAncestor, headerProps, links, pathname, style, }, ref) {
-    const { mdUp } = useBreakpoint();
+export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, isMenuIn = false, links, pathname, style, }, ref) {
     const router = useRouter();
-    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 })),
+    return (React.createElement(Links, { ref: ref, className: className, isMenuIn: isMenuIn, style: style }, links.map(({ divider, label, menuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => menuItems ? (React.createElement(Fragment, { key: i },
+        isMenuIn ? (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, isMenuIn: isMenuIn, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, 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?.();

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

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

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

@@ -1,17 +1,18 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
 import { textBody500 } from "../../../../../../../../styles/common/mixins/fonts";
 export const Navigation = styled("div") `
   display: flex;
-  flex: 1;
+  flex: unset;
   flex-direction: row;
   gap: 8px;
-  justify-content: flex-start;
+  justify-content: inherit;
 
-  ${mediaDesktopSmallUp} {
-    flex: unset;
-    justify-content: inherit;
-  }
+  ${({ isMenuIn }) => isMenuIn &&
+    css `
+      flex: 1;
+      justify-content: flex-start;
+    `};
 
   .MuiButton-activeNav,
   .MuiButton-nav {
@@ -26,9 +27,5 @@ export const Navigation = styled("div") `
 
   .MuiDivider-root {
     margin: 8px 0;
-
-    ${mediaDesktopSmallUp} {
-      display: none;
-    }
   }
 `;

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

@@ -4,9 +4,9 @@ import React from "react";
 import { APP_BAR_PROPS, FADE_TRANSITION_PROPS, TOOLBAR_PROPS, } from "./common/constants";
 import { Announcements } from "./components/Announcements/announcements";
 import { Actions } from "./components/Content/components/Actions/actions";
-import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
+import { Authentication, renderButton as renderAuthenticationButton, renderIconButton as renderAuthenticationIconButton, } from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
-import { Search } from "./components/Content/components/Actions/components/Search/search";
+import { renderButton as renderSearchButton, renderIconButton as renderSearchIconButton, Search, } from "./components/Content/components/Actions/components/Search/search";
 import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
@@ -44,8 +44,12 @@ export const Header = ({ ...headerProps }) => {
                     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 }),
-                        React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+                        React.createElement(Search, { Button: ({ ...props }) => isIn.isMenuIn
+                                ? renderSearchIconButton(props)
+                                : renderSearchButton(props), closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
+                        React.createElement(Authentication, { Button: ({ ...props }) => isIn.isMenuIn
+                                ? renderAuthenticationIconButton(props)
+                                : renderAuthenticationButton(props), authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
                         actions,
-                        React.createElement(Menu, { ...navigationProps, closeMenu: onClose, open: open, openMenu: onOpen }))))))));
+                        React.createElement(Menu, { ...navigationProps, closeMenu: onClose, isMenuIn: isIn.isMenuIn, open: open, openMenu: onOpen }))))))));
 };

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

@@ -1,9 +1,10 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
+import { smokeMain } from "../../../../styles/common/mixins/colors";
 import { HEADER_HEIGHT } from "./common/constants";
 export const AppBar = styled(MAppBar) `
-  border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
+  border-bottom: 1px solid ${smokeMain};
 
   &.MuiPaper-elevation0 {
     border-bottom: 1px solid transparent;

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

@@ -6,6 +6,7 @@ export interface UseHeaderVisibility {
         isCenterNavigationIn: boolean;
         isLeftGroupIn: boolean;
         isLeftNavigationIn: boolean;
+        isMenuIn: boolean;
         isRightGroupIn: boolean;
         isRightNavigationIn: boolean;
         isSloganIn: boolean;

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

@@ -5,21 +5,25 @@ import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
  * @returns header component visibility.
  */
 export const useHeaderVisibility = (headerProps) => {
-    const { lgUp, mdUp } = useBreakpoint();
+    const { breakpoint, lgUp, mdUp, smDown, smUp } = useBreakpoint();
     // Header configuration.
     const { actions, authenticationEnabled, logo, navigation: [navItemsL, navItemsC, navItemsR] = [], searchEnabled, slogan, socialMedia, } = headerProps;
+    // Breakpoint.
+    const hasBreakpoint = Boolean(breakpoint);
     // Header content.
     const hasActions = Boolean(actions);
     const hasLogo = Boolean(logo);
-    const hasMenu = !mdUp;
+    const hasMenu = smDown;
     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.
-    const isActionsIn = hasActions || searchEnabled || authenticationEnabled || hasMenu;
-    const isNavigationIn = mdUp;
+    const isActionsIn = (hasActions || searchEnabled || authenticationEnabled || hasMenu) &&
+        hasBreakpoint;
+    const isNavigationIn = smUp;
+    const isMenuIn = hasMenu;
     const isSloganIn = hasSlogan && mdUp;
     const isSocialsIn = hasSocials && lgUp;
     // Determines navigation visibility.
@@ -27,7 +31,7 @@ export const useHeaderVisibility = (headerProps) => {
     const isLeftNavigationIn = isNavigationIn && hasNavItemsL;
     const isRightNavigationIn = isNavigationIn && hasNavItemsR;
     // Determines group visibility.
-    const isLeftGroupIn = hasLogo || isSocialsIn || isLeftNavigationIn;
+    const isLeftGroupIn = hasLogo || isSloganIn || isLeftNavigationIn;
     const isCenterGroupIn = isCenterNavigationIn;
     const isRightGroupIn = isRightNavigationIn || isSocialsIn || isActionsIn;
     return {
@@ -37,6 +41,7 @@ export const useHeaderVisibility = (headerProps) => {
             isCenterNavigationIn,
             isLeftGroupIn,
             isLeftNavigationIn,
+            isMenuIn,
             isRightGroupIn,
             isRightNavigationIn,
             isSloganIn,

package/lib/components/common/CustomIcon/components/InProgressIcon/inProgressIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CustomSVGIconProps } from "../../common/entities";
+/**
+ * Custom in-progress icon.
+ */
+export declare const InProgressIcon: ({ fontSize, viewBox, ...props }: CustomSVGIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/InProgressIcon/inProgressIcon.js

@@ -0,0 +1,9 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+/**
+ * Custom in-progress icon.
+ */
+export const InProgressIcon = ({ fontSize = "xsmall", viewBox = "0 0 18 18", ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */ }) => {
+    return (React.createElement(SvgIcon, { fontSize: fontSize, viewBox: viewBox, ...props },
+        React.createElement("path", { d: "M9 16.5C7.9625 16.5 6.9875 16.3031 6.075 15.9094C5.1625 15.5156 4.36875 14.9812 3.69375 14.3062C3.01875 13.6312 2.48437 12.8375 2.09062 11.925C1.69687 11.0125 1.5 10.0375 1.5 9C1.5 7.9625 1.69687 6.9875 2.09062 6.075C2.48437 5.1625 3.01875 4.36875 3.69375 3.69375C4.36875 3.01875 5.1625 2.48437 6.075 2.09062C6.9875 1.69687 7.9625 1.5 9 1.5C10.0375 1.5 11.0125 1.69687 11.925 2.09062C12.8375 2.48437 13.6312 3.01875 14.3062 3.69375C14.9812 4.36875 15.5156 5.1625 15.9094 6.075C16.3031 6.9875 16.5 7.9625 16.5 9C16.5 10.0375 16.3031 11.0125 15.9094 11.925C15.5156 12.8375 14.9812 13.6312 14.3062 14.3062C13.6312 14.9812 12.8375 15.5156 11.925 15.9094C11.0125 16.3031 10.0375 16.5 9 16.5ZM9 15C9.8 15 10.5687 14.85 11.3062 14.55C12.0437 14.25 12.6937 13.8187 13.2562 13.2562L9 9V3C7.325 3 5.90625 3.58125 4.74375 4.74375C3.58125 5.90625 3 7.325 3 9C3 10.675 3.58125 12.0937 4.74375 13.2562C5.90625 14.4187 7.325 15 9 15Z", fill: "currentColor" })));
+};

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

@@ -1,8 +1,10 @@
-import { MenuProps as MMenuProps } from "@mui/material";
+import { PopperProps as MPopperProps } from "@mui/material";
 import { MouseEvent } from "react";
 export interface UseMenu {
-    anchorEl: MMenuProps["anchorEl"];
+    anchorEl: MPopperProps["anchorEl"];
     onClose: () => void;
+    onDisableScrollLock: () => void;
+    onEnableScrollLock: () => void;
     onOpen: (event: MouseEvent<HTMLElement>) => void;
     onToggleOpen: (event: MouseEvent<HTMLElement>) => void;
     open: boolean;

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

@@ -10,6 +10,14 @@ export const useMenu = () => {
     const onClose = useCallback(() => {
         setAnchorEl(null);
     }, []);
+    // Disables scroll lock.
+    const onDisableScrollLock = useCallback(() => {
+        document.body.style.removeProperty("overflow");
+    }, []);
+    // Enables scroll lock.
+    const onEnableScrollLock = useCallback(() => {
+        document.body.style.setProperty("overflow", "hidden");
+    }, []);
     // Opens menu.
     const onOpen = useCallback((event) => {
         setAnchorEl(event.currentTarget);
@@ -26,6 +34,8 @@ export const useMenu = () => {
     return {
         anchorEl,
         onClose,
+        onDisableScrollLock,
+        onEnableScrollLock,
         onOpen,
         onToggleOpen,
         open,

package/lib/hooks/useBreakpoint.js

@@ -1,3 +1,4 @@
+import { BREAKPOINT_FN_NAME, useBreakpointHelper } from "./useBreakpointHelper";
 import { useCurrentBreakpoint, } from "./useCurrentBreakpoint";
 export const useBreakpoint = () => {
     const breakpoint = useCurrentBreakpoint();
@@ -7,15 +8,15 @@ export const useBreakpoint = () => {
     const md = breakpoint === "md";
     const lg = breakpoint === "lg";
     // Current breakpoint, down.
-    const xsDown = xs;
-    const smDown = xs || sm;
-    const mdDown = xs || sm || md;
-    const lgDown = xs || sm || md || lg;
+    const xsDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "xs");
+    const smDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "sm");
+    const mdDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
+    const lgDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "lg");
     // Current breakpoint, up.
-    const xsUp = xs || sm || md || lg;
-    const smUp = sm || md || lg;
-    const mdUp = md || lg;
-    const lgUp = lg;
+    const xsUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "xs");
+    const smUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "sm");
+    const mdUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "md");
+    const lgUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "lg");
     return {
         breakpoint,
         lg,

package/lib/utils/replaceParameters.d.ts

@@ -0,0 +1,10 @@
+export interface Parameter {
+    [key: string]: string;
+}
+/**
+ * Replaces path parameters in the given URL string e.g. "/{portalURL}/overview" with the corresponding value.
+ * @param str - URL string, with parameters.
+ * @param parameter - Parameter.
+ * @returns string with parameters replaced.
+ */
+export declare function replaceParameters(str: string, parameter: Parameter): string;

package/lib/utils/replaceParameters.js

@@ -0,0 +1,16 @@
+/**
+ * Replaces path parameters in the given URL string e.g. "/{portalURL}/overview" with the corresponding value.
+ * @param str - URL string, with parameters.
+ * @param parameter - Parameter.
+ * @returns string with parameters replaced.
+ */
+export function replaceParameters(str, parameter) {
+    const result = Object.entries(parameter).reduce((acc, [parameterKey, parameterValue]) => {
+        const regex = new RegExp(`\\{${parameterKey}}`, "g");
+        return acc.replace(regex, parameterValue);
+    }, str);
+    if (/\{\w+}/.test(result)) {
+        throw new Error(`URL still contains path parameters: ${result}`);
+    }
+    return result;
+}

package/package.json

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

package/src/components/Layout/components/Header/components/Content/components/Actions/actions.styles.ts

@@ -1,14 +1,9 @@
 import styled from "@emotion/styled";
-import { DESKTOP_SM } from "../../../../../../../../theme/common/breakpoints";
 
 export const HeaderActions = styled.div`
   align-items: center;
   display: flex;
-  flex: 1;
+  flex: none;
   gap: 8px;
-  justify-content: flex-end;
-
-  ${({ theme }) => theme.breakpoints.up(DESKTOP_SM)} {
-    flex: none;
-  }
+  justify-content: inherit;
 `;