@databiosphere/findable-ui 8.0.2 → 9.0.0

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

@@ -1,13 +1,34 @@
 import styled from "@emotion/styled";
-import { textHeadingSmall } from "../../../../../../../../../../styles/common/mixins/fonts";
+import { Dialog as MDialog } from "@mui/material";
+import { inkLight } from "../../../../../../../../../../styles/common/mixins/colors";
+import { textBody400, textUppercase500, } from "../../../../../../../../../../styles/common/mixins/fonts";
 import { Button as DXButton } from "../../../../../../../../../common/Button/button";
+export const Dialog = styled(MDialog) `
+  + .MuiDialog-root {
+    .MuiButton-activeNav,
+    .MuiButton-nav {
+      ${textBody400};
+      padding: 6px 48px;
+
+      &.Mui-disabled {
+        ${textUppercase500};
+        color: ${inkLight};
+        margin-top: 20px;
+        opacity: 1;
+      }
+
+      &:first-of-type {
+        margin-top: 10px;
+      }
+    }
+  }
+`;
 export const Content = styled.div `
   padding: 16px 0;
   overflow-x: hidden;
   overflow-y: auto;
 `;
 export const Button = styled(DXButton) `
-  ${textHeadingSmall};
   gap: 8px;
   justify-content: flex-start;
   padding: 12px 24px;

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

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

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

@@ -0,0 +1,19 @@
+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",
+        },
+    },
+    transformOrigin: {
+        horizontal: "left",
+        vertical: "top",
+    },
+};

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

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

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

@@ -1,24 +1,25 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
-import React, { useState } from "react";
+import React, { Fragment } from "react";
 import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
+import { useMenuWithPosition } from "../../../../../../../../../../hooks/useMenuWithPosition";
+import { NavigationButtonLabel } from "../NavigationButtonLabel/navigationButtonLabel";
 import { NavigationMenuItems, } from "../NavigationMenuItems/navigationMenuItems";
-import { Button, Menu } from "./navigationMenu.styles";
-export const NavigationMenu = ({ anchorOrigin = { horizontal: "left", vertical: "bottom" }, closeAncestor, menuItems, menuLabel, pathname, }) => {
+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, }) => {
     const { mdUp } = useBreakpoint();
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
-    const openMenu = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const closeMenu = () => {
-        closeAncestor?.();
-        setAnchorEl(null);
-    };
-    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: mdUp && open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
-                horizontal: "left",
-                vertical: "top",
-            } },
-            React.createElement(NavigationMenuItems, { closeMenu: closeMenu, menuItems: menuItems, pathname: pathname }))));
+    const { anchorEl, onClose, onToggleOpen, open } = useMenuWithPosition();
+    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(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 }))));
 };

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

@@ -8,4 +8,34 @@ export declare const Menu: import("@emotion/styled").StyledComponent<import("@mu
 export declare const Button: import("@emotion/styled").StyledComponent<Omit<import("../../../../../../../../../common/Button/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Props, {}, {}>;
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<{
+    autoFocus?: boolean | undefined;
+    classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
+    dense?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disableGutters?: boolean | undefined;
+    divider?: boolean | undefined;
+    selected?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "autoFocus" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "selected" | "dense" | "disableGutters" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "divider"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export {};

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

@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Menu as MMenu } from "@mui/material";
+import { Menu as MMenu, MenuItem as MMenuItem } 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) `
@@ -24,11 +24,13 @@ export const Menu = styled(MMenu) `
       .MuiListItemText-root {
         display: grid;
         gap: 4px;
+        white-space: normal;
 
         .MuiListItemText-primary {
           align-items: center;
           display: flex;
           gap: 4px;
+          min-width: 0;
         }
 
         .MuiListItemText-secondary {
@@ -37,6 +39,11 @@ export const Menu = styled(MMenu) `
         }
       }
 
+      &.Mui-disabled {
+        color: ${inkLight};
+        opacity: 1;
+      }
+
       &.Mui-selected {
         background-color: ${smokeLight};
       }
@@ -58,6 +65,11 @@ export const Menu = styled(MMenu) `
       margin: 8px 0;
     }
   }
+
+  .MuiPopover-root {
+    cursor: default;
+    z-index: -1;
+  }
 `;
 export const Button = styled(DXButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
@@ -68,3 +80,6 @@ export const Button = styled(DXButton, {
       background-color: ${smokeLight(props)};
     `};
 `;
+export const StyledMenuItem = styled(MMenuItem) `
+  padding: 0;
+`;

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

@@ -1,22 +1,28 @@
 import { Divider, ListItemIcon, ListItemText, MenuItem as MMenuItem, } from "@mui/material";
 import { useRouter } from "next/router";
 import React, { Fragment } from "react";
-import { TEXT_BODY_400, TEXT_BODY_500, TEXT_BODY_SMALL_400_2_LINES, } from "../../../../../../../../../../theme/common/typography";
-import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
+import { TEXT_BODY_400, TEXT_BODY_500, TEXT_BODY_SMALL_400_2_LINES, TEXT_UPPERCASE_500, } from "../../../../../../../../../../theme/common/typography";
+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";
 export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
     const router = useRouter();
-    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, anchorOrigin: { horizontal: "right", vertical: "top" }, closeAncestor: closeMenu, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname })) : (React.createElement(Fragment, { key: i },
-        React.createElement(MMenuItem, { onClick: () => {
+    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 },
+        React.createElement(MMenuItem, { disabled: !url, onClick: () => {
                 closeMenu();
                 isClientSideNavigation(url)
                     ? router.push(url)
-                    : window.open(url, target, "noopener noreferrer");
-            }, selected: url === pathname },
+                    : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
+            }, selected: isNavigationLinkSelected(url, pathname, selectedMatch) },
             icon && React.createElement(ListItemIcon, null, icon),
             React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
-                    variant: description ? TEXT_BODY_500 : TEXT_BODY_400,
+                    variant: url
+                        ? description
+                            ? TEXT_BODY_500
+                            : TEXT_BODY_400
+                        : TEXT_UPPERCASE_500,
                 }, secondary: description, secondaryTypographyProps: {
                     variant: TEXT_BODY_SMALL_400_2_LINES,
                 } })),

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

@@ -1,6 +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 { HeaderProps } from "../../../../header";
 import { MenuItem } from "./components/NavigationMenuItems/navigationMenuItems";
 export interface NavLinkItem {
@@ -8,6 +9,7 @@ export interface NavLinkItem {
     flatten?: Partial<Record<BreakpointKey, boolean>>;
     label: ReactNode;
     menuItems?: MenuItem[];
+    selectedMatch?: SELECTED_MATCH;
     target?: ANCHOR_TARGET;
     url: string;
     visible?: Partial<Record<BreakpointKey, boolean>>;

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

@@ -2,22 +2,27 @@ 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 } from "../../../../../../../Links/common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { isNavigationLinkSelected } from "./common/utils";
+import { NavigationButtonLabel } from "./components/NavigationButtonLabel/navigationButtonLabel";
 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();
     const router = useRouter();
-    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 },
+    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 })),
         divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
-        React.createElement(Button, { onClick: () => {
+        React.createElement(Button, { disabled: !url, onClick: () => {
+                closeAncestor?.();
                 isClientSideNavigation(url)
                     ? router.push(url)
-                    : window.open(url, target, "noopener noreferrer");
-                closeAncestor?.();
-            }, variant: url === pathname ? "activeNav" : "nav" }, label),
+                    : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
+            }, variant: isNavigationLinkSelected(url, pathname, selectedMatch)
+                ? "activeNav"
+                : "nav" },
+            React.createElement(NavigationButtonLabel, { label: label })),
         divider && React.createElement(Divider, null))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.js

@@ -20,5 +20,7 @@ export const Slogan = styled.div `
   }
 `;
 export const Divider = styled(MDivider) `
-  max-height: 32px;
+  align-self: center;
+  display: flex;
+  height: 32px;
 `;

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

@@ -10,7 +10,10 @@ export const AppBar = styled(MAppBar) `
   }
 
   .MuiToolbar-root {
+    display: grid;
     gap: 16px;
+    grid-template-areas: "left center right";
+    grid-template-columns: 1fr auto 1fr;
     height: ${HEADER_HEIGHT}px;
     min-height: unset;
   }
@@ -23,6 +26,7 @@ const group = css `
 export const Left = styled.div `
   ${group};
   gap: 16px;
+  grid-area: left;
   justify-content: flex-start;
 
   .MuiButton-navPrimary {
@@ -33,9 +37,12 @@ export const Left = styled.div `
 `;
 export const Center = styled.div `
   ${group};
+  grid-area: center;
   justify-content: center;
 `;
 export const Right = styled.div `
   ${group};
+  gap: 8px;
+  grid-area: right;
   justify-content: flex-end;
 `;

package/lib/components/Layout/components/Nav/nav.styles.js

@@ -45,5 +45,11 @@ export const List = styled(MList) `
         }
       }
     }
+
+    &:first-of-type {
+      .MuiListItemButton-root.Mui-disabled {
+        margin-top: 0;
+      }
+    }
   }
 `;

package/lib/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.js

@@ -1,8 +1,7 @@
 import { CloseRounded } from "@mui/icons-material";
 import React from "react";
-import { CloseDrawerIconButton } from "../../../../../common/IconButton/iconButton.styles";
 import { DrawerTransition } from "../../../../../Filter/components/Filter/components/DrawerTransition/drawerTransition";
-import { TemporarySidebar } from "./sidebarDrawer.styles";
+import { IconButton, TemporarySidebar } from "./sidebarDrawer.styles";
 const DEFAULT_POSITION = { left: 0, top: 0 };
 const DRAWER_SLOT_PROPS = {
     paper: { square: true },
@@ -10,6 +9,6 @@ const DRAWER_SLOT_PROPS = {
 };
 export const SidebarDrawer = ({ children, drawerOpen = false, onDrawerClose, }) => {
     return (React.createElement(TemporarySidebar, { anchorPosition: DEFAULT_POSITION, anchorReference: "anchorPosition", hideBackdrop: false, marginThreshold: 0, onClose: onDrawerClose, open: drawerOpen, slotProps: DRAWER_SLOT_PROPS, TransitionComponent: DrawerTransition, transitionDuration: drawerOpen ? 250 : 300 },
-        React.createElement(CloseDrawerIconButton, { Icon: CloseRounded, onClick: onDrawerClose, size: "medium" }),
+        React.createElement(IconButton, { Icon: CloseRounded, onClick: onDrawerClose, size: "medium" }),
         children));
 };

package/lib/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.styles.d.ts

@@ -1,3 +1,6 @@
 export declare const TemporarySidebar: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const IconButton: import("@emotion/styled").StyledComponent<import("../../../../../common/IconButton/iconButton").IconButtonProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.styles.js

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
 import { Popover as MPopover } from "@mui/material";
 import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
-import { smokeLight } from "../../../../../../styles/common/mixins/colors";
+import { smokeLight, white, } from "../../../../../../styles/common/mixins/colors";
+import { IconButton as DXIconButton } from "../../../../../common/IconButton/iconButton";
 export const TemporarySidebar = styled(MPopover) `
   &.MuiPopover-root {
     ${mediaDesktopSmallDown} {
@@ -16,3 +17,9 @@ export const TemporarySidebar = styled(MPopover) `
     }
   }
 `;
+export const IconButton = styled(DXIconButton) `
+  color: ${white};
+  left: calc(100% + 4px);
+  position: absolute;
+  top: 4px;
+`;

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

@@ -6,7 +6,7 @@ export const SidebarPositioner = styled("div") `
   padding: 16px 0;
 
   ${mediaDesktopSmallUp} {
-    height: ${({ headerHeight }) => `calc(100vh - ${headerHeight}px)`};
+    max-height: 100vh;
     overflow: auto;
     padding: ${({ headerHeight }) => headerHeight}px 0 0;
     position: sticky;

package/lib/components/Layout/components/Sidebar/sidebar.styles.js

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
+import { smokeMain } from "../../../../styles/common/mixins/colors";
 export const Sidebar = styled.div `
   align-self: stretch;
-  border-right: 1px solid ${({ theme }) => theme.palette.smoke.main};
+  border-right: 1px solid ${smokeMain};
   box-sizing: content-box;
   width: 264px;
 `;

package/lib/components/Links/common/entities.d.ts

@@ -4,6 +4,10 @@ export declare enum ANCHOR_TARGET {
     BLANK = "_blank",
     SELF = "_self"
 }
+export declare enum REL_ATTRIBUTE {
+    NO_OPENER = "noopener",
+    NO_OPENER_NO_REFERRER = "noopener noreferrer"
+}
 export declare type StrictUrlObject = Omit<UrlObject, "href" | "query"> & {
     href: string;
     query: string;

package/lib/components/Links/common/entities.js

@@ -3,3 +3,8 @@ export var ANCHOR_TARGET;
     ANCHOR_TARGET["BLANK"] = "_blank";
     ANCHOR_TARGET["SELF"] = "_self";
 })(ANCHOR_TARGET || (ANCHOR_TARGET = {}));
+export var REL_ATTRIBUTE;
+(function (REL_ATTRIBUTE) {
+    REL_ATTRIBUTE["NO_OPENER"] = "noopener";
+    REL_ATTRIBUTE["NO_OPENER_NO_REFERRER"] = "noopener noreferrer";
+})(REL_ATTRIBUTE || (REL_ATTRIBUTE = {}));

package/lib/components/Links/common/utils.js

@@ -5,7 +5,7 @@ import { URL_OBJECT_KEYS } from "./constants";
  * @returns true if the given link is an internal link.
  */
 export function isClientSideNavigation(link) {
-    return /^\/(?!\/)/.test(link);
+    return /^\/(?!\/)|^#/.test(link);
 }
 /**
  * Returns true if the given url is a URL object with href and query.

package/lib/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.js

@@ -2,7 +2,7 @@ import Link from "next/link";
 import React, { useCallback } from "react";
 import { useExploreState } from "../../../../../../hooks/useExploreState";
 import { ExploreActionKind, } from "../../../../../../providers/exploreState";
-import { ANCHOR_TARGET, } from "../../../../common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../common/entities";
 const PARAM_FILTER = "filter";
 const PARAM_SORTING = "sorting";
 export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TARGET.SELF, url, }) => {
@@ -20,7 +20,7 @@ export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TAR
         });
         onClick?.();
     }, [exploreDispatch, onClick, url]);
-    return (React.createElement(Link, { className: className, href: url.href, onClick: onNavigate, rel: "noopener", target: target }, label));
+    return (React.createElement(Link, { className: className, href: url.href, onClick: onNavigate, rel: REL_ATTRIBUTE.NO_OPENER, target: target }, label));
 };
 /**
  * Returns the entity list type "entityListType" inferred from the given href.

package/lib/components/Links/components/Link/link.d.ts

@@ -12,4 +12,4 @@ export interface LinkProps {
     TypographyProps?: TypographyProps;
     url: Url;
 }
-export declare const Link: ({ className, copyable, label, noWrap, onClick, target, TypographyProps, url, }: LinkProps) => JSX.Element;
+export declare const Link: ({ className, copyable, label, noWrap, onClick, target, TypographyProps, url, ...props }: LinkProps) => JSX.Element;

package/lib/components/Links/components/Link/link.js

@@ -3,10 +3,10 @@ import NLink from "next/link";
 import React from "react";
 import { isValidUrl } from "../../../../common/utils";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
-import { ANCHOR_TARGET } from "../../common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../common/entities";
 import { isClientSideNavigation, isURLObjectWithHrefAndQuery, isURLString, } from "../../common/utils";
 import { ExploreViewLink } from "./components/ExploreViewLink/exploreViewLink";
-export const Link = ({ className, copyable = false, label, noWrap = false, onClick, target, TypographyProps, url, }) => {
+export const Link = ({ className, copyable = false, label, noWrap = false, onClick, target, TypographyProps, url, ...props /* Spread props to allow for specific MuiLink prop overrides. */ }) => {
     if (isURLObjectWithHrefAndQuery(url)) {
         /* Internal navigation - explore link */
         return (React.createElement(ExploreViewLink, { className: className, label: label, onClick: onClick, target: target, url: url }));
@@ -16,16 +16,16 @@ export const Link = ({ className, copyable = false, label, noWrap = false, onCli
             /* Client-side navigation */
             return (React.createElement(React.Fragment, null,
                 React.createElement(NLink, { href: url, legacyBehavior: true, passHref: true },
-                    React.createElement(MLink, { className: className, rel: "noopener", noWrap: noWrap, target: target || ANCHOR_TARGET.SELF, onClick: onClick, ...TypographyProps }, label)),
+                    React.createElement(MLink, { className: className, rel: REL_ATTRIBUTE.NO_OPENER, noWrap: noWrap, target: target || ANCHOR_TARGET.SELF, onClick: onClick, ...TypographyProps, ...props }, label)),
                 copyable && React.createElement(CopyToClipboard, { copyStr: url })));
         }
         if (isValidUrl(url)) {
             /* External navigation */
             return (React.createElement(React.Fragment, null,
-                React.createElement(MLink, { className: className, href: url, noWrap: noWrap, onClick: onClick, rel: "noopener noreferrer", target: target || ANCHOR_TARGET.BLANK, ...TypographyProps }, label),
+                React.createElement(MLink, { className: className, href: url, noWrap: noWrap, onClick: onClick, rel: REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target: target || ANCHOR_TARGET.BLANK, ...TypographyProps, ...props }, label),
                 copyable && React.createElement(CopyToClipboard, { copyStr: url })));
         }
     }
     /* Invalid URL */
-    return (React.createElement(MTypography, { component: "span", variant: "inherit", ...TypographyProps }, label));
+    return (React.createElement(MTypography, { component: "span", variant: "inherit", ...TypographyProps, ...props }, label));
 };

package/lib/components/Table/components/Pagination/pagination.js

@@ -2,7 +2,7 @@ import EastRoundedIcon from "@mui/icons-material/EastRounded";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import { Typography } from "@mui/material";
 import React from "react";
-import { IconButtonSecondary } from "../../../common/IconButton/iconButton.styles";
+import { IconButton } from "../../../common/IconButton/iconButton";
 import { Stack } from "../../../common/Stack/stack";
 import { Pagination as TablePagination } from "./pagination.styles";
 export const Pagination = ({ canNextPage = true, canPreviousPage = true, currentPage, onNextPage, onPreviousPage, totalPage, }) => {
@@ -14,6 +14,6 @@ export const Pagination = ({ canNextPage = true, canPreviousPage = true, current
                 " of ",
                 totalPage)),
         React.createElement(Stack, { direction: "row", gap: 2 },
-            React.createElement(IconButtonSecondary, { disabled: !canPreviousPage, Icon: WestRoundedIcon, onClick: onPreviousPage }),
-            React.createElement(IconButtonSecondary, { disabled: !canNextPage, Icon: EastRoundedIcon, onClick: onNextPage }))));
+            React.createElement(IconButton, { color: "secondary", disabled: !canPreviousPage, Icon: WestRoundedIcon, onClick: onPreviousPage }),
+            React.createElement(IconButton, { color: "secondary", disabled: !canNextPage, Icon: EastRoundedIcon, onClick: onNextPage }))));
 };

package/lib/components/common/Button/components/CallToActionButton/callToActionButton.js

@@ -1,11 +1,11 @@
 import NLink from "next/link";
 import React from "react";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../Links/common/utils";
 import { ButtonPrimary } from "../ButtonPrimary/buttonPrimary";
 export const CallToActionButton = ({ ButtonElType: Button = ButtonPrimary, callToAction, className, disabled = false, }) => {
     const { label, target, url } = callToAction;
     const isInternal = isClientSideNavigation(url);
     return isInternal ? (React.createElement(NLink, { href: url, legacyBehavior: true, passHref: true },
-        React.createElement(Button, { className: className, disabled: disabled, href: "passHref", rel: "noopener", target: target || ANCHOR_TARGET.SELF }, label))) : (React.createElement(Button, { className: className, disabled: disabled, href: url, rel: "noopener noreferrer", target: target || ANCHOR_TARGET.BLANK }, label));
+        React.createElement(Button, { className: className, disabled: disabled, href: "passHref", rel: REL_ATTRIBUTE.NO_OPENER, target: target || ANCHOR_TARGET.SELF }, label))) : (React.createElement(Button, { className: className, disabled: disabled, href: url, rel: REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target: target || ANCHOR_TARGET.BLANK }, label));
 };

package/lib/components/common/Button/components/HelpIconButton/helpIconButton.js

@@ -1,13 +1,13 @@
 import Link from "next/link";
 import React from "react";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../Links/common/utils";
 import { HelpIcon } from "../../../CustomIcon/components/HelpIcon/helpIcon";
 import { HelpIconButton as Button } from "./helpIconButton.styles";
 export const HelpIconButton = ({ size = "small", target, url, }) => {
     const isInternal = isClientSideNavigation(url);
     return isInternal ? (React.createElement(Link, { href: url, legacyBehavior: true, passHref: true },
-        React.createElement(Button, { href: "passHref", rel: "noopener", target: target || ANCHOR_TARGET.SELF },
-            React.createElement(HelpIcon, { fontSize: size })))) : (React.createElement(Button, { href: url, rel: "noopener noreferrer", target: target || ANCHOR_TARGET.BLANK },
+        React.createElement(Button, { href: "passHref", rel: REL_ATTRIBUTE.NO_OPENER, target: target || ANCHOR_TARGET.SELF },
+            React.createElement(HelpIcon, { fontSize: size })))) : (React.createElement(Button, { href: url, rel: REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target: target || ANCHOR_TARGET.BLANK },
         React.createElement(HelpIcon, { fontSize: size })));
 };

package/lib/components/common/Card/components/CardActionArea/cardActionArea.js

@@ -1,7 +1,7 @@
 import { CardActionArea as MCardActionArea } from "@mui/material";
 import { useRouter } from "next/router";
 import React from "react";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../Links/common/utils";
 export const CardActionArea = ({ cardUrl, children, }) => {
     const { push } = useRouter();
@@ -13,7 +13,7 @@ export const CardActionArea = ({ cardUrl, children, }) => {
                 push(url);
             }
             else {
-                window.open(url, ANCHOR_TARGET.BLANK, "noopener noreferrer");
+                window.open(url, ANCHOR_TARGET.BLANK, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
             }
         }
     };

package/lib/components/common/IconButton/iconButton.styles.d.ts

@@ -32,19 +32,4 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Props, {}, {}>;
-export declare const IconButtonPrimary: import("@emotion/styled").StyledComponent<import("./iconButton").IconButtonProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const IconButtonSecondary: import("@emotion/styled").StyledComponent<import("./iconButton").IconButtonProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const MockIconButtonPrimary: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const CloseDrawerIconButton: import("@emotion/styled").StyledComponent<import("./iconButton").IconButtonProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const IconButtonSocials: import("@mui/material").ExtendButtonBase<import("@mui/material").IconButtonTypeMap<{}, "button">>;
-export declare const IconButtonSocialsFooter: import("@mui/material").ExtendButtonBase<import("@mui/material").IconButtonTypeMap<{}, "button">>;
 export {};