@nulogy/components 8.5.0 → 8.7.0

package/dist/main.js

@@ -20231,7 +20231,9 @@
         hideDelay = _a$hideDelay === void 0 ? "200" : _a$hideDelay,
         openAriaLabel = _a.openAriaLabel,
         closeAriaLabel = _a.closeAriaLabel,
-        props = __rest(_a, ["trigger", "children", "showArrow", "disabled", "defaultOpen", "backgroundColor", "placement", "className", "id", "boundariesElement", "showDelay", "hideDelay", "openAriaLabel", "closeAriaLabel"]);
+        _a$openOnHover = _a.openOnHover,
+        openOnHover = _a$openOnHover === void 0 ? false : _a$openOnHover,
+        props = __rest(_a, ["trigger", "children", "showArrow", "disabled", "defaultOpen", "backgroundColor", "placement", "className", "id", "boundariesElement", "showDelay", "hideDelay", "openAriaLabel", "closeAriaLabel", "openOnHover"]);
 
     var spaceProps = getSubset(props, propTypes.space);
     var restProps = omitSubset(props, propTypes.space);
@@ -20251,9 +20253,9 @@
       popperPlacement: placement,
       defaultOpen: defaultOpen,
       showArrow: showArrow,
-      openOnClick: true,
+      openOnClick: !openOnHover,
       ref: ref,
-      openOnHover: false,
+      openOnHover: openOnHover,
       modifiers: modifiers,
       backgroundColor: backgroundColor,
       borderColor: backgroundColor,
@@ -20322,7 +20324,9 @@
     return {
       color: theme.colors[color],
       fontWeight: theme.fontWeights.medium,
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: theme.space.half,
       textDecoration: "none",
       borderColor: "transparent",
       backgroundColor: "transparent",
@@ -21063,7 +21067,9 @@
 
   var getSharedStyles$4 = function getSharedStyles() {
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: Theme.space.half,
       whiteSpace: "nowrap",
       textDecoration: "none",
       borderColor: "transparent",
@@ -21437,7 +21443,9 @@
 
   var getSharedStyles$3 = function getSharedStyles(color) {
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: Theme.space.half,
       color: themeGet("colors." + color, color)(color),
       textDecoration: "none",
       border: "none",
@@ -21648,7 +21656,9 @@
     var color = _ref.color,
         layer = _ref.layer;
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: Theme.space.half,
       color: themeGet("colors." + color, color)(color),
       textDecoration: "none",
       border: "none",
@@ -42976,14 +42986,19 @@
   var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
-      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(DropdownLink, {
+    var linkProps = {
       onClick: onItemClick,
       href: subMenuItem.href,
       to: subMenuItem.to,
-      as: subMenuItem.as
-    }, subMenuItem.name));
+      as: subMenuItem.as,
+      target: subMenuItem.openInNew ? "_blank" : undefined
+    };
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(DropdownLink, Object.assign({}, linkProps), subMenuItem.name, subMenuItem.openInNew && /*#__PURE__*/React__default['default'].createElement(Icon, {
+      size: "x2",
+      icon: "openInNew"
+    })));
   };
 
   var renderCustom$2 = function renderCustom(subMenuItem, onItemClick, _SubMenuTrigger, layer) {
@@ -43288,7 +43303,9 @@
 
   var getSharedStyles$1 = function getSharedStyles(color, theme) {
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: theme.space.half,
       color: theme.colors[color] || color,
       textDecoration: "none",
       border: "none",
@@ -43362,13 +43379,18 @@
   var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
     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(MenuLink, Object.assign({
+    var linkProps = {
       href: menuItem.href,
       to: menuItem.to,
-      as: menuItem.as
-    }, themeColorObject), menuItem.name));
+      as: menuItem.as,
+      target: menuItem.openInNew ? "_blank" : undefined
+    };
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({}, linkProps, themeColorObject), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default['default'].createElement(Icon, {
+      size: "x2",
+      icon: "openInNew"
+    })));
   };
 
   var renderCustom$1 = function renderCustom(menuItem, _themeColorObject, layer) {
@@ -43393,13 +43415,17 @@
   var getRenderFunction$1 = function getRenderFunction(menuItem) {
     if (menuItem.items) {
       return renderMenuTrigger;
-    } else if (menuItem.href || menuItem.to) {
+    }
+
+    if (menuItem.href || menuItem.to) {
       return renderMenuLink$1;
-    } else if (menuItem.render) {
+    }
+
+    if (menuItem.render) {
       return renderCustom$1;
-    } else {
-      return renderText$1;
     }
+
+    return renderText$1;
   };
 
   var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer, menuType) {
@@ -43578,7 +43604,9 @@
 
   var getSharedStyles = function getSharedStyles(theme) {
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: theme.space.half,
       textDecoration: "none",
       border: "none",
       backgroundColor: "transparent",
@@ -43644,12 +43672,17 @@
       to: menuItem.to,
       // eslint-disable-next-line no-mixed-operators
       pl: layer === 0 ? getPaddingLeft(layer) : 24 * layer + 20 + "px",
-      mb: "x1"
+      mb: "x1",
+      target: menuItem.openInNew ? "_blank" : undefined
     };
-    var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
+    var topLevel = layer === 0;
+    var MenuLink = topLevel ? TopLevelLink : DropdownLink;
     return /*#__PURE__*/React__default['default'].createElement("li", {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name));
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default['default'].createElement(Icon, {
+      size: topLevel ? "x3" : "x2",
+      icon: "openInNew"
+    })));
   };
 
   var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {

package/dist/main.module.js

@@ -20205,7 +20205,9 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       hideDelay = _a$hideDelay === void 0 ? "200" : _a$hideDelay,
       openAriaLabel = _a.openAriaLabel,
       closeAriaLabel = _a.closeAriaLabel,
-      props = __rest(_a, ["trigger", "children", "showArrow", "disabled", "defaultOpen", "backgroundColor", "placement", "className", "id", "boundariesElement", "showDelay", "hideDelay", "openAriaLabel", "closeAriaLabel"]);
+      _a$openOnHover = _a.openOnHover,
+      openOnHover = _a$openOnHover === void 0 ? false : _a$openOnHover,
+      props = __rest(_a, ["trigger", "children", "showArrow", "disabled", "defaultOpen", "backgroundColor", "placement", "className", "id", "boundariesElement", "showDelay", "hideDelay", "openAriaLabel", "closeAriaLabel", "openOnHover"]);
 
   var spaceProps = getSubset(props, propTypes.space);
   var restProps = omitSubset(props, propTypes.space);
@@ -20225,9 +20227,9 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     popperPlacement: placement,
     defaultOpen: defaultOpen,
     showArrow: showArrow,
-    openOnClick: true,
+    openOnClick: !openOnHover,
     ref: ref,
-    openOnHover: false,
+    openOnHover: openOnHover,
     modifiers: modifiers,
     backgroundColor: backgroundColor,
     borderColor: backgroundColor,
@@ -20296,7 +20298,9 @@ var DropdownLink = styled.a.withConfig({
   return {
     color: theme.colors[color],
     fontWeight: theme.fontWeights.medium,
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.half,
     textDecoration: "none",
     borderColor: "transparent",
     backgroundColor: "transparent",
@@ -21037,7 +21041,9 @@ var SubMenuLink = styled(DropdownLink).withConfig({
 
 var getSharedStyles$4 = function getSharedStyles() {
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: Theme.space.half,
     whiteSpace: "nowrap",
     textDecoration: "none",
     borderColor: "transparent",
@@ -21411,7 +21417,9 @@ MenuTrigger$1.defaultProps = {
 
 var getSharedStyles$3 = function getSharedStyles(color) {
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: Theme.space.half,
     color: themeGet("colors." + color, color)(color),
     textDecoration: "none",
     border: "none",
@@ -21622,7 +21630,9 @@ var getSharedStyles$2 = function getSharedStyles(_ref) {
   var color = _ref.color,
       layer = _ref.layer;
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: Theme.space.half,
     color: themeGet("colors." + color, color)(color),
     textDecoration: "none",
     border: "none",
@@ -42950,14 +42960,19 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
 var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
-    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-  }, /*#__PURE__*/React__default.createElement(DropdownLink, {
+  var linkProps = {
     onClick: onItemClick,
     href: subMenuItem.href,
     to: subMenuItem.to,
-    as: subMenuItem.as
-  }, subMenuItem.name));
+    as: subMenuItem.as,
+    target: subMenuItem.openInNew ? "_blank" : undefined
+  };
+  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+  }, /*#__PURE__*/React__default.createElement(DropdownLink, Object.assign({}, linkProps), subMenuItem.name, subMenuItem.openInNew && /*#__PURE__*/React__default.createElement(Icon, {
+    size: "x2",
+    icon: "openInNew"
+  })));
 };
 
 var renderCustom$2 = function renderCustom(subMenuItem, onItemClick, _SubMenuTrigger, layer) {
@@ -43262,7 +43277,9 @@ var MenuTrigger = function MenuTrigger(_a) {
 
 var getSharedStyles$1 = function getSharedStyles(color, theme) {
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.half,
     color: theme.colors[color] || color,
     textDecoration: "none",
     border: "none",
@@ -43336,13 +43353,18 @@ var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, l
 var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement("div", {
-    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({
+  var linkProps = {
     href: menuItem.href,
     to: menuItem.to,
-    as: menuItem.as
-  }, themeColorObject), menuItem.name));
+    as: menuItem.as,
+    target: menuItem.openInNew ? "_blank" : undefined
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({}, linkProps, themeColorObject), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default.createElement(Icon, {
+    size: "x2",
+    icon: "openInNew"
+  })));
 };
 
 var renderCustom$1 = function renderCustom(menuItem, _themeColorObject, layer) {
@@ -43367,13 +43389,17 @@ var renderText$1 = function renderText(menuItem, themeColorObject) {
 var getRenderFunction$1 = function getRenderFunction(menuItem) {
   if (menuItem.items) {
     return renderMenuTrigger;
-  } else if (menuItem.href || menuItem.to) {
+  }
+
+  if (menuItem.href || menuItem.to) {
     return renderMenuLink$1;
-  } else if (menuItem.render) {
+  }
+
+  if (menuItem.render) {
     return renderCustom$1;
-  } else {
-    return renderText$1;
   }
+
+  return renderText$1;
 };
 
 var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer, menuType) {
@@ -43552,7 +43578,9 @@ var getPaddingLeft = function getPaddingLeft(layer) {
 
 var getSharedStyles = function getSharedStyles(theme) {
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.half,
     textDecoration: "none",
     border: "none",
     backgroundColor: "transparent",
@@ -43618,12 +43646,17 @@ var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorOb
     to: menuItem.to,
     // eslint-disable-next-line no-mixed-operators
     pl: layer === 0 ? getPaddingLeft(layer) : 24 * layer + 20 + "px",
-    mb: "x1"
+    mb: "x1",
+    target: menuItem.openInNew ? "_blank" : undefined
   };
-  var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
+  var topLevel = layer === 0;
+  var MenuLink = topLevel ? TopLevelLink : DropdownLink;
   return /*#__PURE__*/React__default.createElement("li", {
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name));
+  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default.createElement(Icon, {
+    size: topLevel ? "x3" : "x2",
+    icon: "openInNew"
+  })));
 };
 
 var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {

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

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

package/dist/src/DropdownMenu/DropdownMenu.d.ts

@@ -14,6 +14,7 @@ declare type DropdownMenuProps = {
     boundariesElement?: string;
     openAriaLabel?: string;
     closeAriaLabel?: string;
+    openOnHover?: boolean;
 } & StyledProps;
 declare const DropdownMenu: React.FC<DropdownMenuProps>;
 export default DropdownMenu;

package/dist/src/DropdownMenu/DropdownMenu.story.d.ts

@@ -35,6 +35,12 @@ export declare const SetToDefaultOpen: {
         name: string;
     };
 };
+export declare const WithSubmenu: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
 export declare const WithVisitedLinks: () => JSX.Element;
 export declare const SetToDisabled: {
     (): JSX.Element;

package/package.json

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