@nulogy/components 8.4.2 → 8.4.4

package/dist/main.js

@@ -16948,55 +16948,30 @@
     })));
   };
 
-  var getMenuMargin = function getMenuMargin(placement, showArrow) {
-    var direction = String(placement).split("-")[0];
-
-    switch (direction) {
-      case "top":
-        return {
-          marginBottom: showArrow ? "4px" : null
-        };
-
-      case "right":
-        return {
-          marginLeft: showArrow ? "8px" : null,
-          marginTop: showArrow ? null : "-8px"
-        };
-
-      case "left":
-        return {
-          marginRight: showArrow ? "8px" : null,
-          marginTop: showArrow ? null : "-8px"
-        };
+  function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+  var propType = PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].array, PropTypes__default['default'].object]);
+  var createPropTypes = function createPropTypes(props) {
+    return props.reduce(function (acc, name) {
+      var _extends2;
 
-      case "bottom":
-      default:
-        return {
-          marginTop: showArrow ? "4px" : null
-        };
-    }
+      return _extends$1({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
+    }, {});
+  };
+  var propTypes = {
+    space: createPropTypes(space.propNames),
+    color: createPropTypes(color.propNames),
+    layout: createPropTypes(layout.propNames),
+    typography: createPropTypes(typography.propNames),
+    flexbox: createPropTypes(flexbox.propNames),
+    border: createPropTypes(border.propNames),
+    background: createPropTypes(background.propNames),
+    position: createPropTypes(position.propNames),
+    grid: createPropTypes(grid.propNames),
+    shadow: createPropTypes(shadow.propNames),
+    buttonStyle: createPropTypes(buttonStyle.propNames),
+    textStyle: createPropTypes(textStyle.propNames),
+    colorStyle: createPropTypes(colorStyle.propNames)
   };
-
-  var DropdownMenuContainer = styled__default['default'](Box).withConfig({
-    displayName: "DropdownMenuContainer",
-    componentId: "sc-12o3dvc-0"
-  })(color, function (_ref) {
-    var dataPlacement = _ref.dataPlacement,
-        _ref$showArrow = _ref.showArrow,
-        showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
-        _ref$backgroundColor = _ref.backgroundColor,
-        backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
-        theme = _ref.theme;
-    return Object.assign({
-      borderRadius: theme.radii.medium,
-      backgroundColor: theme.colors[backgroundColor],
-      borderTop: "1px solid  " + theme.colors[backgroundColor],
-      borderBottom: "1px solid " + theme.colors[backgroundColor],
-      boxShadow: theme.shadows.medium,
-      padding: "7px 0",
-      zIndex: "100"
-    }, getMenuMargin(dataPlacement, showArrow));
-  });
 
   /**!
    * @fileOverview Kickass library to create and place poppers near their reference elements.
@@ -17407,7 +17382,7 @@
     return obj;
   };
 
-  var _extends$1 = Object.assign || function (target) {
+  var _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -17429,7 +17404,7 @@
    * @returns {Object} ClientRect like output
    */
   function getClientRect(offsets) {
-    return _extends$1({}, offsets, {
+    return _extends({}, offsets, {
       right: offsets.left + offsets.width,
       bottom: offsets.top + offsets.height
     });
@@ -17717,7 +17692,7 @@
     };
 
     var sortedAreas = Object.keys(rects).map(function (key) {
-      return _extends$1({
+      return _extends({
         key: key
       }, rects[key], {
         area: getArea(rects[key])
@@ -18359,9 +18334,9 @@
     };
 
     // Update `data` attributes, styles and arrowStyles
-    data.attributes = _extends$1({}, attributes, data.attributes);
-    data.styles = _extends$1({}, styles, data.styles);
-    data.arrowStyles = _extends$1({}, data.offsets.arrow, data.arrowStyles);
+    data.attributes = _extends({}, attributes, data.attributes);
+    data.styles = _extends({}, styles, data.styles);
+    data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
 
     return data;
   }
@@ -18641,7 +18616,7 @@
 
         // this object contains `position`, we want to preserve it along with
         // any additional property we may add in the future
-        data.offsets.popper = _extends$1({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
+        data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
 
         data = runModifiers(data.instance.modifiers, data, 'flip');
       }
@@ -18915,7 +18890,7 @@
 
     order.forEach(function (placement) {
       var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
-      popper = _extends$1({}, popper, check[side](placement));
+      popper = _extends({}, popper, check[side](placement));
     });
 
     data.offsets.popper = popper;
@@ -18950,7 +18925,7 @@
         end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
       };
 
-      data.offsets.popper = _extends$1({}, popper, shiftOffsets[shiftvariation]);
+      data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
     }
 
     return data;
@@ -19482,7 +19457,7 @@
       this.update = debounce$1(this.update.bind(this));
 
       // with {} we create a new object with the options inside it
-      this.options = _extends$1({}, Popper.Defaults, options);
+      this.options = _extends({}, Popper.Defaults, options);
 
       // init state
       this.state = {
@@ -19497,13 +19472,13 @@
 
       // Deep merge modifiers options
       this.options.modifiers = {};
-      Object.keys(_extends$1({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
-        _this.options.modifiers[name] = _extends$1({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
+      Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
+        _this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
       });
 
       // Refactoring modifiers' list (Object => Array)
       this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
-        return _extends$1({
+        return _extends({
           name: name
         }, _this.options.modifiers[name]);
       })
@@ -20039,7 +20014,7 @@
     };
 
     var onClickEventHandlers = openOnClick ? {
-      onMouseDown: function onMouseDown() {
+      onClick: function onClick() {
         if (isOpen) {
           closePopUp(false);
         } else {
@@ -20150,31 +20125,6 @@
     closeAriaLabel: undefined
   };
 
-  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-  var propType = PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].array, PropTypes__default['default'].object]);
-  var createPropTypes = function createPropTypes(props) {
-    return props.reduce(function (acc, name) {
-      var _extends2;
-
-      return _extends({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
-    }, {});
-  };
-  var propTypes = {
-    space: createPropTypes(space.propNames),
-    color: createPropTypes(color.propNames),
-    layout: createPropTypes(layout.propNames),
-    typography: createPropTypes(typography.propNames),
-    flexbox: createPropTypes(flexbox.propNames),
-    border: createPropTypes(border.propNames),
-    background: createPropTypes(background.propNames),
-    position: createPropTypes(position.propNames),
-    grid: createPropTypes(grid.propNames),
-    shadow: createPropTypes(shadow.propNames),
-    buttonStyle: createPropTypes(buttonStyle.propNames),
-    textStyle: createPropTypes(textStyle.propNames),
-    colorStyle: createPropTypes(colorStyle.propNames)
-  };
-
   var getSubset = function getSubset(o, propObj) {
     var fields = Object.keys(propObj);
     return pick.apply(void 0, [o].concat(fields));
@@ -20201,6 +20151,56 @@
     }, {});
   };
 
+  var getMenuMargin = function getMenuMargin(placement, showArrow) {
+    var direction = String(placement).split("-")[0];
+
+    switch (direction) {
+      case "top":
+        return {
+          marginBottom: showArrow ? "4px" : null
+        };
+
+      case "right":
+        return {
+          marginLeft: showArrow ? "8px" : null,
+          marginTop: showArrow ? null : "-8px"
+        };
+
+      case "left":
+        return {
+          marginRight: showArrow ? "8px" : null,
+          marginTop: showArrow ? null : "-8px"
+        };
+
+      case "bottom":
+      default:
+        return {
+          marginTop: showArrow ? "4px" : null
+        };
+    }
+  };
+
+  var DropdownMenuContainer = styled__default['default'](Box).withConfig({
+    displayName: "DropdownMenuContainer",
+    componentId: "sc-12o3dvc-0"
+  })(color, function (_ref) {
+    var dataPlacement = _ref.dataPlacement,
+        _ref$showArrow = _ref.showArrow,
+        showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
+        _ref$backgroundColor = _ref.backgroundColor,
+        backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+        theme = _ref.theme;
+    return Object.assign({
+      borderRadius: theme.radii.medium,
+      backgroundColor: theme.colors[backgroundColor],
+      borderTop: "1px solid  " + theme.colors[backgroundColor],
+      borderBottom: "1px solid " + theme.colors[backgroundColor],
+      boxShadow: theme.shadows.medium,
+      padding: "7px 0",
+      zIndex: "100"
+    }, getMenuMargin(dataPlacement, showArrow));
+  });
+
   var DEFAULT_POPPER_MODIFIERS = {
     preventOverflow: {
       enabled: true,
@@ -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

@@ -16922,55 +16922,30 @@ var Branding = function Branding(_a) {
   })));
 };
 
-var getMenuMargin = function getMenuMargin(placement, showArrow) {
-  var direction = String(placement).split("-")[0];
-
-  switch (direction) {
-    case "top":
-      return {
-        marginBottom: showArrow ? "4px" : null
-      };
-
-    case "right":
-      return {
-        marginLeft: showArrow ? "8px" : null,
-        marginTop: showArrow ? null : "-8px"
-      };
-
-    case "left":
-      return {
-        marginRight: showArrow ? "8px" : null,
-        marginTop: showArrow ? null : "-8px"
-      };
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var propType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array, PropTypes.object]);
+var createPropTypes = function createPropTypes(props) {
+  return props.reduce(function (acc, name) {
+    var _extends2;
 
-    case "bottom":
-    default:
-      return {
-        marginTop: showArrow ? "4px" : null
-      };
-  }
+    return _extends$1({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
+  }, {});
+};
+var propTypes = {
+  space: createPropTypes(space.propNames),
+  color: createPropTypes(color.propNames),
+  layout: createPropTypes(layout.propNames),
+  typography: createPropTypes(typography.propNames),
+  flexbox: createPropTypes(flexbox.propNames),
+  border: createPropTypes(border.propNames),
+  background: createPropTypes(background.propNames),
+  position: createPropTypes(position.propNames),
+  grid: createPropTypes(grid.propNames),
+  shadow: createPropTypes(shadow.propNames),
+  buttonStyle: createPropTypes(buttonStyle.propNames),
+  textStyle: createPropTypes(textStyle.propNames),
+  colorStyle: createPropTypes(colorStyle.propNames)
 };
-
-var DropdownMenuContainer = styled(Box).withConfig({
-  displayName: "DropdownMenuContainer",
-  componentId: "sc-12o3dvc-0"
-})(color, function (_ref) {
-  var dataPlacement = _ref.dataPlacement,
-      _ref$showArrow = _ref.showArrow,
-      showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
-      _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
-      theme = _ref.theme;
-  return Object.assign({
-    borderRadius: theme.radii.medium,
-    backgroundColor: theme.colors[backgroundColor],
-    borderTop: "1px solid  " + theme.colors[backgroundColor],
-    borderBottom: "1px solid " + theme.colors[backgroundColor],
-    boxShadow: theme.shadows.medium,
-    padding: "7px 0",
-    zIndex: "100"
-  }, getMenuMargin(dataPlacement, showArrow));
-});
 
 /**!
  * @fileOverview Kickass library to create and place poppers near their reference elements.
@@ -17381,7 +17356,7 @@ var defineProperty = function (obj, key, value) {
   return obj;
 };
 
-var _extends$1 = Object.assign || function (target) {
+var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i];
 
@@ -17403,7 +17378,7 @@ var _extends$1 = Object.assign || function (target) {
  * @returns {Object} ClientRect like output
  */
 function getClientRect(offsets) {
-  return _extends$1({}, offsets, {
+  return _extends({}, offsets, {
     right: offsets.left + offsets.width,
     bottom: offsets.top + offsets.height
   });
@@ -17691,7 +17666,7 @@ function computeAutoPlacement(placement, refRect, popper, reference, boundariesE
   };
 
   var sortedAreas = Object.keys(rects).map(function (key) {
-    return _extends$1({
+    return _extends({
       key: key
     }, rects[key], {
       area: getArea(rects[key])
@@ -18333,9 +18308,9 @@ function computeStyle(data, options) {
   };
 
   // Update `data` attributes, styles and arrowStyles
-  data.attributes = _extends$1({}, attributes, data.attributes);
-  data.styles = _extends$1({}, styles, data.styles);
-  data.arrowStyles = _extends$1({}, data.offsets.arrow, data.arrowStyles);
+  data.attributes = _extends({}, attributes, data.attributes);
+  data.styles = _extends({}, styles, data.styles);
+  data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
 
   return data;
 }
@@ -18615,7 +18590,7 @@ function flip(data, options) {
 
       // this object contains `position`, we want to preserve it along with
       // any additional property we may add in the future
-      data.offsets.popper = _extends$1({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
+      data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
 
       data = runModifiers(data.instance.modifiers, data, 'flip');
     }
@@ -18889,7 +18864,7 @@ function preventOverflow(data, options) {
 
   order.forEach(function (placement) {
     var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
-    popper = _extends$1({}, popper, check[side](placement));
+    popper = _extends({}, popper, check[side](placement));
   });
 
   data.offsets.popper = popper;
@@ -18924,7 +18899,7 @@ function shift(data) {
       end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
     };
 
-    data.offsets.popper = _extends$1({}, popper, shiftOffsets[shiftvariation]);
+    data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
   }
 
   return data;
@@ -19456,7 +19431,7 @@ var Popper$3 = function () {
     this.update = debounce$1(this.update.bind(this));
 
     // with {} we create a new object with the options inside it
-    this.options = _extends$1({}, Popper.Defaults, options);
+    this.options = _extends({}, Popper.Defaults, options);
 
     // init state
     this.state = {
@@ -19471,13 +19446,13 @@ var Popper$3 = function () {
 
     // Deep merge modifiers options
     this.options.modifiers = {};
-    Object.keys(_extends$1({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
-      _this.options.modifiers[name] = _extends$1({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
+    Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
+      _this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
     });
 
     // Refactoring modifiers' list (Object => Array)
     this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
-      return _extends$1({
+      return _extends({
         name: name
       }, _this.options.modifiers[name]);
     })
@@ -20013,7 +19988,7 @@ var Popper$1 = /*#__PURE__*/React__default.forwardRef(function (_ref, popperRef)
   };
 
   var onClickEventHandlers = openOnClick ? {
-    onMouseDown: function onMouseDown() {
+    onClick: function onClick() {
       if (isOpen) {
         closePopUp(false);
       } else {
@@ -20124,31 +20099,6 @@ Popper$1.defaultProps = {
   closeAriaLabel: undefined
 };
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var propType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array, PropTypes.object]);
-var createPropTypes = function createPropTypes(props) {
-  return props.reduce(function (acc, name) {
-    var _extends2;
-
-    return _extends({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
-  }, {});
-};
-var propTypes = {
-  space: createPropTypes(space.propNames),
-  color: createPropTypes(color.propNames),
-  layout: createPropTypes(layout.propNames),
-  typography: createPropTypes(typography.propNames),
-  flexbox: createPropTypes(flexbox.propNames),
-  border: createPropTypes(border.propNames),
-  background: createPropTypes(background.propNames),
-  position: createPropTypes(position.propNames),
-  grid: createPropTypes(grid.propNames),
-  shadow: createPropTypes(shadow.propNames),
-  buttonStyle: createPropTypes(buttonStyle.propNames),
-  textStyle: createPropTypes(textStyle.propNames),
-  colorStyle: createPropTypes(colorStyle.propNames)
-};
-
 var getSubset = function getSubset(o, propObj) {
   var fields = Object.keys(propObj);
   return pick.apply(void 0, [o].concat(fields));
@@ -20175,6 +20125,56 @@ var pick = function pick(o) {
   }, {});
 };
 
+var getMenuMargin = function getMenuMargin(placement, showArrow) {
+  var direction = String(placement).split("-")[0];
+
+  switch (direction) {
+    case "top":
+      return {
+        marginBottom: showArrow ? "4px" : null
+      };
+
+    case "right":
+      return {
+        marginLeft: showArrow ? "8px" : null,
+        marginTop: showArrow ? null : "-8px"
+      };
+
+    case "left":
+      return {
+        marginRight: showArrow ? "8px" : null,
+        marginTop: showArrow ? null : "-8px"
+      };
+
+    case "bottom":
+    default:
+      return {
+        marginTop: showArrow ? "4px" : null
+      };
+  }
+};
+
+var DropdownMenuContainer = styled(Box).withConfig({
+  displayName: "DropdownMenuContainer",
+  componentId: "sc-12o3dvc-0"
+})(color, function (_ref) {
+  var dataPlacement = _ref.dataPlacement,
+      _ref$showArrow = _ref.showArrow,
+      showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+      theme = _ref.theme;
+  return Object.assign({
+    borderRadius: theme.radii.medium,
+    backgroundColor: theme.colors[backgroundColor],
+    borderTop: "1px solid  " + theme.colors[backgroundColor],
+    borderBottom: "1px solid " + theme.colors[backgroundColor],
+    boxShadow: theme.shadows.medium,
+    padding: "7px 0",
+    zIndex: "100"
+  }, getMenuMargin(dataPlacement, showArrow));
+});
+
 var DEFAULT_POPPER_MODIFIERS = {
   preventOverflow: {
     enabled: true,
@@ -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/dist/src/DropdownMenu/DropdownMenu.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { StyledProps } from "../StyledProps";
 declare type DropdownMenuProps = {
     className?: string;
     id?: string;
@@ -13,6 +14,6 @@ declare type DropdownMenuProps = {
     boundariesElement?: string;
     openAriaLabel?: string;
     closeAriaLabel?: string;
-};
+} & StyledProps;
 declare const DropdownMenu: React.FC<DropdownMenuProps>;
 export default DropdownMenu;

package/package.json

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