@databiosphere/findable-ui 8.0.2 → 9.0.0

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

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

@@ -1,4 +1,13 @@
 import styled from "@emotion/styled";
+import { IconButton as MIconButton } from "@mui/material";
+import { inkLight, smokeLight } from "../../../styles/common/mixins/colors";
 export const Socials = styled.div `
   display: flex;
 `;
+export const IconButton = styled(MIconButton) `
+  color: ${inkLight};
+
+  &:hover {
+    background-color: ${smokeLight};
+  }
+`;

package/lib/hooks/useMenuWithPosition.d.ts

@@ -0,0 +1,14 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+import { MouseEvent } from "react";
+export interface UseMenuWithPosition {
+    anchorEl: MMenuProps["anchorEl"];
+    onClose: () => void;
+    onOpen: (event: MouseEvent<HTMLElement>) => void;
+    onToggleOpen: (event: MouseEvent<HTMLElement>) => void;
+    open: boolean;
+}
+/**
+ * Menu functionality for menu dropdown, with menu position.
+ * @returns menu functionality.
+ */
+export declare const useMenuWithPosition: () => UseMenuWithPosition;

package/lib/hooks/useMenuWithPosition.js

@@ -0,0 +1,33 @@
+import { useCallback, useMemo, useState } from "react";
+/**
+ * Menu functionality for menu dropdown, with menu position.
+ * @returns menu functionality.
+ */
+export const useMenuWithPosition = () => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+    // Closes header menu.
+    const onClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    // Opens header menu.
+    const onOpen = useCallback((event) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+    // Toggles menu open/close.
+    const onToggleOpen = useCallback((event) => {
+        if (open) {
+            setAnchorEl(null);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    }, [open]);
+    return {
+        anchorEl,
+        onClose,
+        onOpen,
+        onToggleOpen,
+        open,
+    };
+};

package/lib/theme/common/components.js

@@ -6,7 +6,7 @@ import { DropDownIcon } from "../../components/common/Form/components/Select/com
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import { alpha32, alpha60, alpha64, alpha80, black04, black08, white, } from "./palette";
 import { strokeBottom, strokeTop } from "./shadows";
-import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_LARGE_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, } from "./typography";
+import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_LARGE_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_SMALL, } from "./typography";
 // Constants
 const FLEX_START = "flex-start";
 /**
@@ -400,6 +400,22 @@ export const MuiButton = (theme) => {
                     },
                 },
             },
+            {
+                props: {
+                    variant: "backNav", // associated with "nav" variant.
+                },
+                style: {
+                    ...theme.typography[TEXT_HEADING_SMALL],
+                    color: theme.palette.ink.main,
+                    minWidth: 0,
+                    textTransform: "capitalize",
+                    whiteSpace: "nowrap",
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "&:hover": {
+                        backgroundColor: theme.palette.smoke.light,
+                    },
+                },
+            },
             {
                 props: {
                     variant: "nav",
@@ -822,12 +838,54 @@ export const MuiIconButton = (theme) => {
             disableRipple: true,
         },
         styleOverrides: {
+            colorPrimary: {
+                backgroundColor: theme.palette.primary.main,
+                boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
+                color: theme.palette.common.white,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&.Mui-disabled": {
+                    backgroundColor: theme.palette.primary.main,
+                    color: theme.palette.common.white,
+                    opacity: 0.5,
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:hover": {
+                    backgroundColor: theme.palette.primary.dark,
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:active": {
+                    backgroundColor: theme.palette.primary.dark,
+                    boxShadow: "none",
+                },
+            },
+            colorSecondary: {
+                backgroundColor: theme.palette.common.white,
+                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${black08}`,
+                color: theme.palette.ink.main,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&.Mui-disabled": {
+                    color: "inherit",
+                    opacity: 0.5,
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:hover": {
+                    backgroundColor: theme.palette.smoke.lightest,
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:active": {
+                    backgroundColor: theme.palette.smoke.lightest,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}`,
+                },
+            },
             root: {
                 borderRadius: 4,
             },
             sizeLarge: {
                 padding: 10,
             },
+            sizeMedium: {
+                padding: "6px 8px",
+            },
             sizeSmall: {
                 padding: 6,
             },

package/package.json

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

package/src/components/Export/components/ExportToTerra/components/ExportToTerraReady/exportToTerraReady.tsx

@@ -1,7 +1,10 @@
 import React, { ElementType } from "react";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { FluidPaper } from "../../../../../common/Paper/paper.styles";
-import { ANCHOR_TARGET } from "../../../../../Links/common/entities";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../../../../../Links/common/entities";
 import {
   Section,
   SectionActions,
@@ -18,7 +21,11 @@ export const ExportToTerraReady = ({
   exportURL,
 }: ExportToTerraReadyProps): JSX.Element => {
   const onOpenTerra = (): void => {
-    window.open(exportURL, ANCHOR_TARGET.BLANK, "noopener noreferrer");
+    window.open(
+      exportURL,
+      ANCHOR_TARGET.BLANK,
+      REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+    );
   };
   return (
     <FluidPaper>

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/AcceptTerraTOS/acceptTerraTOS.tsx

@@ -4,7 +4,10 @@ import { useAuthentication } from "../../../../../../../../../../hooks/useAuthen
 import { TerraResponse } from "../../../../../../../../../../hooks/useAuthentication/useFetchTerraProfile";
 import { useConfig } from "../../../../../../../../../../hooks/useConfig";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
-import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../../../../../../../../../Links/common/entities";
 import { FormStep } from "../../formStep";
 
 export interface AcceptTerraTOSProps {
@@ -25,7 +28,11 @@ export const AcceptTerraTOS = ({
 
   const onOpenTerra = (): void => {
     if (exportToTerraUrl) {
-      window.open(exportToTerraUrl, ANCHOR_TARGET.BLANK, "noopener noreferrer");
+      window.open(
+        exportToTerraUrl,
+        ANCHOR_TARGET.BLANK,
+        REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+      );
     }
   };
 

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/ConnectTerraToNIHAccount/connectTerraToNIHAccount.tsx

@@ -1,6 +1,9 @@
 import React, { ReactNode } from "react";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
-import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../../../../../../../../../Links/common/entities";
 import { FormStep } from "../../formStep";
 
 export interface ConnectTerraToNIHAccountProps {
@@ -18,7 +21,7 @@ export const ConnectTerraToNIHAccount = ({
     window.open(
       "https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers",
       ANCHOR_TARGET.BLANK,
-      "noopener noreferrer"
+      REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
     );
   };
   return (

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/CreateTerraAccount/createTerraAccount.tsx

@@ -1,7 +1,10 @@
 import React, { ReactNode } from "react";
 import { useConfig } from "../../../../../../../../../../hooks/useConfig";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
-import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../../../../../../../../../Links/common/entities";
 import { FormStep } from "../../formStep";
 
 export interface CreateTerraAccountProps {
@@ -20,7 +23,11 @@ export const CreateTerraAccount = ({
 
   const onOpenTerra = (): void => {
     if (exportToTerraUrl) {
-      window.open(exportToTerraUrl, ANCHOR_TARGET.BLANK, "noopener noreferrer");
+      window.open(
+        exportToTerraUrl,
+        ANCHOR_TARGET.BLANK,
+        REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+      );
     }
   };
 

package/src/components/Filter/components/Filter/filter.styles.ts

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
 import { Popover } 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 FilterPopover = styled(Popover)`
   .MuiPaper-menu {
@@ -17,3 +18,10 @@ export const FilterPopover = styled(Popover)`
     }
   }
 `;
+
+export const IconButton = styled(DXIconButton)`
+  color: ${white};
+  left: calc(100% + 4px);
+  position: absolute;
+  top: 4px;
+`;

package/src/components/Filter/components/Filter/filter.tsx

@@ -4,11 +4,10 @@ import React, { MouseEvent, ReactNode, useState } from "react";
 import { SelectCategoryView } from "../../../../common/entities";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
-import { CloseDrawerIconButton } from "../../../common/IconButton/iconButton.styles";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
-import { FilterPopover } from "./filter.styles";
+import { FilterPopover, IconButton } from "./filter.styles";
 
 const DEFAULT_POSITION: PopoverPosition = { left: 0, top: 0 };
 const DEFAULT_SLOT_PROPS: PopoverProps["slotProps"] = {
@@ -94,7 +93,7 @@ export const Filter = ({
         transitionDuration={TransitionDuration}
       >
         {isOpen && isFilterDrawer && (
-          <CloseDrawerIconButton
+          <IconButton
             Icon={CloseRounded}
             onClick={onCloseFilters}
             size="medium"

package/src/components/Index/components/AzulFileDownload/azulFileDownload.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { IconButton as DXIconButton } from "../../../common/IconButton/iconButton";
+
+export const StyledIconButton = styled(DXIconButton)`
+  pointer-events: none;
+`;

package/src/components/Index/components/AzulFileDownload/azulFileDownload.tsx

@@ -4,8 +4,8 @@ import { API_FILE_LOCATION_FETCH } from "../../../../apis/azul/common/constants"
 import { useRequestFileLocation } from "../../../../hooks/useRequestFileLocation";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
-import { LoadingIconButton } from "../../../common/IconButton/components/LoadingIconButton/loadingIconButton";
-import { IconButtonPrimary } from "../../../common/IconButton/iconButton.styles";
+import { IconButton } from "../../../common/IconButton/iconButton";
+import { StyledIconButton } from "./azulFileDownload.styles";
 
 export interface AzulFileDownloadProps {
   url?: string; // Original "file fetch URL" as returned from Azul endpoint.
@@ -42,19 +42,20 @@ export const AzulFileDownload = ({
     run();
   };
 
-  const realButton = (
-    <IconButtonPrimary
-      disabled={!url}
-      Icon={isLoading ? LoadingIcon : DownloadIcon}
-      onClick={onFileLocationRequested}
-      size="medium"
-    />
-  );
-  const mockButton = <LoadingIconButton />;
+  if (isDownloading)
+    return (
+      <StyledIconButton color="primary" Icon={LoadingIcon} size="medium" />
+    );
 
   return (
     <>
-      {isDownloading ? mockButton : realButton}
+      <IconButton
+        color="primary"
+        disabled={!url}
+        Icon={isLoading ? LoadingIcon : DownloadIcon}
+        onClick={onFileLocationRequested}
+        size="medium"
+      />
       <Box component="a" download ref={downloadRef} sx={{ display: "none" }} />
     </>
   );

package/src/components/Layout/components/ContentLayout/contentLayout.styles.ts

@@ -73,13 +73,12 @@ const content = ({
   padding-top: ${headerHeight}px;
 `;
 
-const navigation = ({
-  headerHeight,
-  panelColor,
-  theme,
-}: GridProps & ThemeProps) => css`
+const navigation = ({ panelColor, theme }: GridProps & ThemeProps) => css`
   background-color: ${getPanelBackgroundColor(theme, panelColor)};
-  max-height: calc(100vh - ${headerHeight}px);
+`;
+
+const positioner = ({ headerHeight }: GridProps) => css`
+  max-height: 100vh;
   overflow: auto;
   padding-top: ${headerHeight}px;
   position: sticky;
@@ -113,6 +112,10 @@ export const OutlineGrid = styled("div")<GridProps>`
   }
 `;
 
+export const Positioner = styled.div<GridProps>`
+  ${positioner};
+`;
+
 export const Navigation = styled.div`
   box-sizing: content-box;
   margin-left: auto;

package/src/components/Layout/components/ContentLayout/contentLayout.tsx

@@ -6,10 +6,11 @@ import {
   Content,
   ContentGrid,
   ContentLayout as Layout,
-  Navigation as NavigationPositioner,
+  Navigation,
   NavigationGrid,
-  Outline as OutlinePositioner,
+  Outline,
   OutlineGrid,
+  Positioner,
 } from "./contentLayout.styles";
 
 export interface ContentLayoutProps {
@@ -38,7 +39,9 @@ export const ContentLayout = ({
           headerHeight={headerHeight}
           panelColor={layoutStyle?.navigation}
         >
-          <NavigationPositioner>{navigation}</NavigationPositioner>
+          <Positioner headerHeight={headerHeight}>
+            <Navigation>{navigation}</Navigation>
+          </Positioner>
         </NavigationGrid>
       )}
       <ContentGrid
@@ -53,7 +56,9 @@ export const ContentLayout = ({
           headerHeight={headerHeight}
           panelColor={layoutStyle?.outline}
         >
-          <OutlinePositioner>{outline}</OutlinePositioner>
+          <Positioner headerHeight={headerHeight}>
+            <Outline>{outline}</Outline>
+          </Positioner>
         </OutlineGrid>
       )}
     </Layout>

package/src/components/Layout/components/Footer/footer.styles.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
 import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
-import { inkMain } from "../../../../styles/common/mixins/colors";
+import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
 import { textBodySmall400 } from "../../../../styles/common/mixins/fonts";
 import { Socials as DXSocials } from "../../../common/Socials/socials";
 import { Link as DXLink } from "../../../Links/components/Link/link";
@@ -50,4 +50,9 @@ export const Link = styled(DXLink)`
 
 export const Socials = styled(DXSocials)`
   gap: 8px;
+  .MuiIconButton-root {
+    &:hover {
+      background-color: ${smokeMain};
+    }
+  }
 `;

package/src/components/Layout/components/Footer/footer.tsx

@@ -1,6 +1,5 @@
 import { Toolbar } from "@mui/material";
 import React, { ReactNode } from "react";
-import { IconButtonSocialsFooter } from "../../../common/IconButton/iconButton.styles";
 import { Social } from "../../../common/Socials/socials";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { NavLinkItem } from "../Header/components/Content/components/Navigation/navigation";
@@ -39,13 +38,7 @@ export const Footer = ({
                   url={url}
                 />
               ))}
-            {socials && (
-              <Socials
-                buttonSize="small"
-                IconButtonElType={IconButtonSocialsFooter}
-                socials={socials}
-              />
-            )}
+            {socials && <Socials buttonSize="small" socials={socials} />}
           </Links>
         )}
       </Toolbar>

package/src/components/Layout/components/Header/common/entities.ts

@@ -8,6 +8,11 @@ export type Navigation = [
   NavLinkItem[] | undefined
 ]; // [LEFT, CENTER, RIGHT]
 
+export enum SELECTED_MATCH {
+  EQUALS = "EQUALS",
+  STARTS_WITH = "STARTS_WITH", // Default value.
+}
+
 export interface SocialMedia {
   label: ReactNode;
   socials: Social[];

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