@nulogy/components 8.1.3 → 8.1.4

package/dist/main.js

@@ -42728,7 +42728,7 @@
       toggleMenu: PropTypes__default['default'].func
     }).isRequired,
     showArrow: PropTypes__default['default'].bool,
-    placement: PropTypes__default['default'].oneOf(["bottom-start", "right-start"]),
+    placement: PropTypes__default['default'].oneOf(["bottom-start", "right-start", "left-start"]),
     modifiers: PropTypes__default['default'].shape({}),
     triggerTogglesMenuState: PropTypes__default['default'].bool,
     dropdownMenuContainerEventHandlers: PropTypes__default['default'].func
@@ -42748,7 +42748,7 @@
     hideDelay: "100"
   };
 
-  var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer) {
+  var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) {
     var _a;
 
     return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
@@ -42758,7 +42758,8 @@
       name: subMenuItem.name,
       menuData: subMenuItem.items,
       trigger: subMenuItem.trigger,
-      layer: layer
+      layer: layer,
+      menuType: menuType
     }));
   };
 
@@ -42807,9 +42808,9 @@
     }
   };
 
-  var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer) {
+  var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer, menuType) {
     return subMenuItems.map(function (subMenuItem) {
-      return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer);
+      return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType);
     });
   };
 
@@ -42860,15 +42861,16 @@
         onItemClick = _a.onItemClick,
         _trigger = _a.trigger,
         layer = _a.layer,
-        props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer"]);
+        menuType = _a.menuType,
+        props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer", "menuType"]);
 
     return (
       /*#__PURE__*/
       // @ts-ignore
       React__default['default'].createElement(NavBarDropdownMenu, Object.assign({
-        placement: "right-start",
+        placement: getPlacement(menuType),
         modifiers: null,
-        showArrow: false,
+        showArrow: true,
         triggerTogglesMenuState: false
       }, props, {
         dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
@@ -42909,10 +42911,20 @@
           margin: "0",
           padding: "0"
         }
-      }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1)))
+      }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType)))
     );
   };
 
+  function getPlacement(menuType) {
+    switch (menuType) {
+      case "primary":
+        return "right-start";
+
+      case "secondary":
+        return "left-start";
+    }
+  }
+
   SubMenuTrigger.displayName = "SubMenuTrigger";
 
   var StyledButton = styled__default['default'].button.withConfig({
@@ -42990,7 +43002,8 @@
         ariaLabel = _a["aria-label"],
         _trigger = _a.trigger,
         layer = _a.layer,
-        props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer"]);
+        menuType = _a.menuType,
+        props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer", "menuType"]);
 
     var dropdownMinWidth = "auto";
 
@@ -43049,7 +43062,7 @@
         }, renderSubMenuItems(menuData, function (e) {
           closeMenu(e);
           e.stopPropagation();
-        }, SubMenuTrigger, layer + 1));
+        }, SubMenuTrigger, layer + 1, menuType));
       })
     );
   };
@@ -43112,12 +43125,13 @@
     alignItems: "center"
   });
 
-  var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer) {
+  var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer, menuType) {
     var _a;
 
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(MenuTrigger, Object.assign({
+      menuType: menuType,
       name: menuItem.name,
       "aria-label": menuItem.ariaLabel,
       menuData: menuItem.items,
@@ -43169,19 +43183,20 @@
     }
   };
 
-  var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer) {
-    return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer);
+  var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer, menuType) {
+    return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer, menuType);
   };
 
   var BaseDesktopMenu = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
     var menuData = _a.menuData,
+        menuType = _a.menuType,
         themeColorObject = _a.themeColorObject,
-        props = __rest(_a, ["menuData", "themeColorObject"]);
+        props = __rest(_a, ["menuData", "menuType", "themeColorObject"]);
 
     return /*#__PURE__*/React__default['default'].createElement(Nav$1, Object.assign({}, props, {
       ref: ref
     }), menuData.map(function (menuItem) {
-      return renderMenuItem(menuItem, themeColorObject, 0);
+      return renderMenuItem(menuItem, themeColorObject, 0, menuType);
     }));
   });
   var DesktopMenu = styled__default['default'](BaseDesktopMenu).withConfig({
@@ -43748,6 +43763,7 @@
     }, menuData.primaryMenu && /*#__PURE__*/React__default['default'].createElement(DesktopMenu, {
       themeColorObject: themeColorObject,
       "aria-label": t("primary navigation"),
+      menuType: "primary",
       menuData: menuData.primaryMenu
     }), /*#__PURE__*/React__default['default'].createElement(Flex, {
       justifySelf: "flex-end",
@@ -43755,6 +43771,7 @@
     }, menuData.secondaryMenu && /*#__PURE__*/React__default['default'].createElement(DesktopMenu, {
       themeColorObject: themeColorObject,
       "aria-label": t("secondary navigation"),
+      menuType: "secondary",
       menuData: menuData.secondaryMenu
     }), showNulogyLogo && /*#__PURE__*/React__default['default'].createElement(Box, {
       pl: "x3"

package/dist/main.module.js

@@ -42702,7 +42702,7 @@ StatelessNavBarDropdownMenu.propTypes = {
     toggleMenu: PropTypes.func
   }).isRequired,
   showArrow: PropTypes.bool,
-  placement: PropTypes.oneOf(["bottom-start", "right-start"]),
+  placement: PropTypes.oneOf(["bottom-start", "right-start", "left-start"]),
   modifiers: PropTypes.shape({}),
   triggerTogglesMenuState: PropTypes.bool,
   dropdownMenuContainerEventHandlers: PropTypes.func
@@ -42722,7 +42722,7 @@ NavBarDropdownMenu.defaultProps = {
   hideDelay: "100"
 };
 
-var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer) {
+var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) {
   var _a;
 
   return /*#__PURE__*/React__default.createElement(NoWrapLi, {
@@ -42732,7 +42732,8 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
     name: subMenuItem.name,
     menuData: subMenuItem.items,
     trigger: subMenuItem.trigger,
-    layer: layer
+    layer: layer,
+    menuType: menuType
   }));
 };
 
@@ -42781,9 +42782,9 @@ var getRenderFunction$2 = function getRenderFunction(subMenuItem) {
   }
 };
 
-var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer) {
+var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer, menuType) {
   return subMenuItems.map(function (subMenuItem) {
-    return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer);
+    return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType);
   });
 };
 
@@ -42834,15 +42835,16 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
       onItemClick = _a.onItemClick,
       _trigger = _a.trigger,
       layer = _a.layer,
-      props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer"]);
+      menuType = _a.menuType,
+      props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer", "menuType"]);
 
   return (
     /*#__PURE__*/
     // @ts-ignore
     React__default.createElement(NavBarDropdownMenu, Object.assign({
-      placement: "right-start",
+      placement: getPlacement(menuType),
       modifiers: null,
-      showArrow: false,
+      showArrow: true,
       triggerTogglesMenuState: false
     }, props, {
       dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
@@ -42883,10 +42885,20 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
         margin: "0",
         padding: "0"
       }
-    }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1)))
+    }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType)))
   );
 };
 
+function getPlacement(menuType) {
+  switch (menuType) {
+    case "primary":
+      return "right-start";
+
+    case "secondary":
+      return "left-start";
+  }
+}
+
 SubMenuTrigger.displayName = "SubMenuTrigger";
 
 var StyledButton = styled.button.withConfig({
@@ -42964,7 +42976,8 @@ var MenuTrigger = function MenuTrigger(_a) {
       ariaLabel = _a["aria-label"],
       _trigger = _a.trigger,
       layer = _a.layer,
-      props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer"]);
+      menuType = _a.menuType,
+      props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer", "menuType"]);
 
   var dropdownMinWidth = "auto";
 
@@ -43023,7 +43036,7 @@ var MenuTrigger = function MenuTrigger(_a) {
       }, renderSubMenuItems(menuData, function (e) {
         closeMenu(e);
         e.stopPropagation();
-      }, SubMenuTrigger, layer + 1));
+      }, SubMenuTrigger, layer + 1, menuType));
     })
   );
 };
@@ -43086,12 +43099,13 @@ var Nav$1 = styled.nav.withConfig({
   alignItems: "center"
 });
 
-var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer) {
+var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer, menuType) {
   var _a;
 
   return /*#__PURE__*/React__default.createElement("div", {
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, /*#__PURE__*/React__default.createElement(MenuTrigger, Object.assign({
+    menuType: menuType,
     name: menuItem.name,
     "aria-label": menuItem.ariaLabel,
     menuData: menuItem.items,
@@ -43143,19 +43157,20 @@ var getRenderFunction$1 = function getRenderFunction(menuItem) {
   }
 };
 
-var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer) {
-  return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer);
+var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer, menuType) {
+  return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer, menuType);
 };
 
 var BaseDesktopMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   var menuData = _a.menuData,
+      menuType = _a.menuType,
       themeColorObject = _a.themeColorObject,
-      props = __rest(_a, ["menuData", "themeColorObject"]);
+      props = __rest(_a, ["menuData", "menuType", "themeColorObject"]);
 
   return /*#__PURE__*/React__default.createElement(Nav$1, Object.assign({}, props, {
     ref: ref
   }), menuData.map(function (menuItem) {
-    return renderMenuItem(menuItem, themeColorObject, 0);
+    return renderMenuItem(menuItem, themeColorObject, 0, menuType);
   }));
 });
 var DesktopMenu = styled(BaseDesktopMenu).withConfig({
@@ -43722,6 +43737,7 @@ var MediumNavBar = function MediumNavBar(_a) {
   }, menuData.primaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu, {
     themeColorObject: themeColorObject,
     "aria-label": t("primary navigation"),
+    menuType: "primary",
     menuData: menuData.primaryMenu
   }), /*#__PURE__*/React__default.createElement(Flex, {
     justifySelf: "flex-end",
@@ -43729,6 +43745,7 @@ var MediumNavBar = function MediumNavBar(_a) {
   }, menuData.secondaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu, {
     themeColorObject: themeColorObject,
     "aria-label": t("secondary navigation"),
+    menuType: "secondary",
     menuData: menuData.secondaryMenu
   }), showNulogyLogo && /*#__PURE__*/React__default.createElement(Box, {
     pl: "x3"

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

@@ -1,6 +1,8 @@
 import React from "react";
+import type { MenuType } from "./MenuTrigger";
 export declare type DesktopMenuProps = {
     menuData: any[];
+    menuType: MenuType;
     themeColorObject: any;
 };
 declare const DesktopMenu: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DesktopMenuProps & React.RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { TriggerFunctionProps } from "./TriggerFunctionProps";
+export declare type MenuType = "primary" | "secondary";
 export declare type MenuTriggerProps = {
     name?: string;
     "aria-label"?: string;
@@ -9,6 +10,7 @@ export declare type MenuTriggerProps = {
     menuData?: any[];
     trigger?: (props: TriggerFunctionProps) => React.ReactNode;
     layer: number;
+    menuType: MenuType;
 };
-declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, ...props }: MenuTriggerProps) => JSX.Element;
+declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType, ...props }: MenuTriggerProps) => JSX.Element;
 export default MenuTrigger;

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

@@ -39,6 +39,7 @@ export declare const WithIcon: {
         name: string;
     };
 };
+export declare const WithPrimaryAndSecondarySubMenus: () => JSX.Element;
 export declare const WithReactRouter: {
     (): JSX.Element;
     story: {

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

@@ -10,7 +10,7 @@ declare type NavBarDropdownMenuProps = {
     trigger?: Function;
     menuState?: MenuState;
     showArrow?: boolean;
-    placement?: "bottom-start" | "right-start";
+    placement?: "bottom-start" | "right-start" | "left-start";
     modifiers?: any;
     triggerTogglesMenuState?: boolean;
     dropdownMenuContainerEventHandlers?: Function;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { TriggerFunctionProps } from "./TriggerFunctionProps";
+import type { MenuType } from "./MenuTrigger";
 declare type SubMenuTriggerProps = React.ComponentPropsWithRef<"button"> & {
     name?: string;
     isOpen?: boolean;
@@ -7,9 +8,10 @@ declare type SubMenuTriggerProps = React.ComponentPropsWithRef<"button"> & {
     menuData: any[];
     trigger: (props: TriggerFunctionProps) => React.ReactNode;
     layer: number;
+    menuType: MenuType;
 };
 declare const SubMenuTrigger: {
-    ({ menuData, name, onItemClick, trigger, layer, ...props }: SubMenuTriggerProps): JSX.Element;
+    ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }: SubMenuTriggerProps): JSX.Element;
     displayName: string;
 };
 export default SubMenuTrigger;

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

@@ -1,2 +1,2 @@
-declare const renderSubMenuItems: (subMenuItems: any, onItemClick: any, SubMenuTrigger: any, layer: any) => any;
+declare const renderSubMenuItems: (subMenuItems: any, onItemClick: any, SubMenuTrigger: any, layer: any, menuType: any) => any;
 export default renderSubMenuItems;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.1.3",
+  "version": "8.1.4",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {