@telus-uds/components-web 4.17.0 → 4.18.0

package/lib/esm/Card/Card.js

@@ -11,6 +11,63 @@ import ConditionalWrapper from '../shared/ConditionalWrapper';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const GRID_COLUMNS = 12;
+const POSITION = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  NONE: 'none'
+};
+
+/**
+ * Helper function to get StackView tokens
+ * @param {Object} columnFlex - Column flex properties
+ * @param {string} contentStackAlign - Alignment value for content stack
+ * @returns {Object} StackView tokens object
+ */
+const getStackViewTokens = (columnFlex, contentStackAlign) => ({
+  ...columnFlex,
+  alignItems: contentStackAlign
+});
+
+/**
+ * Helper function to get CardContent tokens
+ * @param {Object} baseTokens - Base tokens to spread
+ * @param {Object} options - Options object
+ * @param {boolean} options.backgroundImage - Whether background image is present
+ * @param {string} options.fullBleedContentChildrenAlign - Alignment for full bleed content children
+ * @param {boolean} options.useTransparentBackground - Whether to use transparent background when no backgroundImage
+ * @returns {Object} CardContent tokens object
+ */
+const getCardContentTokens = function (baseTokens) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    backgroundImage,
+    fullBleedContentChildrenAlign,
+    useTransparentBackground
+  } = options;
+
+  // Determine background color based on conditions
+  let backgroundColorOverride = {};
+  if (useTransparentBackground) {
+    if (!backgroundImage) {
+      backgroundColorOverride = {
+        backgroundColor: 'transparent'
+      };
+    }
+  } else if (backgroundImage) {
+    backgroundColorOverride = {
+      backgroundColor: 'transparent'
+    };
+  }
+  return {
+    ...baseTokens,
+    ...backgroundColorOverride,
+    ...(fullBleedContentChildrenAlign && {
+      alignSelf: fullBleedContentChildrenAlign
+    })
+  };
+};
 
 /**
  * A basic card component, unstyled by default.
@@ -69,6 +126,59 @@ const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
     alignSelf
   };
 });
+const InteractiveCardWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Card__InteractiveCardWrapper",
+  componentId: "components-web__sc-1elbtwd-1"
+})(() => ({
+  position: 'relative',
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column'
+}));
+const InteractiveOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Card__InteractiveOverlay",
+  componentId: "components-web__sc-1elbtwd-2"
+})(_ref2 => {
+  let {
+    overlayOpacity,
+    borderRadius
+  } = _ref2;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: `rgba(0, 0, 0, ${overlayOpacity || 0})`,
+    borderRadius,
+    pointerEvents: 'none',
+    transition: 'background-color 0.2s ease',
+    zIndex: 1
+  };
+});
+const FocusBorder = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Card__FocusBorder",
+  componentId: "components-web__sc-1elbtwd-3"
+})(_ref3 => {
+  let {
+    borderWidth,
+    borderColor,
+    borderRadius
+  } = _ref3;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    borderStyle: 'solid',
+    pointerEvents: 'none',
+    zIndex: 2
+  };
+});
 const Card = /*#__PURE__*/React.forwardRef(function () {
   let {
     children,
@@ -122,16 +232,57 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   const {
     borderRadius
   } = allThemeTokens;
-  const cardBaseBorderWidth = allThemeTokens.borderWidth;
-  const pressableBorderWidth = useThemeTokens('Card', {}, {
+
+  // Interactive cards: merge variants for CardBase (outer container)
+  // The outer variant takes priority over interactiveCard.variant for the style property
+  // This ensures the gradient is only applied to CardBase, not PressableCardBase and avoid duplication
+  const interactiveStyle = interactiveCard?.variant?.style;
+  const outerStyle = variant?.style;
+  const mergedVariant = {
+    ...variant,
+    style: outerStyle || interactiveStyle
+  };
+
+  // Interactive cards: build configuration for PressableCardBase
+  // This determines which style to use for interactive states (hover, pressed, etc.)
+  // without causing gradient duplication
+  let interactiveCardConfig = {};
+  if (interactiveCard?.body) {
+    const styleToUse = interactiveCard?.variant?.style || variant?.style;
+    const {
+      style,
+      ...otherVariantProps
+    } = interactiveCard?.variant || {};
+    interactiveCardConfig = {
+      interactive: true,
+      ...(styleToUse && {
+        style: styleToUse
+      }),
+      ...otherVariantProps
+    };
+  }
+  const getThemeTokensBase = useThemeTokensCallback('Card', interactiveCard?.tokens, interactiveCardConfig);
+
+  // Wrap getThemeTokens to remove gradient from resolved tokens
+  // PressableCardBase calls this function with pressableState (hover, pressed, etc.)
+  // We intercept the resolved tokens and remove gradient properties to prevent duplication
+  // since the gradient should only appear on CardBase (outer container)
+  const getThemeTokens = React.useCallback(pressableState => {
+    const resolvedTokens = getThemeTokensBase(pressableState);
+    const {
+      gradient,
+      backgroundGradient,
+      ...tokensWithoutGradient
+    } = resolvedTokens;
+    return tokensWithoutGradient;
+  }, [getThemeTokensBase]);
+  const getFocusBorderTokens = useThemeTokensCallback('Card', {}, {
     ...variant,
     interactive: true
-  }).borderWidth;
-  const marginOffset = `${-(cardBaseBorderWidth + pressableBorderWidth) / 2}px`;
-  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
-    interactive: true,
-    ...(interactiveCard?.variant || {})
   });
+
+  // Remove backgroundColor from tokens for full bleed interactive content
+  // to prevent background from covering the full bleed image
   const {
     backgroundColor: _,
     ...tokensWithoutBg
@@ -140,17 +291,19 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     ...variant,
     interactive: true
   });
-  const getFullBleedInteractiveCardTokens = cardState => ({
-    ...getFullBleedInteractiveTokens(cardState),
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-    // Suppress gradient if interactiveCard.body exists to avoid border duplication
-    ...(interactiveCard?.body ? {
-      gradient: undefined
-    } : {})
-  });
+  const getFullBleedInteractiveCardTokens = cardState => {
+    return {
+      ...getFullBleedInteractiveTokens(cardState),
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+      borderWidth: 0,
+      ...(interactiveCard?.body ? {
+        gradient: undefined
+      } : {})
+    };
+  };
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
 
@@ -159,12 +312,15 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   // pass as props to ConditionalWrapper
   const imgColCurrentViewport = useResponsiveProp(imgCol);
   const maxCol = GRID_COLUMNS;
-  const fullBleedImageWidth = `${imgColCurrentViewport / maxCol * 100}%`;
-  const adaptiveContentWidth = `${(maxCol - imgColCurrentViewport) / maxCol * 100}%`;
-  const isImageWidthAdjustable = imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right');
+  const hasValidImgCol = imgCol && imgColCurrentViewport !== undefined && !Number.isNaN(imgColCurrentViewport);
+  const fullBleedImageWidth = hasValidImgCol ? `${imgColCurrentViewport / maxCol * 100}%` : undefined;
+  const adaptiveContentWidth = hasValidImgCol ? `${(maxCol - imgColCurrentViewport) / maxCol * 100}%` : undefined;
+  const isImageWidthAdjustable = hasValidImgCol && (fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT);
   const contentWrapperStyleProps = {
-    width: adaptiveContentWidth,
-    ...(imgColCurrentViewport >= maxCol && {
+    ...(hasValidImgCol && {
+      width: adaptiveContentWidth
+    }),
+    ...(hasValidImgCol && imgColCurrentViewport >= maxCol && {
       display: 'none'
     }),
     ...(fullBleedContentChildrenAlign && {
@@ -176,28 +332,32 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     flexShrink: 1,
     justifyContent: 'space-between'
   };
-  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref2 => {
-    let [key] = _ref2;
-    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage ? ['backgroundColor'] : [])].includes(key);
+  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref4 => {
+    let [key] = _ref4;
+    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage && interactiveCard?.body ? ['backgroundColor'] : [])].includes(key);
   }));
+  const isHorizontalFullBleed = fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT;
+  const isVerticalFullBleed = fullBleedContentPosition === POSITION.TOP || fullBleedContentPosition === POSITION.BOTTOM;
   const imageWrapperStyleProps = {
-    width: fullBleedImageWidth,
-    ...(imgColCurrentViewport >= maxCol && {
+    ...(isImageWidthAdjustable && {
+      width: fullBleedImageWidth
+    }),
+    ...(isImageWidthAdjustable && imgColCurrentViewport >= maxCol && {
       borderRadius,
       overflow: 'hidden'
     }),
-    ...(imgColCurrentViewport === 0 && {
+    ...(isImageWidthAdjustable && imgColCurrentViewport === 0 && {
       display: 'none'
     })
   };
   return /*#__PURE__*/_jsxs(CardBase, {
     ref: ref,
     variant: {
-      ...variant,
+      ...(interactiveCard?.body ? mergedVariant : variant),
       padding: 'custom'
     },
     tokens: cardBaseTokens,
-    backgroundImage: backgroundImage,
+    backgroundImage: !interactiveCard?.body && backgroundImage,
     onPress: fullBleedInteractive ? undefined : onPress,
     ...(interactiveCard?.selectionType && {
       interactiveCard,
@@ -214,6 +374,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
         ref: ref,
         tokens: getThemeTokens,
         dataSet: dataSet,
+        backgroundImage: backgroundImage,
         onPress: onPress,
         href: interactiveCard?.href,
         hrefAttrs: interactiveCard?.hrefAttrs,
@@ -221,96 +382,95 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
         children: cardState => /*#__PURE__*/_jsx(_Fragment, {
           children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
         })
-      }), children && fullBleedContentPosition === 'none' && !fullBleedInteractive ? /*#__PURE__*/_jsx(CardContent, {
+      }), children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive ? /*#__PURE__*/_jsx(CardContent, {
         tokens: tokens,
         variant: variant,
         withFooter: hasFooter,
         children: children
       }) : null]
-    }) : null, fullBleedInteractive ? /*#__PURE__*/_jsx("div", {
-      style: {
-        marginTop: marginOffset,
-        marginBottom: marginOffset,
-        marginLeft: marginOffset,
-        marginRight: marginOffset
-      },
-      children: /*#__PURE__*/_jsx(PressableCardBase, {
-        ref: ref,
-        tokens: getFullBleedInteractiveCardTokens,
-        dataSet: dataSet,
-        onPress: effectiveFullBleedOnPress,
-        href: effectiveFullBleedHref,
-        hrefAttrs: effectiveFullBleedHrefAttrs,
-        ...selectProps(restProps),
-        children: cardState => /*#__PURE__*/_jsxs(StackView, {
-          direction: contentStackDirection,
-          tokens: {
-            ...columnFlex,
-            alignItems: contentStackAlign
-          },
-          space: 0,
-          children: [children ? /*#__PURE__*/_jsx(ConditionalWrapper, {
-            WrapperComponent: DynamicWidthContainer,
-            wrapperProps: contentWrapperStyleProps,
-            condition: isImageWidthAdjustable,
-            children: /*#__PURE__*/_jsx(CardContent, {
-              tokens: {
-                ...tokensWithoutBg,
-                ...(backgroundImage ? {} : {
-                  backgroundColor: 'transparent'
-                }),
-                ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
-                  alignSelf: fullBleedContentChildrenAlign
-                })
-              },
-              variant: variant,
-              withFooter: hasFooter,
-              children: children
-            })
-          }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(ConditionalWrapper, {
-            WrapperComponent: DynamicWidthContainer,
-            wrapperProps: imageWrapperStyleProps,
-            condition: isImageWidthAdjustable,
-            children: /*#__PURE__*/_jsx(FullBleedContent, {
-              borderRadius: fullBleedBorderRadius,
-              ...fullBleedContentPropsClean,
-              position: fullBleedContentPosition,
-              cardState: cardState
-            })
+    }) : null, fullBleedInteractive ? /*#__PURE__*/_jsx(PressableCardBase, {
+      ref: ref,
+      tokens: getFullBleedInteractiveCardTokens,
+      dataSet: dataSet,
+      onPress: effectiveFullBleedOnPress,
+      href: effectiveFullBleedHref,
+      hrefAttrs: effectiveFullBleedHrefAttrs,
+      ...selectProps(restProps),
+      children: cardState => {
+        let overlayOpacity = 0;
+        if (cardState.pressed) {
+          overlayOpacity = 0.2;
+        } else if (cardState.hover) {
+          overlayOpacity = 0.1;
+        }
+        const focusTokens = getFocusBorderTokens(cardState);
+        const showFocusBorder = cardState.focus && focusTokens.borderWidth > 0;
+        return /*#__PURE__*/_jsxs(InteractiveCardWrapper, {
+          children: [/*#__PURE__*/_jsxs(StackView, {
+            direction: contentStackDirection,
+            tokens: getStackViewTokens(columnFlex, contentStackAlign),
+            space: 0,
+            children: [children ? /*#__PURE__*/_jsx(ConditionalWrapper, {
+              WrapperComponent: DynamicWidthContainer,
+              wrapperProps: contentWrapperStyleProps,
+              condition: isImageWidthAdjustable,
+              children: /*#__PURE__*/_jsx(CardContent, {
+                tokens: {
+                  ...getCardContentTokens(tokensWithoutBg, {
+                    backgroundImage,
+                    fullBleedContentChildrenAlign,
+                    useTransparentBackground: true
+                  }),
+                  paddingTop: tokens.paddingTop !== undefined ? tokens.paddingTop : allThemeTokens.paddingTop,
+                  paddingBottom: tokens.paddingBottom !== undefined ? tokens.paddingBottom : allThemeTokens.paddingBottom,
+                  paddingLeft: tokens.paddingLeft !== undefined ? tokens.paddingLeft : allThemeTokens.paddingLeft,
+                  paddingRight: tokens.paddingRight !== undefined ? tokens.paddingRight : allThemeTokens.paddingRight
+                },
+                variant: variant,
+                withFooter: hasFooter,
+                children: children
+              })
+            }) : null, fullBleedContentPosition !== POSITION.NONE && /*#__PURE__*/_jsx(ConditionalWrapper, {
+              WrapperComponent: DynamicWidthContainer,
+              wrapperProps: imageWrapperStyleProps,
+              condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
+              children: /*#__PURE__*/_jsx(FullBleedContent, {
+                borderRadius: fullBleedBorderRadius,
+                ...fullBleedContentPropsClean,
+                position: fullBleedContentPosition,
+                cardState: undefined
+              })
+            })]
+          }), /*#__PURE__*/_jsx(InteractiveOverlay, {
+            overlayOpacity: overlayOpacity,
+            borderRadius: borderRadius
+          }), showFocusBorder && /*#__PURE__*/_jsx(FocusBorder, {
+            borderWidth: `${focusTokens.borderWidth}px`,
+            borderColor: focusTokens.borderColor,
+            borderRadius: borderRadius
           })]
-        })
-      })
-    }) : null, !fullBleedInteractive && !interactiveCard?.body && fullBleedContentPosition === 'none' && children ? /*#__PURE__*/_jsx(CardContent, {
-      tokens: {
-        ...tokens,
-        ...(backgroundImage ? {
-          backgroundColor: 'transparent'
-        } : {}),
-        ...(fullBleedContentChildrenAlign && {
-          alignSelf: fullBleedContentChildrenAlign
-        })
-      },
+        });
+      }
+    }) : null, !fullBleedInteractive && !interactiveCard?.body && fullBleedContentPosition === POSITION.NONE && children ? /*#__PURE__*/_jsx(CardContent, {
+      tokens: getCardContentTokens(tokens, {
+        backgroundImage,
+        fullBleedContentChildrenAlign
+      }),
       variant: variant,
       withFooter: hasFooter,
       children: children
-    }) : null, !fullBleedInteractive && fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
+    }) : null, !fullBleedInteractive && fullBleedContentPosition !== POSITION.NONE ? /*#__PURE__*/_jsxs(StackView, {
       direction: contentStackDirection,
-      tokens: {
-        ...columnFlex,
-        alignItems: contentStackAlign
-      },
+      tokens: getStackViewTokens(columnFlex, contentStackAlign),
       space: 0,
       children: [children ? /*#__PURE__*/_jsx(ConditionalWrapper, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: contentWrapperStyleProps,
         condition: isImageWidthAdjustable,
         children: /*#__PURE__*/_jsx(CardContent, {
-          tokens: {
-            ...tokens,
-            ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
-              alignSelf: fullBleedContentChildrenAlign
-            })
-          },
+          tokens: getCardContentTokens(tokens, {
+            fullBleedContentChildrenAlign
+          }),
           variant: variant,
           withFooter: hasFooter,
           children: children
@@ -318,7 +478,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
       }) : null, /*#__PURE__*/_jsx(ConditionalWrapper, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: imageWrapperStyleProps,
-        condition: isImageWidthAdjustable,
+        condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
         children: /*#__PURE__*/_jsx(FullBleedContent, {
           borderRadius: fullBleedBorderRadius,
           ...fullBleedContentPropsClean,
@@ -334,7 +494,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     })]
   });
 });
-const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
+const positionValues = Object.values(POSITION);
 const alignValues = ['start', 'end', 'center', 'stretch'];
 const PositionedFullBleedContentPropType = PropTypes.shape({
   position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(positionValues)).isRequired,

package/lib/esm/NavigationBar/NavigationBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { selectSystemProps, StackView, Typography, useHash, useInputValue, useResponsiveProp, withLinkRouter, variantProp } from '@telus-uds/components-base';
+import { selectSystemProps, StackView, Typography, useHash, useInputValue, useResponsiveProp, withLinkRouter, variantProp, resolveContentMaxWidth, useTheme } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs, scrollToAnchor } from '../utils';
 import NavigationItem from './NavigationItem';
@@ -21,12 +21,28 @@ const Heading = /*#__PURE__*/styled.div.withConfig({
     letterSpacing: 0
   }
 });
+const ContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavigationBar__ContentWrapper",
+  componentId: "components-web__sc-1vis1gt-1"
+})(_ref => {
+  let {
+    maxWidth
+  } = _ref;
+  return {
+    width: '100%',
+    ...(maxWidth && {
+      maxWidth,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    })
+  };
+});
 
 /**
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const NavigationBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'navigation',
     heading,
@@ -39,8 +55,9 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     linkRouterProps,
     tokens,
     variant,
+    contentMaxWidth,
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     currentValue,
     setValue
@@ -49,29 +66,35 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     initialValue: selectedId,
     onChange
   });
+  const {
+    themeOptions
+  } = useTheme();
+  const contentWidthValue = useResponsiveProp(contentMaxWidth);
+  const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
+  const maxWidth = resolveContentMaxWidth(contentWidthValue, responsiveWidth);
   useHash((hash, event) => {
-    let hashItem = hash && items.find(_ref2 => {
+    let hashItem = hash && items.find(_ref3 => {
       let {
         href
-      } = _ref2;
+      } = _ref3;
       return hash === href;
     });
     if (!hashItem) {
-      const parentItem = items.find(_ref3 => {
+      const parentItem = items.find(_ref4 => {
         let {
           items: parentItems
-        } = _ref3;
-        return parentItems?.some(_ref4 => {
+        } = _ref4;
+        return parentItems?.some(_ref5 => {
           let {
             href
-          } = _ref4;
+          } = _ref5;
           return hash === href;
         });
       });
-      hashItem = parentItem?.items.find(_ref5 => {
+      hashItem = parentItem?.items.find(_ref6 => {
         let {
           href
-        } = _ref5;
+        } = _ref6;
         return hash === href;
       });
     }
@@ -138,7 +161,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }
     };
   }, [openSubMenuId, handleMouseDown]);
-  return /*#__PURE__*/_jsxs(StackView, {
+  const stackView = /*#__PURE__*/_jsxs(StackView, {
     accessibilityRole: accessibilityRole,
     direction: direction,
     ref: navRef,
@@ -156,7 +179,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         heading: headingLevel,
         children: heading
       })
-    }), itemsForViewport?.map((_ref6, index) => {
+    }), itemsForViewport?.map((_ref7, index) => {
       let {
         href,
         label,
@@ -167,7 +190,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         linkRouterProps: itemLinkRouterProps,
         items: nestedItems,
         ...itemRest
-      } = _ref6;
+      } = _ref7;
       const itemId = id ?? label;
       const handleClick = event => {
         if (nestedItems) {
@@ -193,9 +216,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       return /*#__PURE__*/_jsx(ItemComponent, {
         ref: itemRef,
         href: href,
-        onClick: handleClick
-        // TODO: refactor to pass selected ID via context
-        ,
+        onClick: handleClick,
         selectedId: currentValue,
         index: index,
         LinkRouter: ItemLinkRouter,
@@ -219,6 +240,10 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }, itemId);
     })]
   });
+  return maxWidth ? /*#__PURE__*/_jsx(ContentWrapper, {
+    maxWidth: maxWidth,
+    children: stackView
+  }) : stackView;
 });
 NavigationBar.displayName = 'NavigationBar';
 NavigationBar.propTypes = {
@@ -278,6 +303,23 @@ NavigationBar.propTypes = {
   /**
    * Variant configuration
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * The maximum width of the content in the NavigationBar.
+   * This prop accepts responsive values for different viewports. If a number is provided,
+   * it will be the max content width for the desired viewport.
+   * - `xs`: 'max' | 'full' | <number>
+   * - `sm`: 'max' | 'full' | <number>
+   * - `md`: 'max' | 'full' | <number>
+   * - `lg`: 'max' | 'full' | <number>
+   * - `xl`: 'max' | 'full' | <number>
+   */
+  contentMaxWidth: PropTypes.shape({
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
+  })
 };
 export default NavigationBar;

package/lib/esm/NavigationBar/collapseItems.js

@@ -12,7 +12,7 @@ const collapseItems = (items, selectedId) => {
       label,
       id
     } = _ref;
-    return selectedId === id ?? label;
+    return selectedId === (id ?? label);
   };
 
   // Linter doesn't like for loops, simulate loop that breaks