@databiosphere/findable-ui 8.0.3 → 9.0.0

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,23 +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: isNavigationLinkSelected(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,25 +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: isNavigationLinkSelected(url, pathname)
+                    : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
+            }, variant: isNavigationLinkSelected(url, pathname, selectedMatch)
                 ? "activeNav"
-                : "nav" }, label),
+                : "nav" },
+            React.createElement(NavigationButtonLabel, { label: label })),
         divider && React.createElement(Divider, null))))));
 });

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

@@ -42,6 +42,7 @@ export const Center = styled.div `
 `;
 export const Right = styled.div `
   ${group};
+  gap: 8px;
   grid-area: right;
   justify-content: flex-end;
 `;

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

package/lib/components/common/IconButton/iconButton.styles.js

@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButton as MIconButton } from "@mui/material";
 import { smokeLightest } from "../../../styles/common/mixins/colors";
-import { IconButton } from "./iconButton";
 export const Button = styled(MIconButton, {
     shouldForwardProp: (prop) => prop !== "open",
 }) `
@@ -13,84 +12,3 @@ export const Button = styled(MIconButton, {
       }
     `}
 `;
-// Primary icon button.
-export const IconButtonPrimary = styled(IconButton) `
-  background-color: ${({ theme }) => theme.palette.primary.main};
-  box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.primary.dark};
-  color: ${({ theme }) => theme.palette.common.white};
-
-  // Medium sized primary icon button.
-  &.MuiIconButton-sizeMedium {
-    padding: 6px 8px; // Overrides medium sized button theme top and bottom padding.
-  }
-
-  &:active,
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.primary.dark};
-  }
-
-  &:active {
-    box-shadow: none;
-  }
-
-  &.Mui-disabled {
-    background-color: ${({ theme }) => theme.palette.primary.main};
-    color: ${({ theme }) => theme.palette.common.white};
-    opacity: 0.5;
-  }
-`;
-// Secondary icon button.
-export const IconButtonSecondary = styled(IconButton) `
-  background-color: ${({ theme }) => theme.palette.common.white};
-  box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.smoke.dark},
-  0px 1px 0px 0px rgba(0, 0, 0, 0.08);
-  color: ${({ theme }) => theme.palette.ink.main};
-
-  &:active, &:hover {
-    background-color: ${({ theme }) => theme.palette.smoke.lightest};
-  }
-
-  &:active {
-    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.smoke.dark};
-  }
-
-  &:disabled {
-    color: inherit;
-    opacity: 0.5;
-  }
-}
-`;
-// Mock icon button.
-export const MockIconButtonPrimary = styled.span `
-  background-color: ${({ theme }) => theme.palette.primary.main};
-  border-radius: 4px;
-  box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.primary.dark};
-  color: ${({ theme }) => theme.palette.common.white};
-  display: flex;
-  flex: none;
-  height: 32px;
-  padding: 6px 8px;
-`;
-// Drawer backdrop close icon button.
-export const CloseDrawerIconButton = styled(IconButton) `
-  color: ${({ theme }) => theme.palette.common.white};
-  left: calc(100% + 4px);
-  position: absolute;
-  top: 4px;
-`;
-// Socials icon button.
-export const IconButtonSocials = styled(MIconButton) `
-  color: ${({ theme }) => theme.palette.ink.light};
-
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.smoke.light};
-  }
-`;
-// Socials icon button - footer component.
-export const IconButtonSocialsFooter = styled(MIconButton) `
-  color: ${({ theme }) => theme.palette.ink.light};
-
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.smoke.main};
-  }
-`;

package/lib/components/common/Socials/socials.d.ts

@@ -8,7 +8,7 @@ export interface Social {
 export interface SocialsProps {
     buttonSize?: MIconButtonProps["size"];
     className?: string;
-    IconButtonElType?: ElementType;
+    IconButton?: ElementType;
     socials: Social[];
     style?: CSSProperties;
 }

package/lib/components/common/Socials/socials.js

@@ -1,8 +1,7 @@
 import React, { forwardRef, } from "react";
-import { ANCHOR_TARGET } from "../../Links/common/entities";
-import { IconButtonSocials } from "../IconButton/iconButton.styles";
-import { Socials as IconButtons } from "./socials.styles";
-export const Socials = forwardRef(function Socials({ buttonSize = "medium", className, IconButtonElType = IconButtonSocials, socials, style, }, ref) {
-    return (React.createElement(IconButtons, { className: className, ref: ref, style: style }, socials.map(({ Icon, url }, i) => (React.createElement(IconButtonElType, { key: i, href: url, rel: "noopener noreferrer", size: buttonSize, target: ANCHOR_TARGET.BLANK },
+import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../Links/common/entities";
+import { IconButton as StyledIconButton, Socials as StyledSocials, } from "./socials.styles";
+export const Socials = forwardRef(function Socials({ buttonSize = "medium", className, IconButton = StyledIconButton, socials, style, }, ref) {
+    return (React.createElement(StyledSocials, { className: className, ref: ref, style: style }, socials.map(({ Icon, url }, i) => (React.createElement(IconButton, { key: i, href: url, rel: REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, size: buttonSize, target: ANCHOR_TARGET.BLANK },
         React.createElement(Icon, { fontSize: "small" }))))));
 });

package/lib/components/common/Socials/socials.styles.d.ts

@@ -3,3 +3,4 @@ export declare const Socials: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconButton: import("@mui/material").ExtendButtonBase<import("@mui/material").IconButtonTypeMap<{}, "button">>;