@databiosphere/findable-ui 8.0.1 → 8.0.3

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.js

@@ -1,6 +1,7 @@
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import { IconButton, Toolbar as MToolbar } from "@mui/material";
 import React, { Fragment } from "react";
+import { Left, Right } from "../../../../../../../../header.styles";
 import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
 import { Authentication } from "../../../Authentication/authentication";
@@ -9,11 +10,12 @@ export const Toolbar = ({ actions, announcements, authenticationEnabled, logo, o
     return (React.createElement(Fragment, null,
         React.createElement(Announcements, { announcements: announcements }),
         React.createElement(MToolbar, null,
-            logo,
-            React.createElement(Actions, null,
-                React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
-                React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
-                actions,
-                React.createElement(IconButton, { color: "ink", onClick: onClose },
-                    React.createElement(CloseRoundedIcon, null))))));
+            React.createElement(Left, null, logo),
+            React.createElement(Right, null,
+                React.createElement(Actions, null,
+                    React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
+                    React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+                    actions,
+                    React.createElement(IconButton, { color: "ink", onClick: onClose },
+                        React.createElement(CloseRoundedIcon, null)))))));
 };

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.js

@@ -1,10 +1,7 @@
-import Link from "next/link";
 import React from "react";
 import { StaticImage, } from "../../../../../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
-import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { StyledLink } from "./logo.styles";
 export const Logo = ({ alt, className, height, link, src, target = ANCHOR_TARGET.SELF, width, }) => {
-    const logo = (React.createElement(StaticImage, { alt: alt, height: height, src: src, width: width }));
-    return isClientSideNavigation(link) ? (React.createElement(Link, { href: link, legacyBehavior: true, passHref: true },
-        React.createElement("a", { className: className, href: "passHref", rel: "noopener", target: target }, logo))) : (React.createElement("a", { className: className, href: link, rel: "noopener noreferrer", target: target }, logo));
+    return (React.createElement(StyledLink, { className: className, label: React.createElement(StaticImage, { alt: alt, height: height, src: src, width: width }), target: target, url: link }));
 };

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledLink: import("@emotion/styled").StyledComponent<import("../../../../../../../Links/components/Link/link").LinkProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.styles.js

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

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

@@ -0,0 +1,7 @@
+/**
+ * Returns true if the navigation link is selected.
+ * @param url - The URL of the navigation link.
+ * @param pathname - The current pathname.
+ * @returns true if the navigation link is selected.
+ */
+export declare function isNavigationLinkSelected(url: string, pathname?: string): boolean;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/common/utils.js

@@ -0,0 +1,11 @@
+/**
+ * Returns true if the navigation link is selected.
+ * @param url - The URL of the navigation link.
+ * @param pathname - The current pathname.
+ * @returns true if the navigation link is selected.
+ */
+export function isNavigationLinkSelected(url, pathname) {
+    if (!pathname)
+        return false;
+    return pathname.startsWith(url);
+}

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

@@ -4,6 +4,7 @@ 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 { isClientSideNavigation } from "../../../../../../../../../Links/common/utils";
+import { isNavigationLinkSelected } from "../../common/utils";
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
 export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
     const router = useRouter();
@@ -13,7 +14,7 @@ export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
                 isClientSideNavigation(url)
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
-            }, selected: url === pathname },
+            }, selected: isNavigationLinkSelected(url, pathname) },
             icon && React.createElement(ListItemIcon, null, icon),
             React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
                     variant: description ? TEXT_BODY_500 : TEXT_BODY_400,

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

@@ -4,6 +4,7 @@ import React, { forwardRef, Fragment } from "react";
 import { useBreakpoint } from "../../../../../../../../hooks/useBreakpoint";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { isNavigationLinkSelected } from "./common/utils";
 import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
 import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
 import { Navigation as Links } from "./navigation.styles";
@@ -18,6 +19,8 @@ export const Navigation = forwardRef(function Navigation({ className, closeAnces
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
                 closeAncestor?.();
-            }, variant: url === pathname ? "activeNav" : "nav" }, label),
+            }, variant: isNavigationLinkSelected(url, pathname)
+                ? "activeNav"
+                : "nav" }, 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.js

@@ -22,7 +22,7 @@ export const Header = ({ ...headerProps }) => {
     const { isIn } = useHeaderVisibility(headerProps);
     const { headerRef } = useMeasureHeader();
     const { onClose, onOpen, open } = useMenu();
-    const pathname = usePathname();
+    const pathname = usePathname() ?? "";
     const { actions, announcements, authenticationEnabled, className, logo, navigation: [navItemsL, navItemsC, navItemsR] = [], searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
     const navigationProps = { headerProps, pathname };
     return (React.createElement(AppBar, { ...APP_BAR_PROPS, ref: headerRef, className: className },

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,11 @@ export const Left = styled.div `
 `;
 export const Center = styled.div `
   ${group};
+  grid-area: center;
   justify-content: center;
 `;
 export const Right = styled.div `
   ${group};
+  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/package.json

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

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx

@@ -2,6 +2,7 @@ import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import { IconButton, Toolbar as MToolbar } from "@mui/material";
 import React, { Fragment, ReactNode } from "react";
 import { ComponentsConfig } from "../../../../../../../../../../../../config/entities";
+import { Left, Right } from "../../../../../../../../header.styles";
 import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
 import { Authentication } from "../../../Authentication/authentication";
@@ -30,26 +31,28 @@ export const Toolbar = ({
     <Fragment>
       <Announcements announcements={announcements} />
       <MToolbar>
-        {logo}
-        <Actions>
-          {/* Search */}
-          <Search
-            closeMenu={onClose}
-            searchEnabled={searchEnabled}
-            searchURL={searchURL}
-          />
-          {/* Authentication */}
-          <Authentication
-            authenticationEnabled={authenticationEnabled}
-            closeMenu={onClose}
-          />
-          {/* Additional actions i.e. call-to-action button */}
-          {actions}
-          {/* Close menu */}
-          <IconButton color="ink" onClick={onClose}>
-            <CloseRoundedIcon />
-          </IconButton>
-        </Actions>
+        <Left>{logo}</Left>
+        <Right>
+          <Actions>
+            {/* Search */}
+            <Search
+              closeMenu={onClose}
+              searchEnabled={searchEnabled}
+              searchURL={searchURL}
+            />
+            {/* Authentication */}
+            <Authentication
+              authenticationEnabled={authenticationEnabled}
+              closeMenu={onClose}
+            />
+            {/* Additional actions i.e. call-to-action button */}
+            {actions}
+            {/* Close menu */}
+            <IconButton color="ink" onClick={onClose}>
+              <CloseRoundedIcon />
+            </IconButton>
+          </Actions>
+        </Right>
       </MToolbar>
     </Fragment>
   );

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

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { Link } from "../../../../../../../Links/components/Link/link";
+
+export const StyledLink = styled(Link)`
+  &.MuiLink-root {
+    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,13 @@
+/**
+ * Returns true if the navigation link is selected.
+ * @param url - The URL of the navigation link.
+ * @param pathname - The current pathname.
+ * @returns true if the navigation link is selected.
+ */
+export function isNavigationLinkSelected(
+  url: string,
+  pathname?: string
+): boolean {
+  if (!pathname) return false;
+  return pathname.startsWith(url);
+}

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

@@ -13,6 +13,7 @@ import {
 } from "../../../../../../../../../../theme/common/typography";
 import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../../../Links/common/utils";
+import { isNavigationLinkSelected } from "../../common/utils";
 import { NavLinkItem } from "../../navigation";
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
 
@@ -66,7 +67,7 @@ export const NavigationMenuItems = ({
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
                 }}
-                selected={url === pathname}
+                selected={isNavigationLinkSelected(url, pathname)}
               >
                 {icon && <ListItemIcon>{icon}</ListItemIcon>}
                 <ListItemText

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

@@ -6,6 +6,7 @@ import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
 import { HeaderProps } from "../../../../header";
+import { isNavigationLinkSelected } from "./common/utils";
 import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
 import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
 import { MenuItem } from "./components/NavigationMenuItems/navigationMenuItems";
@@ -80,7 +81,11 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                       : window.open(url, target, "noopener noreferrer");
                     closeAncestor?.();
                   }}
-                  variant={url === pathname ? "activeNav" : "nav"}
+                  variant={
+                    isNavigationLinkSelected(url, pathname)
+                      ? "activeNav"
+                      : "nav"
+                  }
                 >
                   {label}
                 </Button>

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;
 `;

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

@@ -11,7 +11,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;
   }
@@ -26,6 +29,7 @@ const group = css`
 export const Left = styled.div`
   ${group};
   gap: 16px;
+  grid-area: left;
   justify-content: flex-start;
 
   .MuiButton-navPrimary {
@@ -37,10 +41,12 @@ export const Left = styled.div`
 
 export const Center = styled.div`
   ${group};
+  grid-area: center;
   justify-content: center;
 `;
 
 export const Right = styled.div`
   ${group};
+  grid-area: right;
   justify-content: flex-end;
 `;

package/src/components/Layout/components/Header/header.tsx

@@ -42,7 +42,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
   const { isIn } = useHeaderVisibility(headerProps);
   const { headerRef } = useMeasureHeader();
   const { onClose, onOpen, open } = useMenu();
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const {
     actions,
     announcements,

package/src/components/Layout/components/Nav/nav.styles.ts

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