@databiosphere/findable-ui 8.0.3 → 9.0.0

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.3",
+  "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/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

@@ -3,6 +3,7 @@ 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/Navigation/common/utils.ts

@@ -1,13 +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
+  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;
+}