@nulogy/components 8.4.3 → 8.4.4

package/dist/main.js

@@ -21754,7 +21754,7 @@
       layer: layer
     }));
   });
-  var SubMenuItemsList$1 = styled__default['default'].ul.withConfig({
+  var SubMenuItemsList$2 = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__SubMenuItemsList",
     componentId: "vqy2lk-4"
   })({
@@ -21852,7 +21852,7 @@
         linkOnClick = _ref5.linkOnClick,
         themeColorObject = _ref5.themeColorObject,
         layer = _ref5.layer;
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getSubMenuHeading$1(layer, themeColorObject && themeColorObject.textColor, menuItem.name), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList$1, null, renderMenuItems$1(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getSubMenuHeading$1(layer, themeColorObject && themeColorObject.textColor, menuItem.name), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList$2, null, renderMenuItems$1(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
   };
 
   var ThemeColorObjectPropTypes = {
@@ -43154,57 +43154,68 @@
         menuType = _a.menuType,
         props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer", "menuType"]);
 
-    return (
-      /*#__PURE__*/
-      // @ts-ignore
-      React__default['default'].createElement(NavBarDropdownMenu, Object.assign({
-        placement: getPlacement(menuType),
-        modifiers: null,
-        showArrow: true,
-        triggerTogglesMenuState: false
-      }, props, {
-        dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
-          var openMenu = _ref.openMenu,
-              closeMenu = _ref.closeMenu;
-          return {
+    var theme = styled.useTheme();
+    return /*#__PURE__*/React__default['default'].createElement(NavBarDropdownMenu, Object.assign({
+      placement: getPlacement(menuType),
+      modifiers: {
+        preventOverflow: {
+          enabled: true,
+          padding: theme.space.x1,
+          boundariesElement: "viewport"
+        }
+      },
+      showArrow: true,
+      triggerTogglesMenuState: false
+    }, props, {
+      dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
+        var openMenu = _ref.openMenu,
+            closeMenu = _ref.closeMenu;
+        return {
+          onMouseEnter: openMenu,
+          onMouseLeave: closeMenu
+        };
+      },
+      trigger: function trigger(_ref2) {
+        var closeMenu = _ref2.closeMenu,
+            openMenu = _ref2.openMenu,
+            isOpen = _ref2.isOpen;
+
+        var defaultRender = function defaultRender() {
+          return /*#__PURE__*/React__default['default'].createElement(SubMenuTriggerButton, {
+            isOpen: isOpen,
+            name: name,
             onMouseEnter: openMenu,
             onMouseLeave: closeMenu
-          };
-        },
-        trigger: function trigger(_ref2) {
-          var closeMenu = _ref2.closeMenu,
-              openMenu = _ref2.openMenu,
-              isOpen = _ref2.isOpen;
-
-          var defaultRender = function defaultRender() {
-            return /*#__PURE__*/React__default['default'].createElement(SubMenuTriggerButton, {
-              isOpen: isOpen,
-              name: name,
-              onMouseEnter: openMenu,
-              onMouseLeave: closeMenu
-            });
-          };
+          });
+        };
 
-          var triggerProps = {
-            size: "medium",
-            closeMenu: closeMenu,
-            openMenu: openMenu,
-            isOpen: isOpen,
-            defaultRender: defaultRender,
-            layer: layer
-          };
-          return _trigger ? _trigger(triggerProps) : defaultRender();
-        }
-      }), /*#__PURE__*/React__default['default'].createElement("ul", {
-        style: {
-          listStyle: "none",
-          margin: "0",
-          padding: "0"
-        }
-      }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType)))
-    );
+        var triggerProps = {
+          size: "medium",
+          closeMenu: closeMenu,
+          openMenu: openMenu,
+          isOpen: isOpen,
+          defaultRender: defaultRender,
+          layer: layer
+        };
+        return _trigger ? _trigger(triggerProps) : defaultRender();
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList$1, null, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType)));
   };
 
+  var SubMenuItemsList$1 = styled__default['default']("ul").withConfig({
+    displayName: "SubMenuTrigger__SubMenuItemsList",
+    componentId: "sc-1tg8y8b-0"
+  })(function (_ref3) {
+    var theme = _ref3.theme;
+    return {
+      listStyle: "none",
+      margin: "0",
+      padding: "0",
+      maxHeight: "calc(100vh - " + NAVBAR_HEIGHT + " - " + theme.space.x3 + ")",
+      overflowY: "auto"
+    };
+  }, addStyledProps);
+
   function getPlacement(menuType) {
     switch (menuType) {
       case "primary":
@@ -43215,8 +43226,6 @@
     }
   }
 
-  SubMenuTrigger.displayName = "SubMenuTrigger";
-
   var StyledButton = styled__default['default'].button.withConfig({
     displayName: "MenuTriggerButton__StyledButton",
     componentId: "sc-9xtkk1-0"

package/dist/main.module.js

@@ -21728,7 +21728,7 @@ var MenuText$1 = styled.li.withConfig({
     layer: layer
   }));
 });
-var SubMenuItemsList$1 = styled.ul.withConfig({
+var SubMenuItemsList$2 = styled.ul.withConfig({
   displayName: "MobileMenu__SubMenuItemsList",
   componentId: "vqy2lk-4"
 })({
@@ -21826,7 +21826,7 @@ var SubMenu$1 = function SubMenu(_ref5) {
       linkOnClick = _ref5.linkOnClick,
       themeColorObject = _ref5.themeColorObject,
       layer = _ref5.layer;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, getSubMenuHeading$1(layer, themeColorObject && themeColorObject.textColor, menuItem.name), /*#__PURE__*/React__default.createElement(SubMenuItemsList$1, null, renderMenuItems$1(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, getSubMenuHeading$1(layer, themeColorObject && themeColorObject.textColor, menuItem.name), /*#__PURE__*/React__default.createElement(SubMenuItemsList$2, null, renderMenuItems$1(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
 };
 
 var ThemeColorObjectPropTypes = {
@@ -43128,57 +43128,68 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
       menuType = _a.menuType,
       props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer", "menuType"]);
 
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    React__default.createElement(NavBarDropdownMenu, Object.assign({
-      placement: getPlacement(menuType),
-      modifiers: null,
-      showArrow: true,
-      triggerTogglesMenuState: false
-    }, props, {
-      dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
-        var openMenu = _ref.openMenu,
-            closeMenu = _ref.closeMenu;
-        return {
+  var theme = useTheme();
+  return /*#__PURE__*/React__default.createElement(NavBarDropdownMenu, Object.assign({
+    placement: getPlacement(menuType),
+    modifiers: {
+      preventOverflow: {
+        enabled: true,
+        padding: theme.space.x1,
+        boundariesElement: "viewport"
+      }
+    },
+    showArrow: true,
+    triggerTogglesMenuState: false
+  }, props, {
+    dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
+      var openMenu = _ref.openMenu,
+          closeMenu = _ref.closeMenu;
+      return {
+        onMouseEnter: openMenu,
+        onMouseLeave: closeMenu
+      };
+    },
+    trigger: function trigger(_ref2) {
+      var closeMenu = _ref2.closeMenu,
+          openMenu = _ref2.openMenu,
+          isOpen = _ref2.isOpen;
+
+      var defaultRender = function defaultRender() {
+        return /*#__PURE__*/React__default.createElement(SubMenuTriggerButton, {
+          isOpen: isOpen,
+          name: name,
           onMouseEnter: openMenu,
           onMouseLeave: closeMenu
-        };
-      },
-      trigger: function trigger(_ref2) {
-        var closeMenu = _ref2.closeMenu,
-            openMenu = _ref2.openMenu,
-            isOpen = _ref2.isOpen;
-
-        var defaultRender = function defaultRender() {
-          return /*#__PURE__*/React__default.createElement(SubMenuTriggerButton, {
-            isOpen: isOpen,
-            name: name,
-            onMouseEnter: openMenu,
-            onMouseLeave: closeMenu
-          });
-        };
+        });
+      };
 
-        var triggerProps = {
-          size: "medium",
-          closeMenu: closeMenu,
-          openMenu: openMenu,
-          isOpen: isOpen,
-          defaultRender: defaultRender,
-          layer: layer
-        };
-        return _trigger ? _trigger(triggerProps) : defaultRender();
-      }
-    }), /*#__PURE__*/React__default.createElement("ul", {
-      style: {
-        listStyle: "none",
-        margin: "0",
-        padding: "0"
-      }
-    }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType)))
-  );
+      var triggerProps = {
+        size: "medium",
+        closeMenu: closeMenu,
+        openMenu: openMenu,
+        isOpen: isOpen,
+        defaultRender: defaultRender,
+        layer: layer
+      };
+      return _trigger ? _trigger(triggerProps) : defaultRender();
+    }
+  }), /*#__PURE__*/React__default.createElement(SubMenuItemsList$1, null, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType)));
 };
 
+var SubMenuItemsList$1 = styled("ul").withConfig({
+  displayName: "SubMenuTrigger__SubMenuItemsList",
+  componentId: "sc-1tg8y8b-0"
+})(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    listStyle: "none",
+    margin: "0",
+    padding: "0",
+    maxHeight: "calc(100vh - " + NAVBAR_HEIGHT + " - " + theme.space.x3 + ")",
+    overflowY: "auto"
+  };
+}, addStyledProps);
+
 function getPlacement(menuType) {
   switch (menuType) {
     case "primary":
@@ -43189,8 +43200,6 @@ function getPlacement(menuType) {
   }
 }
 
-SubMenuTrigger.displayName = "SubMenuTrigger";
-
 var StyledButton = styled.button.withConfig({
   displayName: "MenuTriggerButton__StyledButton",
   componentId: "sc-9xtkk1-0"

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

@@ -10,8 +10,5 @@ declare type SubMenuTriggerProps = React.ComponentPropsWithRef<"button"> & {
     layer: number;
     menuType: MenuType;
 };
-declare const SubMenuTrigger: {
-    ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }: SubMenuTriggerProps): JSX.Element;
-    displayName: string;
-};
+declare const SubMenuTrigger: ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }: SubMenuTriggerProps) => JSX.Element;
 export default SubMenuTrigger;

package/package.json

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