@databiosphere/findable-ui 8.0.2 → 9.0.0

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/constants.ts

@@ -0,0 +1,4 @@
+export const SEARCH_PARAMETERS = {
+  CATEGORY: "category",
+  QUERY: "q",
+};

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/utils.ts

@@ -0,0 +1,17 @@
+import { ReadonlyURLSearchParams } from "next/navigation";
+import { SEARCH_PARAMETERS } from "./constants";
+
+/**
+ * Return the search params, for the given search string.
+ * @param searchParams - Current search params.
+ * @param searchStr - Search string.
+ * @returns updated search params.
+ */
+export function getSearchParams(
+  searchParams: ReadonlyURLSearchParams,
+  searchStr: string
+): URLSearchParams {
+  const params = new URLSearchParams(searchParams.toString());
+  params.set(SEARCH_PARAMETERS.QUERY, searchStr);
+  return params;
+}

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.ts

@@ -1,5 +1,9 @@
 import styled from "@emotion/styled";
 import { Dialog, Input } from "@mui/material";
+import {
+  inkLight,
+  smokeMain,
+} from "../../../../../../../../../../../../styles/common/mixins/colors";
 import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
 import { HEADER_HEIGHT } from "../../../../../../../../common/constants";
 
@@ -22,16 +26,16 @@ export const SearchForm = styled.form`
 `;
 
 export const SearchInput = styled(Input)`
-  border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
+  border-bottom: 1px solid ${smokeMain};
   height: 40px;
   padding: 0;
 
   &&.Mui-focused ::placeholder {
-    color: ${({ theme }) => theme.palette.ink.light};
+    color: ${inkLight};
     opacity: 1;
   }
 `;
 
 export const ClearButton = styled(IconButton)`
-  color: ${({ theme }) => theme.palette.ink.light};
+  color: ${inkLight};
 ` as typeof IconButton;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.tsx

@@ -1,7 +1,18 @@
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import React, { ChangeEvent, FormEvent, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import Router from "next/router";
+import React, {
+  ChangeEvent,
+  FormEvent,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+import { isValidUrl } from "../../../../../../../../../../../../common/utils";
 import { ButtonPrimary } from "../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { isClientSideNavigation } from "../../../../../../../../../../../Links/common/utils";
+import { getSearchParams } from "./common/utils";
 import {
   ClearButton,
   SearchBar as SearchDialog,
@@ -23,6 +34,7 @@ export default function SearchBar({
   searchURL,
 }: Props): JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null);
+  const searchParams = useSearchParams();
   const [searchTerm, setSearchTerm] = useState<string>("");
 
   /**
@@ -58,21 +70,34 @@ export default function SearchBar({
    * @param searchStr - Current search string.
    * @param url - Current configured search path.
    */
-  const handleSubmit = (
-    formEvent: FormEvent<HTMLFormElement>,
-    searchStr: string,
-    url?: string
-  ): void => {
-    formEvent.preventDefault();
-    if (searchStr && url) {
-      closeMenu();
-      closeSearch();
-      // Build search URL and redirect to it.
-      const location = new URL(url);
-      location.searchParams.set("q", searchStr);
-      window.location.href = location.href;
-    }
-  };
+  const handleSubmit = useCallback(
+    (
+      formEvent: FormEvent<HTMLFormElement>,
+      searchStr: string,
+      url?: string
+    ): void => {
+      formEvent.preventDefault();
+      if (searchStr && url) {
+        closeMenu();
+        closeSearch();
+        if (isClientSideNavigation(url)) {
+          Router.push({
+            pathname: url,
+            search: getSearchParams(searchParams, searchStr).toString(),
+          });
+          return;
+        }
+        if (isValidUrl(url)) {
+          // Build search URL and redirect to it.
+          const location = new URL(url);
+          location.search = getSearchParams(searchParams, searchStr).toString();
+          window.location.href = location.href;
+        }
+        throw new Error("Invalid search URL.");
+      }
+    },
+    [closeMenu, closeSearch, searchParams]
+  );
 
   return (
     <SearchDialog

package/src/components/Layout/components/Header/components/Content/components/Logo/logo.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { Link } from "../../../../../../../Links/components/Link/link";
+
+export const StyledLink = styled(Link)`
+  &.MuiLink-root {
+    flex: none;
+    text-decoration: none !important;
+    img {
+      margin: 0;
+    }
+  }
+`;

package/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx

@@ -1,11 +1,10 @@
-import Link from "next/link";
 import React from "react";
 import {
   ImageSrc,
   StaticImage,
 } from "../../../../../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
-import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { StyledLink } from "./logo.styles";
 
 export interface LogoProps {
   alt: string;
@@ -26,23 +25,12 @@ export const Logo = ({
   target = ANCHOR_TARGET.SELF,
   width,
 }: LogoProps): JSX.Element => {
-  const logo = (
-    <StaticImage alt={alt} height={height} src={src} width={width} />
-  );
-  return isClientSideNavigation(link) ? (
-    <Link href={link} legacyBehavior passHref>
-      <a className={className} href="passHref" rel="noopener" target={target}>
-        {logo}
-      </a>
-    </Link>
-  ) : (
-    <a
+  return (
+    <StyledLink
       className={className}
-      href={link}
-      rel="noopener noreferrer"
+      label={<StaticImage alt={alt} height={height} src={src} width={width} />}
       target={target}
-    >
-      {logo}
-    </a>
+      url={link}
+    />
   );
 };

package/src/components/Layout/components/Header/components/Content/components/Navigation/common/utils.ts

@@ -0,0 +1,27 @@
+import { SELECTED_MATCH } from "../../../../../common/entities";
+
+/**
+ * Returns true if the navigation link is selected.
+ * @param url - The URL of the navigation link.
+ * @param pathname - The current pathname.
+ * @param selectedMatch - The selected match type.
+ * @returns true if the navigation link is selected.
+ */
+export function isNavigationLinkSelected(
+  url: string,
+  pathname?: string,
+  selectedMatch: SELECTED_MATCH = SELECTED_MATCH.STARTS_WITH
+): boolean {
+  if (!pathname) return false;
+  if (isSelectedMatchEqual(selectedMatch)) return url === pathname;
+  return pathname.startsWith(url);
+}
+
+/**
+ * Returns true if the selected match type is "EQUAL".
+ * @param selectedMatch - The selected match type.
+ * @returns True if the selected match type is "EQUAL".
+ */
+export function isSelectedMatchEqual(selectedMatch: SELECTED_MATCH): boolean {
+  return selectedMatch === SELECTED_MATCH.EQUALS;
+}

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,10 +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 {
@@ -43,6 +49,7 @@ export const NavigationMenuItems = ({
             icon,
             label,
             menuItems: nestedMenuItems,
+            selectedMatch,
             target = ANCHOR_TARGET.SELF,
             url,
           },
@@ -51,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}
@@ -60,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={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,9 +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";
@@ -16,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>>;
@@ -48,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 ? (
@@ -74,15 +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={url === pathname ? "activeNav" : "nav"}
+                  variant={
+                    isNavigationLinkSelected(url, pathname, selectedMatch)
+                      ? "activeNav"
+                      : "nav"
+                  }
                 >
-                  {label}
+                  <NavigationButtonLabel label={label} />
                 </Button>
                 {divider && <Divider />}
               </Fragment>

package/src/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.ts

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