@nulogy/components 14.8.2 → 15.0.1

package/dist/src/BrandedNavBar/SmallNavBar.d.ts

@@ -1,39 +1,39 @@
-import React from "react";
-import { WithMenuStateProps, AcceptsMenuStateProps } from "../utils";
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export type RenderMenuButtonProps = {
-    themeColorObject: any;
-    onClick: () => void;
-    ariaExpanded: true | null;
-    isOpen: boolean;
-};
-type SmallNavBarNoStateProps = {
-    menuData?: any;
-    subtext?: string;
-    breakpointLower?: number | string;
-    width?: number;
-    themeColor?: "blue" | "white";
-    themeColorObject?: any;
-    environment?: "development" | "training";
-    navBarHeight: string;
-    logo?: React.ReactElement;
-    showNulogyLogo?: boolean;
-    renderMenuButton?: (props: RenderMenuButtonProps) => React.ReactElement;
-} & AcceptsMenuStateProps;
-declare const SmallNavBar: React.JSXElementConstructor<{
-    menuData?: any;
-    subtext?: string;
-    breakpointLower?: number | string;
-    width?: number;
-    themeColor?: "blue" | "white";
-    themeColorObject?: any;
-    environment?: "development" | "training";
-    navBarHeight: string;
-    logo?: React.ReactElement;
-    showNulogyLogo?: boolean;
-    renderMenuButton?: (props: RenderMenuButtonProps) => React.ReactElement;
-} & AcceptsMenuStateProps & WithMenuStateProps>;
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export type SmallNavBarProps = SmallNavBarNoStateProps & WithMenuStateProps;
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export default SmallNavBar;
+import React from "react";
+import { WithMenuStateProps, AcceptsMenuStateProps } from "../utils";
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export type RenderMenuButtonProps = {
+    themeColorObject: any;
+    onClick: () => void;
+    ariaExpanded: true | null;
+    isOpen: boolean;
+};
+type SmallNavBarNoStateProps = {
+    menuData?: any;
+    subtext?: string;
+    breakpointLower?: number | string;
+    width?: number;
+    themeColor?: "blue" | "white";
+    themeColorObject?: any;
+    environment?: "development" | "training";
+    navBarHeight: string;
+    logo?: React.ReactElement;
+    showNulogyLogo?: boolean;
+    renderMenuButton?: (props: RenderMenuButtonProps) => React.ReactElement;
+} & AcceptsMenuStateProps;
+declare const SmallNavBar: React.JSXElementConstructor<{
+    menuData?: any;
+    subtext?: string;
+    breakpointLower?: number | string;
+    width?: number;
+    themeColor?: "blue" | "white";
+    themeColorObject?: any;
+    environment?: "development" | "training";
+    navBarHeight: string;
+    logo?: React.ReactElement;
+    showNulogyLogo?: boolean;
+    renderMenuButton?: (props: RenderMenuButtonProps) => React.ReactElement;
+} & AcceptsMenuStateProps & WithMenuStateProps>;
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export type SmallNavBarProps = SmallNavBarNoStateProps & WithMenuStateProps;
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default SmallNavBar;

package/dist/src/BrandedNavBar/SmallNavBar.js

@@ -0,0 +1,92 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import styled, { useTheme } from "styled-components";
+import { useTranslation } from "react-i18next";
+import React, { useEffect } from "react";
+import { Icon } from "../Icon";
+import { Flex } from "../Flex";
+import NavBarSearch from "../NavBarSearch/NavBarSearch";
+import { withMenuState } from "../utils";
+import EnvironmentBanner from "../Navigation/components/EnvironmentBanner/EnvironmentBanner";
+import MobileMenu from "./MobileMenu";
+import NavBarBackground from "./NavBarBackground";
+const MobileMenuTrigger = styled.button(({ color, hoverColor, hoverBackground, theme }) => ({
+    color: theme.colors[color] || color,
+    background: "none",
+    border: "none",
+    padding: theme.space.x1,
+    marginLeft: theme.space.x1,
+    borderRadius: theme.radii.medium,
+    transition: ".2s",
+    height: theme.space.x5,
+    "&:hover, &:focus": {
+        outline: "none",
+        color: theme.colors[hoverColor] || hoverColor,
+        backgroundColor: theme.colors[hoverBackground] || hoverBackground,
+        cursor: "pointer",
+    },
+    "&:focus": {
+        boxShadow: theme.shadows.focus,
+    },
+}));
+const SmallHeader = styled.header(({ isOpen, theme }) => isOpen
+    ? {
+        position: "fixed",
+        width: "100%",
+        height: "100%",
+        zIndex: theme.zIndices.overlay,
+        overflow: "scroll",
+        top: "0",
+        left: "0",
+        right: "0",
+        bottom: "0",
+        backgroundColor: theme.colors.white,
+    }
+    : null);
+const MenuIcon = ({ isOpen }) => {
+    const { t } = useTranslation();
+    const icon = isOpen ? "close" : "menu";
+    const title = isOpen ? t("close menu") : t("open menu");
+    return React.createElement(Icon, { icon: icon, title: title });
+};
+/* eslint-disable react/destructuring-assignment */
+const SmallNavBarNoState = (_a) => {
+    var { menuData, menuState: { isOpen, toggleMenu, closeMenu }, subtext, environment, showNulogyLogo, breakpointLower = "small", themeColorObject, navBarHeight, logo, renderMenuButton } = _a, props = __rest(_a, ["menuData", "menuState", "subtext", "environment", "showNulogyLogo", "breakpointLower", "themeColorObject", "navBarHeight", "logo", "renderMenuButton"]);
+    const navRef = React.useRef(null);
+    useEffect(() => {
+        if (navRef && navRef.current) {
+            navRef.current.scrollTop = 0;
+        }
+    }, [isOpen]);
+    const { breakpoints } = useTheme();
+    const ariaExpanded = isOpen ? true : null;
+    return (React.createElement(SmallHeader, Object.assign({ ref: navRef, isOpen: isOpen, breakpointLower: breakpoints ? breakpoints[breakpointLower] : breakpointLower }, props),
+        environment && React.createElement(EnvironmentBanner, null, environment),
+        React.createElement(NavBarBackground, { backgroundColor: "white", height: navBarHeight },
+            logo,
+            React.createElement(Flex, { justifyContent: "flex-end", ml: "x3", flexGrow: 1 },
+                menuData.search && (React.createElement(Flex, { maxWidth: "18em", alignItems: "center", px: "0" },
+                    React.createElement(NavBarSearch, Object.assign({}, menuData.search)))),
+                (menuData.primaryMenu || menuData.secondaryMenu) &&
+                    (renderMenuButton ? (renderMenuButton({
+                        themeColorObject: themeColorObject,
+                        onClick: toggleMenu,
+                        ariaExpanded,
+                        isOpen,
+                    })) : (React.createElement(MobileMenuTrigger, Object.assign({}, themeColorObject, { onClick: toggleMenu, "aria-expanded": ariaExpanded }),
+                        React.createElement(MenuIcon, { isOpen: isOpen })))))),
+        isOpen && (React.createElement(MobileMenu, { themeColorObject: themeColorObject, subtext: subtext, menuData: menuData, closeMenu: closeMenu, showNulogyLogo: showNulogyLogo }))));
+};
+/* eslint-enable react/destructuring-assignment */
+const SmallNavBar = withMenuState(SmallNavBarNoState);
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default SmallNavBar;

package/dist/src/BrandedNavBar/SmallNavBar.story.d.ts

@@ -1,21 +1,21 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        viewport: {
-            defaultViewport: string;
-        };
-        chromatic: {
-            viewports: number[];
-        };
-    };
-};
-export default _default;
-export declare const _SmallNavBar: () => React.JSX.Element;
-export declare const SmallNavBarOpen: () => React.JSX.Element;
-export declare const WithALogo: () => React.JSX.Element;
-export declare const WithALogoOpen: () => React.JSX.Element;
-export declare const WithABrandLogoContainerLogo: () => React.JSX.Element;
-export declare const WithANulogyLogoAndAppName: () => React.JSX.Element;
-export declare const WithEnvironmentBanner: () => React.JSX.Element;
-export declare const WithCustomMenuButton: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};
+export default _default;
+export declare const _SmallNavBar: () => React.JSX.Element;
+export declare const SmallNavBarOpen: () => React.JSX.Element;
+export declare const WithALogo: () => React.JSX.Element;
+export declare const WithALogoOpen: () => React.JSX.Element;
+export declare const WithABrandLogoContainerLogo: () => React.JSX.Element;
+export declare const WithANulogyLogoAndAppName: () => React.JSX.Element;
+export declare const WithEnvironmentBanner: () => React.JSX.Element;
+export declare const WithCustomMenuButton: () => React.JSX.Element;

package/dist/src/BrandedNavBar/SmallNavBar.story.js

@@ -0,0 +1,89 @@
+import { select } from "@storybook/addon-knobs";
+import React from "react";
+import styled from "styled-components";
+import { Branding } from "../Branding";
+import { Button } from "../index";
+import { Link } from "../Link";
+import { legacy as theme } from "../theme/theme";
+import { Heading1 } from "../Type";
+import BrandLogoContainer from "./BrandLogoContainer";
+import { SmallNavBar } from "./index";
+const ResetStorybookView = styled.div({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    height: "100vh",
+});
+const WrappedSmallNavBar = (props) => (React.createElement(ResetStorybookView, null,
+    React.createElement(SmallNavBar, Object.assign({ navBarHeight: "56px" }, props)),
+    React.createElement(Heading1, { mt: "x3", ml: "x1" }, "Some content")));
+const primaryMenu = [
+    {
+        name: "Dashboard",
+        items: [{ name: "Items", href: "/" }, { name: "Carriers", href: "/" }, { name: "Only text submenu" }],
+    },
+    {
+        name: "Operations",
+        items: [
+            {
+                name: "Production",
+                items: [
+                    { name: "Dashboard", href: "/" },
+                    {
+                        name: "Projects",
+                        items: [
+                            { name: "Cycle Counts", href: "/" },
+                            { name: "Blind Counts", href: "/" },
+                        ],
+                    },
+                    {
+                        name: "Jobs",
+                        items: [{ name: "Job 1", href: "/" }],
+                    },
+                ],
+            },
+        ],
+    },
+    { name: "Link", href: "/" },
+    { name: "Only text" },
+];
+const secondaryMenu = [
+    {
+        name: "User@Nulogy.com",
+        items: [
+            { name: "Profile", href: "/" },
+            { name: "Preferences", href: "/" },
+            { name: "Logout", href: "/" },
+        ],
+    },
+    {
+        name: "Settings",
+        items: [
+            { name: "Permissions", href: "/" },
+            { name: "Manage account", href: "/" },
+        ],
+    },
+];
+const smallViewport = {
+    viewport: {
+        defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+    },
+    chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
+};
+export default {
+    title: "Components/BrandedNavBar/SmallNavBar",
+    parameters: smallViewport,
+};
+export const _SmallNavBar = () => React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu } });
+export const SmallNavBarOpen = () => React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, defaultOpen: true });
+export const WithALogo = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, logo: React.createElement(Link, { "aria-label": "Home", href: "/", underline: false, style: { display: "block" } },
+        React.createElement(Branding, { size: "medium", logoType: "wordmark", logoColor: "blue" })) }));
+export const WithALogoOpen = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, defaultOpen: true, logo: React.createElement(Link, { "aria-label": "Home", href: "/", underline: false, style: { display: "block" } },
+        React.createElement(Branding, { size: "medium", logoType: "wordmark", logoColor: "blue" })) }));
+export const WithABrandLogoContainerLogo = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, logo: React.createElement(BrandLogoContainer, { brandingLinkHref: "/" }) }));
+export const WithANulogyLogoAndAppName = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", showNulogyLogo: true, defaultOpen: true }));
+export const WithEnvironmentBanner = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: select("environment", ["training", "development"], "training") }));
+export const WithCustomMenuButton = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: select("environment", ["training", "development"], "training"), renderMenuButton: ({ onClick, ariaExpanded, isOpen }) => (React.createElement(Button, { onClick: onClick, "aria-expanded": ariaExpanded },
+        "Click to ",
+        isOpen ? "close" : "open")) }));

package/dist/src/BrandedNavBar/SubMenuTrigger.d.ts

@@ -1,15 +1,15 @@
-import React from "react";
-import { TriggerFunctionProps } from "./TriggerFunctionProps";
-import type { MenuType } from "./MenuTrigger";
-type SubMenuTriggerProps = React.ComponentPropsWithRef<"button"> & {
-    name?: string;
-    isOpen?: boolean;
-    onItemClick?: any;
-    menuData: any[];
-    trigger: (props: TriggerFunctionProps) => React.ReactNode;
-    layer: number;
-    menuType: MenuType;
-};
-declare const SubMenuTrigger: ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }: SubMenuTriggerProps) => React.JSX.Element;
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export default SubMenuTrigger;
+import React from "react";
+import { TriggerFunctionProps } from "./TriggerFunctionProps";
+import type { MenuType } from "./MenuTrigger";
+type SubMenuTriggerProps = React.ComponentPropsWithRef<"button"> & {
+    name?: string;
+    isOpen?: boolean;
+    onItemClick?: any;
+    menuData: any[];
+    trigger: (props: TriggerFunctionProps) => React.ReactNode;
+    layer: number;
+    menuType: MenuType;
+};
+declare const SubMenuTrigger: ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }: SubMenuTriggerProps) => React.JSX.Element;
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default SubMenuTrigger;

package/dist/src/BrandedNavBar/SubMenuTrigger.js

@@ -0,0 +1,61 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import { addStyledProps } from "../StyledProps";
+import NavBarDropdownMenu from "./NavBarDropdownMenu";
+import renderSubMenuItems from "./renderSubMenuItems";
+import SubMenuTriggerButton from "./SubMenuTriggerButton";
+import { NAVBAR_HEIGHT } from "./NavBar";
+const SubMenuTrigger = (_a) => {
+    var { menuData, name, onItemClick, trigger, layer, menuType } = _a, props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer", "menuType"]);
+    const theme = useTheme();
+    return (React.createElement(NavBarDropdownMenu, Object.assign({ placement: getPlacement(menuType), modifiers: {
+            preventOverflow: {
+                enabled: true,
+                padding: theme.space.x1,
+                boundariesElement: "viewport",
+            },
+        }, showArrow: true, triggerTogglesMenuState: false }, props, { dropdownMenuContainerEventHandlers: ({ openMenu, closeMenu }) => ({
+            onMouseEnter: openMenu,
+            onMouseLeave: closeMenu,
+        }), trigger: ({ closeMenu, openMenu, isOpen }) => {
+            const defaultRender = () => (React.createElement(SubMenuTriggerButton, { isOpen: isOpen, name: name, onMouseEnter: openMenu, onMouseLeave: closeMenu }));
+            const triggerProps = {
+                size: "medium",
+                closeMenu,
+                openMenu,
+                isOpen,
+                defaultRender,
+                layer,
+            };
+            return trigger ? trigger(triggerProps) : defaultRender();
+        } }),
+        React.createElement(SubMenuItemsList, null, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType))));
+};
+const SubMenuItemsList = styled("ul")(({ theme }) => ({
+    listStyle: "none",
+    margin: "0",
+    padding: "0",
+    maxHeight: `calc(100vh - ${NAVBAR_HEIGHT} - ${theme.space.x3})`,
+    overflowY: "auto",
+}), addStyledProps);
+function getPlacement(menuType) {
+    switch (menuType) {
+        case "primary":
+            return "right-start";
+        case "secondary":
+            return "left-start";
+    }
+}
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default SubMenuTrigger;

package/dist/src/BrandedNavBar/SubMenuTriggerButton.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-type SubMenuTriggerButtonProps = React.ComponentPropsWithRef<"button"> & {
-    name?: string;
-    isOpen: boolean;
-};
-declare const SubMenuTriggerButton: React.ForwardRefExoticComponent<Omit<SubMenuTriggerButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export default SubMenuTriggerButton;
+import React from "react";
+type SubMenuTriggerButtonProps = React.ComponentPropsWithRef<"button"> & {
+    name?: string;
+    isOpen: boolean;
+};
+declare const SubMenuTriggerButton: React.ForwardRefExoticComponent<Omit<SubMenuTriggerButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default SubMenuTriggerButton;

package/dist/src/BrandedNavBar/SubMenuTriggerButton.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import styled from "styled-components";
+import React from "react";
+import { DropdownButton } from "../DropdownMenu";
+import { Icon } from "../Icon";
+import { Flex } from "../Flex";
+const StyledButton = styled(DropdownButton)(({ isOpen, theme }) => ({
+    padding: `${theme.space.x1} ${theme.space.x1} ${theme.space.x1} 12px`,
+    backgroundColor: isOpen ? theme.colors.lightBlue : "transparent",
+    color: isOpen ? theme.colors.darkBlue : theme.colors.darkGrey,
+}));
+const SubMenuTriggerButton = React.forwardRef((_a, ref) => {
+    var { name, isOpen } = _a, props = __rest(_a, ["name", "isOpen"]);
+    return (React.createElement(StyledButton, Object.assign({ isOpen: isOpen, ref: ref }, props),
+        React.createElement(Flex, { gap: "half", justifyContent: "space-between", alignItems: "center" },
+            name,
+            React.createElement(Icon, { icon: "rightArrow", size: "20px" }))));
+});
+SubMenuTriggerButton.displayName = "SubMenuTriggerButton";
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default SubMenuTriggerButton;

package/dist/src/BrandedNavBar/TriggerFunctionProps.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export type TriggerFunctionProps = {
-    size: "small" | "medium";
-    isOpen?: boolean;
-    closeMenu?: any;
-    openMenu?: any;
-    defaultRender: () => React.ReactNode;
-    layer: number;
-};
+import React from "react";
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export type TriggerFunctionProps = {
+    size: "small" | "medium";
+    isOpen?: boolean;
+    closeMenu?: any;
+    openMenu?: any;
+    defaultRender: () => React.ReactNode;
+    layer: number;
+};

package/dist/src/BrandedNavBar/TriggerFunctionProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/BrandedNavBar/index.d.ts

@@ -1,11 +1,11 @@
-export { default as BrandedNavBar } from "./NavBar";
-export { default as MenuTrigger } from "./MenuTrigger";
-export type { MenuTriggerProps } from "./MenuTrigger";
-export { default as NavBarBackground } from "./NavBarBackground";
-export type { NavBarBackgroundProps } from "./NavBarBackground";
-export { default as BrandLogoContainer } from "./BrandLogoContainer";
-export type { BrandLogoContainerProps } from "./BrandLogoContainer";
-export { default as DesktopMenu } from "./DesktopMenu";
-export type { DesktopMenuProps } from "./DesktopMenu";
-export { default as SmallNavBar } from "./SmallNavBar";
-export type { SmallNavBarProps, RenderMenuButtonProps } from "./SmallNavBar";
+export { default as BrandedNavBar } from "./NavBar";
+export { default as MenuTrigger } from "./MenuTrigger";
+export type { MenuTriggerProps } from "./MenuTrigger";
+export { default as NavBarBackground } from "./NavBarBackground";
+export type { NavBarBackgroundProps } from "./NavBarBackground";
+export { default as BrandLogoContainer } from "./BrandLogoContainer";
+export type { BrandLogoContainerProps } from "./BrandLogoContainer";
+export { default as DesktopMenu } from "./DesktopMenu";
+export type { DesktopMenuProps } from "./DesktopMenu";
+export { default as SmallNavBar } from "./SmallNavBar";
+export type { SmallNavBarProps, RenderMenuButtonProps } from "./SmallNavBar";

package/dist/src/BrandedNavBar/index.js

@@ -0,0 +1,6 @@
+export { default as BrandedNavBar } from "./NavBar";
+export { default as MenuTrigger } from "./MenuTrigger";
+export { default as NavBarBackground } from "./NavBarBackground";
+export { default as BrandLogoContainer } from "./BrandLogoContainer";
+export { default as DesktopMenu } from "./DesktopMenu";
+export { default as SmallNavBar } from "./SmallNavBar";

package/dist/src/BrandedNavBar/isValidMenuItem.d.ts

@@ -1,2 +1,2 @@
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export default function isValidMenuItem(arr: any, idx: any, componentName: any, location: any, propFullName: any): Error;
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default function isValidMenuItem(arr: any, idx: any, componentName: any, location: any, propFullName: any): Error;

package/dist/src/BrandedNavBar/isValidMenuItem.js

@@ -0,0 +1,19 @@
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default function isValidMenuItem(arr, idx, componentName, location, propFullName) {
+    const obj = arr[idx];
+    if (typeof obj !== "object") {
+        throw new Error(`Invalid ${propFullName} of type \`${typeof obj}\` supplied to \`${componentName}\`, expected \`object\``);
+    }
+    let numberOfDefiningKeys = 0;
+    const definingKeys = ["href", "items", "render"];
+    const keys = Object.keys(obj);
+    for (let i = 0; i < keys.length; i += 1) {
+        if (definingKeys.includes(keys[i])) {
+            numberOfDefiningKeys += 1;
+        }
+    }
+    if (numberOfDefiningKeys > 1) {
+        return new Error(`Invalid set of keys for Menu Item with name \`${obj.name}\` supplied to \`${componentName}\`. Include a name key and optionally ONE of ${definingKeys}`);
+    }
+    return null;
+}

package/dist/src/BrandedNavBar/renderSubMenuItems.d.ts

@@ -1,3 +1,3 @@
-declare const renderSubMenuItems: (subMenuItems: any, onItemClick: any, SubMenuTrigger: any, layer: any, menuType: any) => any;
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export default renderSubMenuItems;
+declare const renderSubMenuItems: (subMenuItems: any, onItemClick: any, SubMenuTrigger: any, layer: any, menuType: any) => any;
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default renderSubMenuItems;

package/dist/src/BrandedNavBar/renderSubMenuItems.js

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+import { DropdownText, DropdownLink } from "../DropdownMenu";
+import { Icon } from "../Icon";
+const renderSubMenuTrigger = (subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) => {
+    var _a;
+    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name },
+        React.createElement(SubMenuTrigger, { onItemClick: onItemClick, name: subMenuItem.name, menuData: subMenuItem.items, trigger: subMenuItem.trigger, layer: layer, menuType: menuType })));
+};
+const renderSubMenuLink = (subMenuItem, onItemClick) => {
+    var _a;
+    const linkProps = {
+        onClick: onItemClick,
+        href: subMenuItem.href,
+        to: subMenuItem.to,
+        as: subMenuItem.as,
+        target: subMenuItem.openInNew ? "_blank" : undefined,
+    };
+    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name },
+        React.createElement(DropdownLink, Object.assign({}, linkProps),
+            subMenuItem.name,
+            subMenuItem.openInNew && React.createElement(Icon, { size: "x2", icon: "openInNew" }))));
+};
+const renderCustom = (subMenuItem, onItemClick, _SubMenuTrigger, layer) => {
+    var _a;
+    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name }, subMenuItem.render({ size: "medium", onItemClick, layer })));
+};
+const renderText = (subMenuItem) => {
+    var _a;
+    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name },
+        React.createElement(DropdownText, null, subMenuItem.name)));
+};
+const getRenderFunction = (subMenuItem) => {
+    if (subMenuItem.items) {
+        return renderSubMenuTrigger;
+    }
+    else if (subMenuItem.href || subMenuItem.to) {
+        return renderSubMenuLink;
+    }
+    else if (subMenuItem.render) {
+        return renderCustom;
+    }
+    else {
+        return renderText;
+    }
+};
+const renderSubMenuItems = (subMenuItems, onItemClick, SubMenuTrigger, layer, menuType) => subMenuItems.map((subMenuItem) => getRenderFunction(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType));
+const NoWrapLi = styled.li(() => ({
+    whiteSpace: "nowrap",
+}));
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default renderSubMenuItems;

package/dist/src/Branding/Branding.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-type BrandingProps = {
-    logoType?: "wordmark" | "lettermark";
-    logoColor?: "blue" | "white";
-    size?: "small" | "medium" | "large";
-    alignment?: "left" | "center" | "right";
-    withLine?: boolean;
-    subtext?: string;
-    className?: string;
-};
-declare const Branding: ({ logoType, subtext, size, alignment, withLine, logoColor, className, ...props }: BrandingProps) => React.JSX.Element;
-export default Branding;
+import React from "react";
+type BrandingProps = {
+    logoType?: "wordmark" | "lettermark";
+    logoColor?: "blue" | "white";
+    size?: "small" | "medium" | "large";
+    alignment?: "left" | "center" | "right";
+    withLine?: boolean;
+    subtext?: string;
+    className?: string;
+};
+declare const Branding: ({ logoType, subtext, size, alignment, withLine, logoColor, className, ...props }: BrandingProps) => React.JSX.Element;
+export default Branding;