@databiosphere/findable-ui 8.0.3 → 9.0.0

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationButtonLabel/navigationButtonLabel.tsx

@@ -0,0 +1,22 @@
+import { Typography } from "@mui/material";
+import React, { Fragment, ReactNode } from "react";
+
+export interface NavigationButtonLabelProps {
+  label: ReactNode;
+}
+
+export const NavigationButtonLabel = ({
+  label,
+}: NavigationButtonLabelProps): JSX.Element => {
+  return (
+    <Fragment>
+      {typeof label === "string" ? (
+        <Typography component="span" noWrap>
+          {label}
+        </Typography>
+      ) : (
+        label
+      )}
+    </Fragment>
+  );
+};

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.styles.ts

@@ -1,7 +1,33 @@
 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;
@@ -9,7 +35,6 @@ export const Content = styled.div`
 `;
 
 export const Button = styled(DXButton)`
-  ${textHeadingSmall};
   gap: 8px;
   justify-content: flex-start;
   padding: 12px 24px;

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.tsx

@@ -1,5 +1,4 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
-import { Dialog as MDialog } from "@mui/material";
 import React, { ReactNode, useState } from "react";
 import { Button } from "../../../../../../../../../common/Button/button";
 import { BackArrowIcon } from "../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon";
@@ -9,7 +8,11 @@ import { DrawerNavigation as Navigation } from "../../../Actions/components/Menu
 import { Toolbar } from "../../../Actions/components/Menu/components/Toolbar/toolbar";
 import { MenuItem } from "../NavigationMenuItems/navigationMenuItems";
 import { Slide } from "./components/Slide/slide";
-import { Button as BackButton, Content } from "./navigationDrawer.styles";
+import {
+  Button as BackButton,
+  Content,
+  Dialog,
+} from "./navigationDrawer.styles";
 
 export interface NavigationDrawerProps {
   closeAncestor?: () => void;
@@ -46,7 +49,7 @@ export const NavigationDrawer = ({
       >
         {menuLabel}
       </Button>
-      <MDialog
+      <Dialog
         disableScrollLock
         fullScreen
         hideBackdrop
@@ -65,7 +68,7 @@ export const NavigationDrawer = ({
             fullWidth
             onClick={closeDrawer}
             StartIcon={BackArrowIcon}
-            variant="nav"
+            variant="backNav"
           >
             {menuLabel}
           </BackButton>
@@ -76,7 +79,7 @@ export const NavigationDrawer = ({
             pathname={pathname}
           />
         </Content>
-      </MDialog>
+      </Dialog>
     </>
   );
 };

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

@@ -0,0 +1,23 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+
+export const MENU_ANCHOR_ORIGIN_LEFT_BOTTOM: MMenuProps["anchorOrigin"] = {
+  horizontal: "left",
+  vertical: "bottom",
+};
+
+export const MENU_ANCHOR_ORIGIN_RIGHT_TOP: MMenuProps["anchorOrigin"] = {
+  horizontal: "right",
+  vertical: "top",
+};
+
+export const MENU_PROPS: Partial<MMenuProps> = {
+  slotProps: {
+    paper: {
+      variant: "menu",
+    },
+  },
+  transformOrigin: {
+    horizontal: "left",
+    vertical: "top",
+  },
+};

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

@@ -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,
@@ -33,11 +33,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 {
@@ -46,6 +48,11 @@ export const Menu = styled(MMenu)`
         }
       }
 
+      &.Mui-disabled {
+        color: ${inkLight};
+        opacity: 1;
+      }
+
       &.Mui-selected {
         background-color: ${smokeLight};
       }
@@ -67,6 +74,11 @@ export const Menu = styled(MMenu)`
       margin: 8px 0;
     }
   }
+
+  .MuiPopover-root {
+    cursor: default;
+    z-index: -1;
+  }
 `;
 
 export const Button = styled(DXButton, {
@@ -79,3 +91,7 @@ export const Button = styled(DXButton, {
       background-color: ${smokeLight(props)};
     `};
 `;
+
+export const StyledMenuItem = styled(MMenuItem)`
+  padding: 0;
+`;

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -1,65 +1,67 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import { MenuProps as MMenuProps } from "@mui/material";
-import React, { MouseEvent, ReactNode, useState } from "react";
+import React, { Fragment, ReactNode } from "react";
 import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
+import { useMenuWithPosition } from "../../../../../../../../../../hooks/useMenuWithPosition";
+import { NavigationButtonLabel } from "../NavigationButtonLabel/navigationButtonLabel";
 import {
   MenuItem,
   NavigationMenuItems,
 } from "../NavigationMenuItems/navigationMenuItems";
-import { Button, Menu } from "./navigationMenu.styles";
+import { MENU_ANCHOR_ORIGIN_LEFT_BOTTOM, MENU_PROPS } from "./common/constants";
+import { Button, Menu, StyledMenuItem } from "./navigationMenu.styles";
 
 export interface NavLinkMenuProps {
   anchorOrigin?: MMenuProps["anchorOrigin"];
   closeAncestor?: () => void;
+  disablePortal?: boolean;
   menuItems: MenuItem[];
   menuLabel: ReactNode;
   pathname?: string;
 }
 
 export const NavigationMenu = ({
-  anchorOrigin = { horizontal: "left", vertical: "bottom" },
+  anchorOrigin = MENU_ANCHOR_ORIGIN_LEFT_BOTTOM,
   closeAncestor,
+  disablePortal,
   menuItems,
   menuLabel,
   pathname,
 }: NavLinkMenuProps): JSX.Element => {
   const { mdUp } = useBreakpoint();
-  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
-  const open = Boolean(anchorEl);
-  const openMenu = (event: MouseEvent<HTMLButtonElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-  const closeMenu = (): void => {
-    closeAncestor?.();
-    setAnchorEl(null);
-  };
+  const { anchorEl, onClose, onToggleOpen, open } = useMenuWithPosition();
+  const MenuItem = disablePortal ? StyledMenuItem : Fragment;
+  const menuItemProps = disablePortal ? { onMouseLeave: onClose } : {};
   return (
-    <>
+    <MenuItem {...menuItemProps}>
       <Button
         EndIcon={ArrowDropDownRoundedIcon}
         isActive={open}
-        onClick={openMenu}
+        onClick={onToggleOpen}
         variant="nav"
       >
-        {menuLabel}
+        <NavigationButtonLabel label={menuLabel} />
       </Button>
       <Menu
+        {...MENU_PROPS}
         anchorEl={anchorEl}
         anchorOrigin={anchorOrigin}
-        onClose={closeMenu}
-        open={mdUp && open}
-        slotProps={{ paper: { variant: "menu" } }}
-        transformOrigin={{
-          horizontal: "left",
-          vertical: "top",
+        disablePortal={disablePortal}
+        onClose={(): void => {
+          onClose();
+          closeAncestor?.();
         }}
+        open={mdUp && open}
       >
         <NavigationMenuItems
-          closeMenu={closeMenu}
+          closeMenu={(): void => {
+            onClose();
+            closeAncestor?.();
+          }}
           menuItems={menuItems}
           pathname={pathname}
         />
       </Menu>
-    </>
+    </MenuItem>
   );
 };

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.tsx

@@ -10,11 +10,16 @@ import {
   TEXT_BODY_400,
   TEXT_BODY_500,
   TEXT_BODY_SMALL_400_2_LINES,
+  TEXT_UPPERCASE_500,
 } from "../../../../../../../../../../theme/common/typography";
-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 { NavLinkItem } from "../../navigation";
+import { MENU_ANCHOR_ORIGIN_RIGHT_TOP } from "../NavigationMenu/common/constants";
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
 
 export interface MenuItem extends NavLinkItem {
@@ -44,6 +49,7 @@ export const NavigationMenuItems = ({
             icon,
             label,
             menuItems: nestedMenuItems,
+            selectedMatch,
             target = ANCHOR_TARGET.SELF,
             url,
           },
@@ -52,8 +58,9 @@ export const NavigationMenuItems = ({
           nestedMenuItems ? (
             <NavigationMenu
               key={i}
-              anchorOrigin={{ horizontal: "right", vertical: "top" }}
+              anchorOrigin={MENU_ANCHOR_ORIGIN_RIGHT_TOP}
               closeAncestor={closeMenu}
+              disablePortal
               menuItems={nestedMenuItems}
               menuLabel={label}
               pathname={pathname}
@@ -61,19 +68,32 @@ export const NavigationMenuItems = ({
           ) : (
             <Fragment key={i}>
               <MMenuItem
+                disabled={!url}
                 onClick={(): void => {
                   closeMenu();
                   isClientSideNavigation(url)
                     ? router.push(url)
-                    : window.open(url, target, "noopener noreferrer");
+                    : window.open(
+                        url,
+                        target,
+                        REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+                      );
                 }}
-                selected={isNavigationLinkSelected(url, pathname)}
+                selected={isNavigationLinkSelected(
+                  url,
+                  pathname,
+                  selectedMatch
+                )}
               >
                 {icon && <ListItemIcon>{icon}</ListItemIcon>}
                 <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={{

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.tsx

@@ -3,10 +3,15 @@ import { useRouter } from "next/router";
 import React, { CSSProperties, forwardRef, Fragment, ReactNode } from "react";
 import { useBreakpoint } from "../../../../../../../../hooks/useBreakpoint";
 import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
-import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { SELECTED_MATCH } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { isNavigationLinkSelected } from "./common/utils";
+import { NavigationButtonLabel } from "./components/NavigationButtonLabel/navigationButtonLabel";
 import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
 import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
 import { MenuItem } from "./components/NavigationMenuItems/navigationMenuItems";
@@ -17,6 +22,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>>;
@@ -49,7 +55,14 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
       <Links ref={ref} className={className} style={style}>
         {links.map(
           (
-            { divider, label, menuItems, target = ANCHOR_TARGET.SELF, url },
+            {
+              divider,
+              label,
+              menuItems,
+              selectedMatch,
+              target = ANCHOR_TARGET.SELF,
+              url,
+            },
             i
           ) =>
             menuItems ? (
@@ -75,19 +88,24 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
             ) : (
               <Fragment key={i}>
                 <Button
+                  disabled={!url}
                   onClick={(): void => {
+                    closeAncestor?.();
                     isClientSideNavigation(url)
                       ? router.push(url)
-                      : window.open(url, target, "noopener noreferrer");
-                    closeAncestor?.();
+                      : window.open(
+                          url,
+                          target,
+                          REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+                        );
                   }}
                   variant={
-                    isNavigationLinkSelected(url, pathname)
+                    isNavigationLinkSelected(url, pathname, selectedMatch)
                       ? "activeNav"
                       : "nav"
                   }
                 >
-                  {label}
+                  <NavigationButtonLabel label={label} />
                 </Button>
                 {divider && <Divider />}
               </Fragment>

package/src/components/Layout/components/Header/header.styles.ts

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

package/src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.styles.ts

@@ -1,7 +1,11 @@
 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 {
@@ -17,3 +21,10 @@ export const TemporarySidebar = styled(MPopover)`
     }
   }
 `;
+
+export const IconButton = styled(DXIconButton)`
+  color: ${white};
+  left: calc(100% + 4px);
+  position: absolute;
+  top: 4px;
+`;

package/src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.tsx

@@ -1,9 +1,8 @@
 import { CloseRounded } from "@mui/icons-material";
 import { PopoverPosition, PopoverProps } from "@mui/material";
 import React, { ReactNode } 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: PopoverPosition = { left: 0, top: 0 };
 const DRAWER_SLOT_PROPS: PopoverProps["slotProps"] = {
@@ -34,11 +33,7 @@ export const SidebarDrawer = ({
       TransitionComponent={DrawerTransition}
       transitionDuration={drawerOpen ? 250 : 300}
     >
-      <CloseDrawerIconButton
-        Icon={CloseRounded}
-        onClick={onDrawerClose}
-        size="medium"
-      />
+      <IconButton Icon={CloseRounded} onClick={onDrawerClose} size="medium" />
       {children}
     </TemporarySidebar>
   );

package/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.ts

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

package/src/components/Layout/components/Sidebar/sidebar.styles.ts

@@ -1,8 +1,9 @@
 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/src/components/Links/common/entities.ts

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

package/src/components/Links/common/utils.ts

@@ -7,7 +7,7 @@ import { Url, UrlObjectWithHrefAndQuery } from "./entities";
  * @returns true if the given link is an internal link.
  */
 export function isClientSideNavigation(link: string): boolean {
-  return /^\/(?!\/)/.test(link);
+  return /^\/(?!\/)|^#/.test(link);
 }
 
 /**

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../../../../../providers/exploreState";
 import {
   ANCHOR_TARGET,
+  REL_ATTRIBUTE,
   UrlObjectWithHrefAndQuery,
 } from "../../../../common/entities";
 import { LinkProps } from "../../link";
@@ -51,7 +52,7 @@ export const ExploreViewLink = ({
       className={className}
       href={url.href}
       onClick={onNavigate}
-      rel="noopener"
+      rel={REL_ATTRIBUTE.NO_OPENER}
       target={target}
     >
       {label}

package/src/components/Links/components/Link/link.tsx

@@ -8,7 +8,7 @@ import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
 import { TypographyProps } from "../../../common/Typography/common/entities";
-import { ANCHOR_TARGET, Url } from "../../common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, Url } from "../../common/entities";
 import {
   isClientSideNavigation,
   isURLObjectWithHrefAndQuery,
@@ -36,6 +36,7 @@ export const Link = ({
   target,
   TypographyProps,
   url,
+  ...props /* Spread props to allow for specific MuiLink prop overrides. */
 }: LinkProps): JSX.Element => {
   if (isURLObjectWithHrefAndQuery(url)) {
     /* Internal navigation - explore link */
@@ -57,11 +58,12 @@ export const Link = ({
           <NLink href={url} legacyBehavior passHref>
             <MLink
               className={className}
-              rel="noopener"
+              rel={REL_ATTRIBUTE.NO_OPENER}
               noWrap={noWrap}
               target={target || ANCHOR_TARGET.SELF}
               onClick={onClick}
               {...TypographyProps}
+              {...props}
             >
               {label}
             </MLink>
@@ -79,9 +81,10 @@ export const Link = ({
             href={url}
             noWrap={noWrap}
             onClick={onClick}
-            rel="noopener noreferrer"
+            rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
             target={target || ANCHOR_TARGET.BLANK}
             {...TypographyProps}
+            {...props}
           >
             {label}
           </MLink>
@@ -92,7 +95,12 @@ export const Link = ({
   }
   /* Invalid URL */
   return (
-    <MTypography component="span" variant="inherit" {...TypographyProps}>
+    <MTypography
+      component="span"
+      variant="inherit"
+      {...TypographyProps}
+      {...props}
+    >
       {label}
     </MTypography>
   );

package/src/components/Table/components/Pagination/pagination.tsx

@@ -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";
 
@@ -32,12 +32,14 @@ export const Pagination = ({
         </Typography>
       </div>
       <Stack direction="row" gap={2}>
-        <IconButtonSecondary
+        <IconButton
+          color="secondary"
           disabled={!canPreviousPage}
           Icon={WestRoundedIcon}
           onClick={onPreviousPage}
         />
-        <IconButtonSecondary
+        <IconButton
+          color="secondary"
           disabled={!canNextPage}
           Icon={EastRoundedIcon}
           onClick={onNextPage}

package/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx

@@ -1,6 +1,9 @@
 import NLink from "next/link";
 import React, { ElementType } 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";
 
@@ -31,7 +34,7 @@ export const CallToActionButton = ({
         className={className}
         disabled={disabled}
         href="passHref"
-        rel="noopener"
+        rel={REL_ATTRIBUTE.NO_OPENER}
         target={target || ANCHOR_TARGET.SELF}
       >
         {label}
@@ -42,7 +45,7 @@ export const CallToActionButton = ({
       className={className}
       disabled={disabled}
       href={url}
-      rel="noopener noreferrer"
+      rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
       target={target || ANCHOR_TARGET.BLANK}
     >
       {label}