@databiosphere/findable-ui 6.0.0 → 8.0.0

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.js

@@ -1,24 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Outline = exports.Content = exports.Navigation = exports.OutlineGrid = exports.ContentGrid = exports.NavigationGrid = exports.ContentLayout = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../styles/common/mixins/colors");
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { media1366Up, mediaDesktopSmallUp, mediaTabletDown, } from "../../../../styles/common/mixins/breakpoints";
+import { smokeLight, smokeLightest, smokeMain, white, } from "../../../../styles/common/mixins/colors";
 const CONTENT_MAX_WIDTH = 756;
 const NAV_GRID_WIDTH = 280;
 const NAV_MAX_WIDTH = 232;
 const PADDING = 24;
 const PADDING_Y = PADDING;
 const COLOR = {
-    DEFAULT: colors_1.white,
-    SMOKE_LIGHT: colors_1.smokeLight,
-    SMOKE_LIGHTEST: colors_1.smokeLightest,
+    DEFAULT: white,
+    SMOKE_LIGHT: smokeLight,
+    SMOKE_LIGHTEST: smokeLightest,
 };
-exports.ContentLayout = styled_1.default.div `
+export const ContentLayout = styled.div `
   background-color: ${({ panelColor, theme }) => getPanelBackgroundColor(theme, panelColor)};
   display: grid;
   flex: 1;
@@ -27,14 +21,14 @@ exports.ContentLayout = styled_1.default.div `
   height: 100%;
   margin: 0 auto;
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     grid-template-areas: "navigation content";
     grid-template-columns:
       ${NAV_GRID_WIDTH}px
       1fr;
   }
 
-  ${breakpoints_1.media1366Up} {
+  ${media1366Up} {
     grid-template-areas: "navigation content outline";
     grid-template-columns:
       ${NAV_GRID_WIDTH}px
@@ -42,11 +36,11 @@ exports.ContentLayout = styled_1.default.div `
       ${NAV_GRID_WIDTH}px;
   }
 `;
-const content = ({ headerHeight, panelColor, theme, }) => (0, react_1.css) `
+const content = ({ headerHeight, panelColor, theme, }) => css `
   background-color: ${getPanelBackgroundColor(theme, panelColor)};
   padding-top: ${headerHeight}px;
 `;
-const navigation = ({ headerHeight, panelColor, theme, }) => (0, react_1.css) `
+const navigation = ({ headerHeight, panelColor, theme, }) => css `
   background-color: ${getPanelBackgroundColor(theme, panelColor)};
   max-height: calc(100vh - ${headerHeight}px);
   overflow: auto;
@@ -54,48 +48,48 @@ const navigation = ({ headerHeight, panelColor, theme, }) => (0, react_1.css) `
   position: sticky;
   top: 0;
 `;
-exports.NavigationGrid = styled_1.default.div `
+export const NavigationGrid = styled.div `
   ${navigation};
-  box-shadow: inset -1px 0 ${colors_1.smokeMain};
+  box-shadow: inset -1px 0 ${smokeMain};
   display: none;
   grid-area: navigation;
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     display: block;
   }
 `;
-exports.ContentGrid = styled_1.default.div `
+export const ContentGrid = styled.div `
   ${content};
   grid-area: content;
   min-width: 0;
 `;
-exports.OutlineGrid = (0, styled_1.default)("div") `
+export const OutlineGrid = styled("div") `
   ${navigation};
   display: none;
   grid-area: outline;
 
-  ${breakpoints_1.media1366Up} {
+  ${media1366Up} {
     display: block;
   }
 `;
-exports.Navigation = styled_1.default.div `
+export const Navigation = styled.div `
   box-sizing: content-box;
   margin-left: auto;
   max-width: ${NAV_MAX_WIDTH}px;
   padding: ${PADDING}px;
 `;
-exports.Content = styled_1.default.div `
+export const Content = styled.div `
   align-self: center;
   box-sizing: content-box;
   margin: 0 auto;
   max-width: ${CONTENT_MAX_WIDTH}px;
   padding: ${PADDING_Y}px 40px;
 
-  ${breakpoints_1.mediaTabletDown} {
+  ${mediaTabletDown} {
     padding: ${PADDING_Y}px 16px;
   }
 `;
-exports.Outline = styled_1.default.div `
+export const Outline = styled.div `
   box-sizing: content-box;
   margin-right: auto;
   max-width: 242px;

package/lib/components/Layout/components/Floating/floating.js

@@ -1,32 +1,5 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+import React, { Fragment } from "react";
+import { ComponentCreator } from "../../../ComponentCreator/ComponentCreator";
+export const Floating = ({ components }) => {
+    return (React.createElement(Fragment, null, components && React.createElement(ComponentCreator, { components: components, response: {} })));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Floating = void 0;
-const react_1 = __importStar(require("react"));
-const ComponentCreator_1 = require("../../../ComponentCreator/ComponentCreator");
-const Floating = ({ components }) => {
-    return (react_1.default.createElement(react_1.Fragment, null, components && react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: components, response: {} })));
-};
-exports.Floating = Floating;

package/lib/components/Layout/components/Footer/footer.js

@@ -1,21 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const iconButton_styles_1 = require("../../../common/IconButton/iconButton.styles");
-const entities_1 = require("../../../Links/common/entities");
-const footer_styles_1 = require("./footer.styles");
-const Footer = ({ Branding, className, navLinks, socials, }) => {
-    return (react_1.default.createElement(footer_styles_1.AppBar, { className: className, color: "inherit", component: "footer", variant: "footer" },
-        react_1.default.createElement(material_1.Toolbar, { variant: "dense" },
+import { Toolbar } from "@mui/material";
+import React from "react";
+import { IconButtonSocialsFooter } from "../../../common/IconButton/iconButton.styles";
+import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { AppBar, Link, Links, Socials } from "./footer.styles";
+export const Footer = ({ Branding, className, navLinks, socials, }) => {
+    return (React.createElement(AppBar, { className: className, color: "inherit", component: "footer", variant: "footer" },
+        React.createElement(Toolbar, { variant: "dense" },
             Branding,
-            (navLinks || socials) && (react_1.default.createElement(footer_styles_1.Links, null,
+            (navLinks || socials) && (React.createElement(Links, null,
                 navLinks &&
-                    navLinks.map(({ label, target = entities_1.ANCHOR_TARGET.SELF, url }, i) => (react_1.default.createElement(footer_styles_1.Link, { key: `${url}${i}`, label: label, target: target, url: url }))),
-                socials && (react_1.default.createElement(footer_styles_1.Socials, { buttonSize: "small", IconButtonElType: iconButton_styles_1.IconButtonSocialsFooter, socials: socials })))))));
+                    navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (React.createElement(Link, { key: `${url}${i}`, label: label, target: target, url: url }))),
+                socials && (React.createElement(Socials, { buttonSize: "small", IconButtonElType: IconButtonSocialsFooter, socials: socials })))))));
 };
-exports.Footer = Footer;

package/lib/components/Layout/components/Footer/footer.stories.js

@@ -1,33 +1,27 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FooterStory = void 0;
-const react_1 = __importDefault(require("react"));
-const logo_svg_1 = __importDefault(require("../../../../images/logo.svg"));
-const discourseIcon_1 = require("../../../common/CustomIcon/components/DiscourseIcon/discourseIcon");
-const facebookIcon_1 = require("../../../common/CustomIcon/components/FacebookIcon/facebookIcon");
-const gitHubIcon_1 = require("../../../common/CustomIcon/components/GitHubIcon/gitHubIcon");
-const xIcon_1 = require("../../../common/CustomIcon/components/XIcon/xIcon");
-const youTubeIcon_1 = require("../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon");
-const logo_1 = require("../Header/components/Content/components/Logo/logo");
-const footer_1 = require("./footer");
-exports.default = {
+import React from "react";
+import logo from "../../../../images/logo.svg";
+import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
+import { FacebookIcon } from "../../../common/CustomIcon/components/FacebookIcon/facebookIcon";
+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 { Logo } from "../Header/components/Content/components/Logo/logo";
+import { Footer } from "./footer";
+export default {
     argTypes: {
         Branding: { control: { disabled: true } },
         navLinks: { control: "array" },
         socials: { control: { disabled: true } },
     },
-    component: footer_1.Footer,
+    component: Footer,
     parameters: {
         layout: "fullscreen",
     },
     title: "Components/Layout/Footer",
 };
-exports.FooterStory = {
+export const FooterStory = {
     args: {
-        Branding: react_1.default.createElement(logo_1.Logo, { alt: "logo", height: 24, link: "/", src: logo_svg_1.default }),
+        Branding: React.createElement(Logo, { alt: "logo", height: 24, link: "/", src: logo }),
         navLinks: [
             {
                 label: "Help",
@@ -40,27 +34,27 @@ exports.FooterStory = {
         ],
         socials: [
             {
-                Icon: discourseIcon_1.DiscourseIcon,
+                Icon: DiscourseIcon,
                 label: null,
                 url: "https://www.discourse.org/",
             },
             {
-                Icon: xIcon_1.XIcon,
+                Icon: XIcon,
                 label: null,
                 url: "https://twitter.com",
             },
             {
-                Icon: facebookIcon_1.FacebookIcon,
+                Icon: FacebookIcon,
                 label: null,
                 url: "https://facebook.com",
             },
             {
-                Icon: youTubeIcon_1.YouTubeIcon,
+                Icon: YouTubeIcon,
                 label: null,
                 url: "https://www.youtube.com",
             },
             {
-                Icon: gitHubIcon_1.GitHubIcon,
+                Icon: GitHubIcon,
                 label: null,
                 url: "https://github.com",
             },

package/lib/components/Layout/components/Footer/footer.styles.js

@@ -1,17 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Socials = exports.Link = exports.Links = exports.AppBar = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../styles/common/mixins/colors");
-const fonts_1 = require("../../../../styles/common/mixins/fonts");
-const socials_1 = require("../../../common/Socials/socials");
-const link_1 = require("../../../Links/components/Link/link");
-exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
+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 { textBodySmall400 } from "../../../../styles/common/mixins/fonts";
+import { Socials as DXSocials } from "../../../common/Socials/socials";
+import { Link as DXLink } from "../../../Links/components/Link/link";
+export const AppBar = styled(MAppBar) `
   padding: 16px 0;
 
   .MuiToolbar-root {
@@ -23,7 +17,7 @@ exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
     padding: 0 16px;
   }
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     padding: 0;
 
     .MuiToolbar-root {
@@ -34,22 +28,22 @@ exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
     }
   }
 `;
-exports.Links = styled_1.default.div `
+export const Links = styled.div `
   align-items: stretch;
   display: flex;
   flex-direction: column;
   gap: 24px;
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     flex-direction: row;
   }
 `;
-exports.Link = (0, styled_1.default)(link_1.Link) `
-  ${fonts_1.textBodySmall400};
+export const Link = styled(DXLink) `
+  ${textBodySmall400};
   align-items: center;
-  color: ${colors_1.inkMain};
+  color: ${inkMain};
   display: flex;
 `;
-exports.Socials = (0, styled_1.default)(socials_1.Socials) `
+export const Socials = styled(DXSocials) `
   gap: 8px;
 `;

package/lib/components/Layout/components/Header/common/constants.d.ts

@@ -1,14 +1,9 @@
+import { AppBarProps as MAppBarProps, ToolbarProps as MToolbarProps } from "@mui/material";
 export declare const HEADER_HEIGHT = 56;
-export declare const HEADER_FADE_TIMEOUT = 0;
+export declare const APP_BAR_PROPS: Partial<MAppBarProps>;
 export declare const FADE_TRANSITION_PROPS: {
+    appear: boolean;
     timeout: number;
     unmountOnExit: boolean;
 };
-export declare const HEADER_NAVIGATION_LABEL: {
-    MORE: string;
-    SOCIALS: string;
-};
-export declare const SWITCH_TRANSITION_PROPS: {
-    timeout: number;
-    unmountOnExit: boolean;
-};
+export declare const TOOLBAR_PROPS: Partial<MToolbarProps>;

package/lib/components/Layout/components/Header/common/constants.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SWITCH_TRANSITION_PROPS = exports.HEADER_NAVIGATION_LABEL = exports.FADE_TRANSITION_PROPS = exports.HEADER_FADE_TIMEOUT = exports.HEADER_HEIGHT = void 0;
-exports.HEADER_HEIGHT = 56;
-exports.HEADER_FADE_TIMEOUT = 0;
-exports.FADE_TRANSITION_PROPS = {
-    timeout: exports.HEADER_FADE_TIMEOUT,
-    unmountOnExit: true,
-};
-exports.HEADER_NAVIGATION_LABEL = {
-    MORE: "More",
-    SOCIALS: "Follow Us",
+export const HEADER_HEIGHT = 56;
+export const APP_BAR_PROPS = {
+    elevation: 1,
+    position: "fixed",
 };
-exports.SWITCH_TRANSITION_PROPS = {
+export const FADE_TRANSITION_PROPS = {
+    appear: false,
     timeout: 0,
     unmountOnExit: true,
 };
+export const TOOLBAR_PROPS = {
+    variant: "dense",
+};

package/lib/components/Layout/components/Header/common/entities.d.ts

@@ -1,5 +1,11 @@
 import { ReactNode } from "react";
 import { Social } from "../../../../common/Socials/socials";
+import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
+export declare type Navigation = [
+    NavLinkItem[] | undefined,
+    NavLinkItem[] | undefined,
+    NavLinkItem[] | undefined
+];
 export interface SocialMedia {
     label: ReactNode;
     socials: Social[];

package/lib/components/Layout/components/Header/common/entities.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

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

@@ -1,22 +1,17 @@
+import { Breakpoint } from "@mui/material";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { SocialMedia } from "./entities";
+import { Navigation } from "./entities";
 /**
- * Returns the navigation links as configured, where the "More" menu is flattened.
- * @param links - Header navigation links.
- * @returns header navigation links, without links grouped under the "More" menu.
+ * Returns the configured menu navigation links, for the current breakpoint.
+ * @param navigation - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-export declare function flattenMoreLink(links: NavLinkItem[]): NavLinkItem[];
+export declare function getMenuNavigationLinks(navigation?: Navigation, breakpoint?: Breakpoint): NavLinkItem[];
 /**
- * Returns the navigation links as configured, all menu links specified as "flatten" are flattened, including the "More" menu.
- * @param links - Header navigation links.
- * @returns header navigation links.
+ * Returns configured navigation links, for the current breakpoint.
+ * @param navigationLinks - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-export declare function flattenNavigationLinks(links: NavLinkItem[]): NavLinkItem[];
-/**
- * Returns header navigation links with socials appended with the corresponding label "Follow Us".
- * @param links - Header navigation links.
- * @param socialMedia - Header social media.
- * @param onlySmDesktop - Media breakpoint query is "true" for small desktop only.
- * @returns header navigation links.
- */
-export declare function getHeaderNavigationLinks(links: NavLinkItem[], socialMedia: SocialMedia | undefined, onlySmDesktop: boolean): NavLinkItem[];
+export declare function getNavigationLinks(navigationLinks?: NavLinkItem[], breakpoint?: Breakpoint): NavLinkItem[];

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

@@ -1,75 +1,90 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHeaderNavigationLinks = exports.flattenNavigationLinks = exports.flattenMoreLink = void 0;
-const renderComponent_1 = require("../../../../ComponentCreator/components/RenderComponent/renderComponent");
-const entities_1 = require("../../../../Links/common/entities");
-const constants_1 = require("./constants");
 /**
- * Returns the navigation links as configured, where the "More" menu is flattened.
- * @param links - Header navigation links.
- * @returns header navigation links, without links grouped under the "More" menu.
+ * Returns the configured menu navigation links, for the current breakpoint.
+ * @param navigation - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-function flattenMoreLink(links) {
-    return links.flatMap((link) => {
-        if (link.label === constants_1.HEADER_NAVIGATION_LABEL.MORE) {
-            if (link.flatten === false) {
-                return link;
-            }
-            return link.menuItems;
-        }
-        return link;
-    });
+export function getMenuNavigationLinks(navigation, breakpoint) {
+    if (!navigation)
+        return [];
+    const navLinkItems = navigation.reduce((acc, navLinkItems) => {
+        if (!navLinkItems)
+            return acc;
+        acc.push(...navLinkItems);
+        return acc;
+    }, []);
+    return getNavigationLinks(navLinkItems, breakpoint);
 }
-exports.flattenMoreLink = flattenMoreLink;
 /**
- * Returns the navigation links as configured, all menu links specified as "flatten" are flattened, including the "More" menu.
- * @param links - Header navigation links.
- * @returns header navigation links.
+ * Returns configured navigation links, for the current breakpoint.
+ * @param navigationLinks - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-function flattenNavigationLinks(links) {
-    return links.flatMap((link) => {
-        if (link.flatten || link.label === constants_1.HEADER_NAVIGATION_LABEL.MORE) {
-            return link.menuItems;
+export function getNavigationLinks(navigationLinks, breakpoint) {
+    if (!navigationLinks)
+        return [];
+    return navigationLinks.reduce((acc, navLinkItem) => {
+        const processedNavLink = processNavLinkItem(navLinkItem, breakpoint);
+        if (processedNavLink) {
+            acc.push(...processedNavLink);
         }
-        return link;
-    });
+        return acc;
+    }, []);
 }
-exports.flattenNavigationLinks = flattenNavigationLinks;
 /**
- * Returns header navigation links with socials appended with the corresponding label "Follow Us".
- * @param links - Header navigation links.
- * @param socialMedia - Header social media.
- * @param onlySmDesktop - Media breakpoint query is "true" for small desktop only.
- * @returns header navigation links.
+ * Returns true if the link is flattened at the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns true if the link is flattened.
  */
-function getHeaderNavigationLinks(links, socialMedia, onlySmDesktop) {
-    if (onlySmDesktop) {
-        const navLinks = [...links];
-        if (socialMedia) {
-            navLinks.push({
-                label: socialMedia.label,
-                menuItems: getFollowUsMenuItems(socialMedia.socials),
-                url: "",
-            });
-        }
-        return navLinks;
-    }
-    // Return the links without the "More" or "Follow Us" menu.
-    return flattenMoreLink(links);
+function isLinkFlattened(navLinkItem, breakpoint) {
+    if (!breakpoint)
+        return false; // Default is not flattened.
+    if (!navLinkItem.flatten)
+        return false; // Default is not flattened.
+    return navLinkItem.flatten[breakpoint] === true;
 }
-exports.getHeaderNavigationLinks = getHeaderNavigationLinks;
 /**
- * Returns menu items for the "Follow Us" menu.
- * @param socials - Social configuration.
- * @returns a list of social menu items for the "Follow Us" menu.
+ * Returns true if the link is visible at the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns true if the link is visible.
  */
-function getFollowUsMenuItems(socials) {
-    return socials.map(({ Icon, label, url }) => {
-        return {
-            icon: (0, renderComponent_1.RenderComponent)(Object.assign({ Component: Icon }, { fontSize: "small" })),
-            label,
-            target: entities_1.ANCHOR_TARGET.BLANK,
-            url,
-        };
-    });
+function isLinkVisible(navLinkItem, breakpoint) {
+    if (!breakpoint)
+        return true; // Default is visible.
+    if (!navLinkItem.visible)
+        return true; // Default is visible.
+    return navLinkItem.visible[breakpoint] !== false;
+}
+/**
+ * Returns the processed navigation link item.
+ * Flattens menu items, and removes items that are not visible for the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns processed navigation link item.
+ */
+function processNavLinkItem(navLinkItem, breakpoint) {
+    if (isLinkVisible(navLinkItem, breakpoint)) {
+        const cloneLink = { ...navLinkItem };
+        // Recursively process menu items.
+        if (cloneLink.menuItems) {
+            const menuItems = getNavigationLinks(navLinkItem.menuItems, breakpoint);
+            // Remove menu items if empty.
+            if (menuItems.length === 0) {
+                delete cloneLink.menuItems;
+            }
+            else {
+                // Flatten the menu items if the navigation is flattened.
+                if (isLinkFlattened(cloneLink, breakpoint)) {
+                    return menuItems;
+                }
+                else {
+                    cloneLink.menuItems = menuItems;
+                }
+            }
+        }
+        return [cloneLink];
+    }
 }

package/lib/components/Layout/components/Header/components/Announcements/announcements.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentsConfig } from "../../../../../../config/entities";
+export interface AnnouncementsProps {
+    announcements?: ComponentsConfig;
+}
+export declare const Announcements: ({ announcements, }: AnnouncementsProps) => JSX.Element | null;

package/lib/components/Layout/components/Header/components/Announcements/announcements.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+export const Announcements = ({ announcements, }) => {
+    if (!announcements)
+        return null;
+    return React.createElement(ComponentCreator, { components: announcements, response: {} });
+};

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 export interface ActionsProps {
     children: ReactNode | ReactNode[];
-    showActions?: boolean;
 }
-export declare const Actions: ({ children, showActions, }: ActionsProps) => JSX.Element;
+export declare const Actions: ({ children }: ActionsProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.js

@@ -1,12 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { HeaderActions } from "./actions.styles";
+export const Actions = ({ children }) => {
+    return React.createElement(HeaderActions, null, children);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Actions = void 0;
-const react_1 = __importDefault(require("react"));
-const actions_styles_1 = require("./actions.styles");
-const Actions = ({ children, showActions = true, }) => {
-    return react_1.default.createElement(react_1.default.Fragment, null, showActions && react_1.default.createElement(actions_styles_1.HeaderActions, null, children));
-};
-exports.Actions = Actions;