@databiosphere/findable-ui 7.0.0 → 8.0.0

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

@@ -1,6 +1,4 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { ELEMENT_ALIGNMENT, } from "../../../../../../../../common/entities";
 import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
 import { textBody500 } from "../../../../../../../../styles/common/mixins/fonts";
 export const Navigation = styled("div") `
@@ -10,23 +8,10 @@ export const Navigation = styled("div") `
   gap: 8px;
   justify-content: flex-start;
 
-  // Left alignment.
-  ${({ alignment }) => alignment === ELEMENT_ALIGNMENT.LEFT &&
-    css `
-      margin-left: 24px;
-    `};
-
-  // Center alignment.
-  ${({ alignment }) => alignment === ELEMENT_ALIGNMENT.CENTER &&
-    css `
-      justify-content: center;
-    `};
-
-  // Right alignment.
-  ${({ alignment }) => alignment === ELEMENT_ALIGNMENT.RIGHT &&
-    css `
-      justify-content: flex-end;
-    `};
+  ${mediaDesktopSmallUp} {
+    flex: unset;
+    justify-content: inherit;
+  }
 
   .MuiButton-nav {
     ${textBody500};

package/lib/components/Layout/components/Header/header.d.ts

@@ -1,15 +1,13 @@
 import { ReactNode } from "react";
-import { ElementAlignment } from "../../../../common/entities";
-import { SocialMedia } from "./common/entities";
-import { NavLinkItem } from "./components/Content/components/Navigation/navigation";
+import { ComponentsConfig } from "../../../../config/entities";
+import { Navigation, SocialMedia } from "./common/entities";
 export interface HeaderProps {
     actions?: ReactNode;
-    Announcements?: ReactNode;
+    announcements?: ComponentsConfig;
     authenticationEnabled?: boolean;
     className?: string;
-    Logo: ReactNode;
-    navAlignment?: ElementAlignment;
-    navLinks: NavLinkItem[];
+    logo: ReactNode;
+    navigation?: Navigation;
     searchEnabled?: boolean;
     searchURL?: string;
     slogan?: ReactNode;

package/lib/components/Layout/components/Header/header.js

@@ -1,69 +1,45 @@
 import { Fade, Toolbar } from "@mui/material";
-import React, { useCallback, useEffect, useRef, useState, } from "react";
-import { ELEMENT_ALIGNMENT, } from "../../../../common/entities";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
-import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../hooks/useResizeObserver";
-import { LayoutActionKind } from "../../../../providers/layoutState";
-import { DESKTOP, DESKTOP_SM } from "../../../../theme/common/breakpoints";
-import { FADE_TRANSITION_PROPS } from "./common/constants";
-import { getHeaderNavigationLinks } from "./common/utils";
+import React from "react";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint";
+import { useMenu } from "../../../../hooks/useMenu";
+import { APP_BAR_PROPS, FADE_TRANSITION_PROPS, TOOLBAR_PROPS, } from "./common/constants";
+import { getNavigationLinks } from "./common/utils";
+import { Announcements } from "./components/Announcements/announcements";
 import { Actions } from "./components/Content/components/Actions/actions";
 import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
 import { Search } from "./components/Content/components/Actions/components/Search/search";
-import { Navigation, } from "./components/Content/components/Navigation/navigation";
+import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
 import { Socials } from "./components/Content/components/Socials/socials.styles";
-import { AppBar as HeaderAppBar, HeaderSmAppBar } from "./header.styles";
+import { AppBar, Center, Left, Right } from "./header.styles";
+import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
+import { useMeasureHeader } from "./hooks/useMeasureHeader";
 export const Header = ({ ...headerProps }) => {
-    const { Announcements, authenticationEnabled, actions, className, Logo, navAlignment = ELEMENT_ALIGNMENT.LEFT, navLinks, searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
-    const { layoutDispatch } = useLayoutState();
-    const headerRef = useRef(null);
-    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
-    const [menuOpen, setMenuOpen] = useState(false);
-    const onlySmDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, DESKTOP_SM);
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-    const desktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP);
-    const AppBar = navAlignment === ELEMENT_ALIGNMENT.RIGHT ? HeaderSmAppBar : HeaderAppBar;
-    const showActions = searchEnabled || authenticationEnabled || !smDesktop;
-    const isNavigationIn = smDesktop;
-    const isSloganIn = Boolean(slogan) && smDesktop;
-    const isSocialsIn = Boolean(socialMedia) && desktop;
-    const fadeProps = FADE_TRANSITION_PROPS;
-    // Closes header menu.
-    const closeMenu = useCallback(() => {
-        setMenuOpen(false);
-    }, []);
-    // Opens header menu.
-    const openMenu = useCallback(() => {
-        setMenuOpen(true);
-    }, []);
-    // Updates layout state header height.
-    useEffect(() => {
-        if (!height)
-            return;
-        layoutDispatch({
-            payload: height,
-            type: LayoutActionKind.UpdateHeaderHeight,
-        });
-    }, [height, layoutDispatch]);
-    return (React.createElement(AppBar, { ref: headerRef, className: className, elevation: 1, position: "fixed" },
-        Announcements,
-        React.createElement(Toolbar, { variant: "dense" },
-            Logo,
-            React.createElement(Fade, { in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" }, ...fadeProps },
-                React.createElement(Divider, { orientation: "vertical" })),
-            React.createElement(Fade, { in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" }, ...fadeProps },
-                React.createElement(Slogan, { slogan: slogan })),
-            React.createElement(Fade, { in: isNavigationIn, ...fadeProps },
-                React.createElement(Navigation, { alignment: navAlignment, headerProps: headerProps, links: getHeaderNavigationLinks(navLinks, socialMedia, onlySmDesktop) })),
-            socialMedia && (React.createElement(Fade, { in: isSocialsIn, ...fadeProps },
-                React.createElement(Socials, { buttonSize: "small", socials: socialMedia.socials }))),
-            React.createElement(Actions, { showActions: showActions },
-                React.createElement(Search, { closeMenu: closeMenu, searchEnabled: searchEnabled, searchURL: searchURL }),
-                React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: closeMenu }),
-                actions,
-                React.createElement(Menu, { closeMenu: closeMenu, headerProps: headerProps, open: menuOpen, openMenu: openMenu })))));
+    const { breakpoint } = useBreakpoint();
+    const { isIn } = useHeaderVisibility(headerProps);
+    const { headerRef } = useMeasureHeader();
+    const { onClose, onOpen, open } = useMenu();
+    const { actions, announcements, authenticationEnabled, className, logo, navigation: [navItemsL, navItemsC, navItemsR] = [], searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
+    return (React.createElement(AppBar, { ...APP_BAR_PROPS, ref: headerRef, className: className },
+        React.createElement(Announcements, { announcements: announcements }),
+        React.createElement(Toolbar, { ...TOOLBAR_PROPS },
+            React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isLeftGroupIn },
+                React.createElement(Left, null,
+                    logo,
+                    isIn.isSloganIn && React.createElement(Divider, { flexItem: true, orientation: "vertical" }),
+                    isIn.isSloganIn && React.createElement(Slogan, { slogan: slogan }),
+                    isIn.isLeftNavigationIn && (React.createElement(DXNavigation, { headerProps: headerProps, links: getNavigationLinks(navItemsL, breakpoint) })))),
+            React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isCenterGroupIn },
+                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { headerProps: headerProps, links: getNavigationLinks(navItemsC, breakpoint) })))),
+            React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isRightGroupIn },
+                React.createElement(Right, null,
+                    isIn.isRightNavigationIn && (React.createElement(DXNavigation, { headerProps: headerProps, links: getNavigationLinks(navItemsR) })),
+                    isIn.isSocialsIn && (React.createElement(Socials, { buttonSize: "small", socials: socialMedia?.socials || [] })),
+                    isIn.isActionsIn && (React.createElement(Actions, null,
+                        React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
+                        React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+                        actions,
+                        React.createElement(Menu, { closeMenu: onClose, headerProps: headerProps, open: open, openMenu: onOpen }))))))));
 };

package/lib/components/Layout/components/Header/header.stories.js

@@ -1,21 +1,15 @@
 import React from "react";
-import { ELEMENT_ALIGNMENT } from "../../../../common/entities";
 import logo from "../../../../images/logo.svg";
 import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
 import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
 import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
-import { HEADER_NAVIGATION_LABEL } from "./common/constants";
 import { Logo } from "./components/Content/components/Logo/logo";
 import { Header } from "./header";
 export default {
     argTypes: {
-        Logo: { control: { disable: true } },
         authenticationEnabled: { control: "boolean" },
-        navAlignment: {
-            control: "select",
-            options: [ELEMENT_ALIGNMENT.LEFT, ELEMENT_ALIGNMENT.CENTER],
-        },
+        logo: { control: { disable: true } },
         navLinks: { control: "array" },
         searchEnabled: { control: "boolean" },
         slogan: { control: "text" },
@@ -30,45 +24,48 @@ export default {
 const url = "/";
 export const HeaderStory = {
     args: {
-        Logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo }),
         authenticationEnabled: false,
-        navAlignment: ELEMENT_ALIGNMENT.CENTER,
-        navLinks: [
-            {
-                label: "Overview",
-                url,
-            },
-            {
-                label: "Learn",
-                url,
-            },
-            {
-                label: "Datasets",
-                url,
-            },
-            {
-                label: "More",
-                menuItems: [
-                    {
-                        label: "Team",
-                        url,
-                    },
-                    {
-                        label: "FAQ",
-                        url,
-                    },
-                    {
-                        label: "Help",
-                        url,
-                    },
-                ],
-                url: "",
-            },
+        logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo }),
+        navigation: [
+            undefined,
+            [
+                {
+                    label: "Overview",
+                    url,
+                },
+                {
+                    label: "Learn",
+                    url,
+                },
+                {
+                    label: "Datasets",
+                    url,
+                },
+                {
+                    label: "More",
+                    menuItems: [
+                        {
+                            label: "Team",
+                            url,
+                        },
+                        {
+                            label: "FAQ",
+                            url,
+                        },
+                        {
+                            label: "Help",
+                            url,
+                        },
+                    ],
+                    url: "",
+                },
+            ],
+            undefined,
         ],
         searchEnabled: true,
         slogan: "Header Slogan",
         socialMedia: {
-            label: HEADER_NAVIGATION_LABEL.SOCIALS,
+            label: "Follow Us",
             socials: [
                 {
                     Icon: XIcon,

package/lib/components/Layout/components/Header/header.styles.d.ts

@@ -1,2 +1,14 @@
+/// <reference types="react" />
 export declare const AppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AppBarTypeMap<{}, "header">>;
-export declare const HeaderSmAppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AppBarTypeMap<{}, "header">>;
+export declare const Left: 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 Center: 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 Right: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Header/header.styles.js

@@ -1,3 +1,4 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
 import { HEADER_HEIGHT } from "./common/constants";
@@ -14,8 +15,27 @@ export const AppBar = styled(MAppBar) `
     min-height: unset;
   }
 `;
-export const HeaderSmAppBar = styled(AppBar) `
-  .MuiToolbar-root {
-    gap: 8px;
+const group = css `
+  align-items: center;
+  display: flex;
+  flex: 1;
+`;
+export const Left = styled.div `
+  ${group};
+  gap: 16px;
+  justify-content: flex-start;
+
+  .MuiButton-navPrimary {
+    &:first-of-type {
+      margin-left: 24px;
+    }
   }
 `;
+export const Center = styled.div `
+  ${group};
+  justify-content: center;
+`;
+export const Right = styled.div `
+  ${group};
+  justify-content: flex-end;
+`;

package/lib/components/Layout/components/Header/hooks/useHeaderVisibility.d.ts

@@ -0,0 +1,20 @@
+import { HeaderProps } from "../header";
+export interface UseHeaderVisibility {
+    isIn: {
+        isActionsIn: boolean;
+        isCenterGroupIn: boolean;
+        isCenterNavigationIn: boolean;
+        isLeftGroupIn: boolean;
+        isLeftNavigationIn: boolean;
+        isRightGroupIn: boolean;
+        isRightNavigationIn: boolean;
+        isSloganIn: boolean;
+        isSocialsIn: boolean;
+    };
+}
+/**
+ * Returns header component visibility for header related rendering logic.
+ * @param headerProps - Header component props.
+ * @returns header component visibility.
+ */
+export declare const useHeaderVisibility: (headerProps: HeaderProps) => UseHeaderVisibility;

package/lib/components/Layout/components/Header/hooks/useHeaderVisibility.js

@@ -0,0 +1,46 @@
+import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+/**
+ * Returns header component visibility for header related rendering logic.
+ * @param headerProps - Header component props.
+ * @returns header component visibility.
+ */
+export const useHeaderVisibility = (headerProps) => {
+    const { lgUp, mdUp } = useBreakpoint();
+    // Header configuration.
+    const { actions, authenticationEnabled, logo, navigation: [navItemsL, navItemsC, navItemsR] = [], searchEnabled, slogan, socialMedia, } = headerProps;
+    // Header content.
+    const hasActions = Boolean(actions);
+    const hasLogo = Boolean(logo);
+    const hasMenu = !mdUp;
+    const hasNavItemsC = Boolean(navItemsC);
+    const hasNavItemsL = Boolean(navItemsL);
+    const hasNavItemsR = Boolean(navItemsR);
+    const hasSlogan = Boolean(slogan);
+    const hasSocials = Boolean(socialMedia);
+    // Determines header content visibility.
+    const isActionsIn = hasActions || searchEnabled || authenticationEnabled || hasMenu;
+    const isNavigationIn = mdUp;
+    const isSloganIn = hasSlogan && mdUp;
+    const isSocialsIn = hasSocials && lgUp;
+    // Determines navigation visibility.
+    const isCenterNavigationIn = isNavigationIn && hasNavItemsC;
+    const isLeftNavigationIn = isNavigationIn && hasNavItemsL;
+    const isRightNavigationIn = isNavigationIn && hasNavItemsR;
+    // Determines group visibility.
+    const isLeftGroupIn = hasLogo || isSocialsIn || isLeftNavigationIn;
+    const isCenterGroupIn = isCenterNavigationIn;
+    const isRightGroupIn = isRightNavigationIn || isSocialsIn || isActionsIn;
+    return {
+        isIn: {
+            isActionsIn,
+            isCenterGroupIn,
+            isCenterNavigationIn,
+            isLeftGroupIn,
+            isLeftNavigationIn,
+            isRightGroupIn,
+            isRightNavigationIn,
+            isSloganIn,
+            isSocialsIn,
+        },
+    };
+};

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+export interface UseMeasureHeader {
+    headerRef: RefObject<HTMLElement>;
+}
+export declare const useMeasureHeader: () => UseMeasureHeader;

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { useLayoutState } from "../../../../../hooks/useLayoutState";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../../hooks/useResizeObserver";
+import { LayoutActionKind } from "../../../../../providers/layoutState";
+export const useMeasureHeader = () => {
+    const { layoutDispatch } = useLayoutState();
+    const headerRef = useRef(null);
+    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
+    // Updates layout state header height.
+    useEffect(() => {
+        if (!height)
+            return;
+        layoutDispatch({
+            payload: height,
+            type: LayoutActionKind.UpdateHeaderHeight,
+        });
+    }, [height, layoutDispatch]);
+    return { headerRef };
+};

package/lib/config/entities.d.ts

@@ -128,6 +128,7 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
     detail: BackPageConfig;
     entityMapper?: EntityMapper<T, I>;
     exploreMode: ExploreMode;
+    explorerTitle?: SiteConfig["explorerTitle"];
     getId?: GetIdFunction<T>;
     getTitle?: GetTitleFunction<T>;
     list: ListConfig;
@@ -212,6 +213,7 @@ export interface ListViewConfig {
     enableDownload?: boolean;
     enableRowPreview?: boolean;
     enableRowSelection?: boolean;
+    enableTab?: boolean;
     listHero?: ComponentsConfig;
     rowPreviewView?: ComponentsConfig;
     rowSelectionView?: ComponentsConfig;

package/lib/config/utils.js

@@ -20,8 +20,7 @@ export function getDefaultConfig() {
                 socials: [],
             },
             header: {
-                Logo: null,
-                navLinks: [],
+                logo: null,
             },
         },
         redirectRootToPath: "",

package/lib/hooks/useBreakpoint.d.ts

@@ -0,0 +1,17 @@
+import { UseCurrentBreakpoint } from "./useCurrentBreakpoint";
+export declare type UseBreakpoint = {
+    breakpoint?: UseCurrentBreakpoint;
+    lg: boolean;
+    lgDown: boolean;
+    lgUp: boolean;
+    md: boolean;
+    mdDown: boolean;
+    mdUp: boolean;
+    sm: boolean;
+    smDown: boolean;
+    smUp: boolean;
+    xs: boolean;
+    xsDown: boolean;
+    xsUp: boolean;
+};
+export declare const useBreakpoint: () => UseBreakpoint;

package/lib/hooks/useBreakpoint.js

@@ -0,0 +1,34 @@
+import { useCurrentBreakpoint, } from "./useCurrentBreakpoint";
+export const useBreakpoint = () => {
+    const breakpoint = useCurrentBreakpoint();
+    // Current breakpoint.
+    const xs = breakpoint === "xs";
+    const sm = breakpoint === "sm";
+    const md = breakpoint === "md";
+    const lg = breakpoint === "lg";
+    // Current breakpoint, down.
+    const xsDown = xs;
+    const smDown = xs || sm;
+    const mdDown = xs || sm || md;
+    const lgDown = xs || sm || md || lg;
+    // Current breakpoint, up.
+    const xsUp = xs || sm || md || lg;
+    const smUp = sm || md || lg;
+    const mdUp = md || lg;
+    const lgUp = lg;
+    return {
+        breakpoint,
+        lg,
+        lgDown,
+        lgUp,
+        md,
+        mdDown,
+        mdUp,
+        sm,
+        smDown,
+        smUp,
+        xs,
+        xsDown,
+        xsUp,
+    };
+};

package/lib/hooks/useBreakpointHelper.d.ts

@@ -9,6 +9,6 @@ export declare enum BREAKPOINT_FN_NAME {
     UP = "up"
 }
 declare type BreakpointFnName = BREAKPOINT_FN_NAME;
-declare type BreakpointKey = Breakpoint;
+export declare type BreakpointKey = Breakpoint;
 export declare const useBreakpointHelper: (fnName: BreakpointFnName, breakpointKey: BreakpointKey) => boolean;
 export {};

package/lib/hooks/useCurrentBreakpoint.d.ts

@@ -0,0 +1,3 @@
+import { BreakpointKey } from "./useBreakpointHelper";
+export declare type UseCurrentBreakpoint = BreakpointKey | undefined;
+export declare const useCurrentBreakpoint: () => UseCurrentBreakpoint;

package/lib/hooks/useCurrentBreakpoint.js

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "./useBreakpointHelper";
+const breakpointKeys = ["xs", "sm", "md", "lg"];
+export const useCurrentBreakpoint = () => {
+    const xs = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "xs");
+    const sm = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "sm");
+    const md = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "md");
+    const lg = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "lg");
+    const breakpoints = useMemo(() => ({ lg, md, sm, xs }), [lg, md, sm, xs]);
+    return breakpointKeys.find((key) => breakpoints[key]);
+};

package/lib/hooks/useMenu.d.ts

@@ -0,0 +1,10 @@
+export interface UseMenu {
+    onClose: () => void;
+    onOpen: () => void;
+    open: boolean;
+}
+/**
+ * Menu functionality for menu dropdown.
+ * @returns menu functionality.
+ */
+export declare const useMenu: () => UseMenu;

package/lib/hooks/useMenu.js

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+/**
+ * Menu functionality for menu dropdown.
+ * @returns menu functionality.
+ */
+export const useMenu = () => {
+    const [open, setOpen] = useState(false);
+    // Closes header menu.
+    const onClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+    // Opens header menu.
+    const onOpen = useCallback(() => {
+        setOpen(true);
+    }, []);
+    return { onClose, onOpen, open };
+};

package/lib/views/ExploreView/exploreView.js

@@ -1,12 +1,11 @@
-import { useRouter } from "next/router";
 import React, { useEffect, useMemo, useState } from "react";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM } from "../../common/analytics/entities";
-import { Tabs } from "../../components/common/Tabs/tabs";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import { Filters, } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { Tabs } from "../../components/Index/components/Tabs/tabs";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
@@ -21,30 +20,15 @@ import { useSummary } from "../../hooks/useSummary";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { DESKTOP_SM } from "../../theme/common/breakpoints";
-/**
- * Returns tabs to be used as a prop for the Tabs component.
- * @param entities - Entities config.
- * @returns tabs list.
- */
-function getTabs(entities) {
-    return entities.map(({ label, route, tabIcon: icon, tabIconPosition: iconPosition }) => ({
-        icon,
-        iconPosition,
-        label,
-        value: route,
-    }));
-}
 export const ExploreView = (props) => {
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
     const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
     const { config, entityConfig } = useConfig(); // Get app level config.
     const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
-    const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
+    const { explorerTitle, summaryConfig, trackingConfig } = config;
     const { listView } = entityConfig;
     const { listHero, subTitleHero } = listView || {};
-    const { categoryGroups, categoryViews, filterCount, tabValue } = exploreState;
-    const { push } = useRouter();
-    const tabs = getTabs(entities);
+    const { categoryGroups, categoryViews, filterCount } = exploreState;
     const { response: summaryResponse } = useSummary(); // Fetch summary.
     useEntityList(props); // Fetch entities.
     const { entityListType } = props;
@@ -98,15 +82,6 @@ export const ExploreView = (props) => {
     const onOpenDrawer = () => {
         setIsDrawerOpen(true);
     };
-    /**
-     * Callback fired when selected tab value changes.
-     * - Sets state tabsValue to selected tab value.
-     * - Executes a pushState and resets pagination.
-     * @param tabValue - Selected tab value.
-     */
-    const onTabChange = (tabValue) => {
-        push(`/${tabValue}`);
-    };
     /**
      * Dispatch a SelectedEntityType action when entityListType changes.
      */
@@ -128,7 +103,7 @@ export const ExploreView = (props) => {
                 React.createElement(ClearAllFilters, null),
                 React.createElement(SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
             React.createElement(Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig?.trackFilterOpened }))),
-        React.createElement(IndexView, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
+        React.createElement(IndexView, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, null), title: entityConfig.explorerTitle || explorerTitle })));
 };
 /**
  * Builds the category views into category views grouped by the given category group configuration.

package/package.json

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