@nulogy/components 8.6.0 → 8.7.1

package/dist/main.js

@@ -20324,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",
@@ -21065,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",
@@ -21439,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",
@@ -21650,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",
@@ -25764,6 +25772,8 @@
         focusedIndex = _useState[0],
         setFocusedIndex = _useState[1];
 
+    var prevFocusedIndex = React.useRef(focusedIndex);
+
     var focusPrevious = function focusPrevious() {
       setFocusedIndex(function (prevFocusedIndex) {
         return (prevFocusedIndex - 1 + refs.length) % refs.length;
@@ -25795,7 +25805,10 @@
         refs[focusedIndex].focus();
       };
 
-      updateFocused();
+      if (prevFocusedIndex.current !== focusedIndex) {
+        updateFocused();
+        prevFocusedIndex.current = focusedIndex;
+      }
     }, [focusedIndex, refs]);
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children({
       focusedIndex: focusedIndex,
@@ -42978,14 +42991,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) {
@@ -43290,7 +43308,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",
@@ -43364,13 +43384,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) {
@@ -43395,13 +43420,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) {
@@ -43580,7 +43609,9 @@
 
   var getSharedStyles = function getSharedStyles(theme) {
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: theme.space.half,
       textDecoration: "none",
       border: "none",
       backgroundColor: "transparent",
@@ -43646,12 +43677,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

@@ -20298,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",
@@ -21039,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",
@@ -21413,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",
@@ -21624,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",
@@ -25738,6 +25746,8 @@ var FocusManager = function FocusManager(_ref) {
       focusedIndex = _useState[0],
       setFocusedIndex = _useState[1];
 
+  var prevFocusedIndex = useRef(focusedIndex);
+
   var focusPrevious = function focusPrevious() {
     setFocusedIndex(function (prevFocusedIndex) {
       return (prevFocusedIndex - 1 + refs.length) % refs.length;
@@ -25769,7 +25779,10 @@ var FocusManager = function FocusManager(_ref) {
       refs[focusedIndex].focus();
     };
 
-    updateFocused();
+    if (prevFocusedIndex.current !== focusedIndex) {
+      updateFocused();
+      prevFocusedIndex.current = focusedIndex;
+    }
   }, [focusedIndex, refs]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children({
     focusedIndex: focusedIndex,
@@ -42952,14 +42965,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) {
@@ -43264,7 +43282,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",
@@ -43338,13 +43358,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) {
@@ -43369,13 +43394,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) {
@@ -43554,7 +43583,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",
@@ -43620,12 +43651,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/Radio/RadioGroup.story.d.ts

@@ -19,6 +19,11 @@ export declare const RadioGroupWithAllProps: {
     story: {
         name: string;
     };
+    parameters: {
+        chromatic: {
+            diffThreshold: number;
+        };
+    };
 };
 export declare const WithErrorMessage: {
     (): JSX.Element;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const WithSelectedValue: () => JSX.Element;
+export declare const WithOtherInteractiveElements: () => JSX.Element;
 export declare const WithContent: () => JSX.Element;
 declare const _default: {
     title: string;

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

@@ -10,6 +10,7 @@ export declare const WithADefaultSelectedIndex: {
         name: string;
     };
 };
+export declare const WithOtherInteractiveElements: () => JSX.Element;
 export declare const SetToFitted: {
     (): JSX.Element;
     story: {

package/package.json

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