@telus-uds/components-web 4.16.0 → 4.18.0

package/src/Card/Card.jsx

@@ -30,6 +30,56 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 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 = (baseTokens, options = {}) => {
+  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.
  *
@@ -88,6 +138,40 @@ const DynamicWidthContainer = styled.div.withConfig({
   })
 )
 
+const InteractiveCardWrapper = styled.div(() => ({
+  position: 'relative',
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column'
+}))
+
+const InteractiveOverlay = styled.div(({ overlayOpacity, borderRadius }) => ({
+  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 = styled.div(({ borderWidth, borderColor, borderRadius }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  borderStyle: 'solid',
+  pointerEvents: 'none',
+  zIndex: 2
+}))
+
 const Card = React.forwardRef(
   (
     {
@@ -137,19 +221,61 @@ const Card = React.forwardRef(
     const allThemeTokens = useThemeTokens('Card', tokens, variant)
     const { borderRadius } = allThemeTokens
 
-    const cardBaseBorderWidth = allThemeTokens.borderWidth
-    const pressableBorderWidth = useThemeTokens(
+    // 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',
-      {},
-      { ...variant, interactive: true }
-    ).borderWidth
-    const marginOffset = `${-(cardBaseBorderWidth + pressableBorderWidth) / 2}px`
+      interactiveCard?.tokens,
+      interactiveCardConfig
+    )
 
-    const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
-      interactive: true,
-      ...(interactiveCard?.variant || {})
-    })
+    // 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
+      }
+    )
 
+    // Remove backgroundColor from tokens for full bleed interactive content
+    // to prevent background from covering the full bleed image
     const { backgroundColor: _, ...tokensWithoutBg } = tokens
 
     const getFullBleedInteractiveTokens = useThemeTokensCallback('Card', tokensWithoutBg, {
@@ -157,15 +283,17 @@ const Card = React.forwardRef(
       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(
@@ -179,15 +307,23 @@ const Card = React.forwardRef(
     // 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 hasValidImgCol =
+      imgCol && imgColCurrentViewport !== undefined && !Number.isNaN(imgColCurrentViewport)
+    const fullBleedImageWidth = hasValidImgCol
+      ? `${(imgColCurrentViewport / maxCol) * 100}%`
+      : undefined
+    const adaptiveContentWidth = hasValidImgCol
+      ? `${((maxCol - imgColCurrentViewport) / maxCol) * 100}%`
+      : undefined
 
     const isImageWidthAdjustable =
-      imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right')
+      hasValidImgCol &&
+      (fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT)
 
     const contentWrapperStyleProps = {
-      width: adaptiveContentWidth,
-      ...(imgColCurrentViewport >= maxCol && { display: 'none' }),
+      ...(hasValidImgCol && { width: adaptiveContentWidth }),
+      ...(hasValidImgCol && imgColCurrentViewport >= maxCol && { display: 'none' }),
       ...(fullBleedContentChildrenAlign && {
         alignSelf: fullBleedContentChildrenAlign
       })
@@ -207,23 +343,29 @@ const Card = React.forwardRef(
             'paddingBottom',
             'paddingLeft',
             'paddingRight',
-            ...(backgroundImage ? ['backgroundColor'] : [])
+            ...(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 && { borderRadius, overflow: 'hidden' }),
-      ...(imgColCurrentViewport === 0 && { display: 'none' })
+      ...(isImageWidthAdjustable && { width: fullBleedImageWidth }),
+      ...(isImageWidthAdjustable &&
+        imgColCurrentViewport >= maxCol && { borderRadius, overflow: 'hidden' }),
+      ...(isImageWidthAdjustable && imgColCurrentViewport === 0 && { display: 'none' })
     }
 
     return (
       <CardBase
         ref={ref}
-        variant={{ ...variant, padding: 'custom' }}
+        variant={{ ...(interactiveCard?.body ? mergedVariant : variant), padding: 'custom' }}
         tokens={cardBaseTokens}
-        backgroundImage={backgroundImage}
+        backgroundImage={!interactiveCard?.body && backgroundImage}
         onPress={fullBleedInteractive ? undefined : onPress}
         {...(interactiveCard?.selectionType && { interactiveCard, id: rest.id })}
         {...selectProps(restProps)}
@@ -239,6 +381,7 @@ const Card = React.forwardRef(
               ref={ref}
               tokens={getThemeTokens}
               dataSet={dataSet}
+              backgroundImage={backgroundImage}
               onPress={onPress}
               href={interactiveCard?.href}
               hrefAttrs={interactiveCard?.hrefAttrs}
@@ -252,7 +395,7 @@ const Card = React.forwardRef(
                 </>
               )}
             </PressableCardBase>
-            {children && fullBleedContentPosition === 'none' && !fullBleedInteractive ? (
+            {children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive ? (
               <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
                 {children}
               </CardContent>
@@ -260,92 +403,119 @@ const Card = React.forwardRef(
           </>
         ) : null}
         {fullBleedInteractive ? (
-          <div
-            style={{
-              marginTop: marginOffset,
-              marginBottom: marginOffset,
-              marginLeft: marginOffset,
-              marginRight: marginOffset
-            }}
+          <PressableCardBase
+            ref={ref}
+            tokens={getFullBleedInteractiveCardTokens}
+            dataSet={dataSet}
+            onPress={effectiveFullBleedOnPress}
+            href={effectiveFullBleedHref}
+            hrefAttrs={effectiveFullBleedHrefAttrs}
+            {...selectProps(restProps)}
           >
-            <PressableCardBase
-              ref={ref}
-              tokens={getFullBleedInteractiveCardTokens}
-              dataSet={dataSet}
-              onPress={effectiveFullBleedOnPress}
-              href={effectiveFullBleedHref}
-              hrefAttrs={effectiveFullBleedHrefAttrs}
-              {...selectProps(restProps)}
-            >
-              {(cardState) => (
-                <StackView
-                  direction={contentStackDirection}
-                  tokens={{ ...columnFlex, alignItems: contentStackAlign }}
-                  space={0}
-                >
-                  {children ? (
-                    <ConditionalWrapper
-                      WrapperComponent={DynamicWidthContainer}
-                      wrapperProps={contentWrapperStyleProps}
-                      condition={isImageWidthAdjustable}
-                    >
-                      <CardContent
-                        tokens={{
-                          ...tokensWithoutBg,
-                          ...(backgroundImage ? {} : { backgroundColor: 'transparent' }),
-                          ...(!isImageWidthAdjustable &&
-                            fullBleedContentChildrenAlign && {
-                              alignSelf: fullBleedContentChildrenAlign
-                            })
-                        }}
-                        variant={variant}
-                        withFooter={hasFooter}
+            {(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 (
+                <InteractiveCardWrapper>
+                  <StackView
+                    direction={contentStackDirection}
+                    tokens={getStackViewTokens(columnFlex, contentStackAlign)}
+                    space={0}
+                  >
+                    {children ? (
+                      <ConditionalWrapper
+                        WrapperComponent={DynamicWidthContainer}
+                        wrapperProps={contentWrapperStyleProps}
+                        condition={isImageWidthAdjustable}
+                      >
+                        <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}
+                        </CardContent>
+                      </ConditionalWrapper>
+                    ) : null}
+                    {fullBleedContentPosition !== POSITION.NONE && (
+                      <ConditionalWrapper
+                        WrapperComponent={DynamicWidthContainer}
+                        wrapperProps={imageWrapperStyleProps}
+                        condition={
+                          isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed
+                        }
                       >
-                        {children}
-                      </CardContent>
-                    </ConditionalWrapper>
-                  ) : null}
-                  {fullBleedContentPosition !== 'none' && (
-                    <ConditionalWrapper
-                      WrapperComponent={DynamicWidthContainer}
-                      wrapperProps={imageWrapperStyleProps}
-                      condition={isImageWidthAdjustable}
-                    >
-                      <FullBleedContent
-                        borderRadius={fullBleedBorderRadius}
-                        {...fullBleedContentPropsClean}
-                        position={fullBleedContentPosition}
-                        cardState={cardState}
-                      />
-                    </ConditionalWrapper>
+                        <FullBleedContent
+                          borderRadius={fullBleedBorderRadius}
+                          {...fullBleedContentPropsClean}
+                          position={fullBleedContentPosition}
+                          cardState={undefined}
+                        />
+                      </ConditionalWrapper>
+                    )}
+                  </StackView>
+                  <InteractiveOverlay overlayOpacity={overlayOpacity} borderRadius={borderRadius} />
+                  {showFocusBorder && (
+                    <FocusBorder
+                      borderWidth={`${focusTokens.borderWidth}px`}
+                      borderColor={focusTokens.borderColor}
+                      borderRadius={borderRadius}
+                    />
                   )}
-                </StackView>
-              )}
-            </PressableCardBase>
-          </div>
+                </InteractiveCardWrapper>
+              )
+            }}
+          </PressableCardBase>
         ) : null}
         {!fullBleedInteractive &&
         !interactiveCard?.body &&
-        fullBleedContentPosition === 'none' &&
+        fullBleedContentPosition === POSITION.NONE &&
         children ? (
           <CardContent
-            tokens={{
-              ...tokens,
-              ...(backgroundImage ? { backgroundColor: 'transparent' } : {}),
-              ...(fullBleedContentChildrenAlign && {
-                alignSelf: fullBleedContentChildrenAlign
-              })
-            }}
+            tokens={getCardContentTokens(tokens, {
+              backgroundImage,
+              fullBleedContentChildrenAlign
+            })}
             variant={variant}
             withFooter={hasFooter}
           >
             {children}
           </CardContent>
         ) : null}
-        {!fullBleedInteractive && fullBleedContentPosition !== 'none' ? (
+        {!fullBleedInteractive && fullBleedContentPosition !== POSITION.NONE ? (
           <StackView
             direction={contentStackDirection}
-            tokens={{ ...columnFlex, alignItems: contentStackAlign }}
+            tokens={getStackViewTokens(columnFlex, contentStackAlign)}
             space={0}
           >
             {children ? (
@@ -355,13 +525,9 @@ const Card = React.forwardRef(
                 condition={isImageWidthAdjustable}
               >
                 <CardContent
-                  tokens={{
-                    ...tokens,
-                    ...(!isImageWidthAdjustable &&
-                      fullBleedContentChildrenAlign && {
-                        alignSelf: fullBleedContentChildrenAlign
-                      })
-                  }}
+                  tokens={getCardContentTokens(tokens, {
+                    fullBleedContentChildrenAlign
+                  })}
                   variant={variant}
                   withFooter={hasFooter}
                 >
@@ -372,7 +538,7 @@ const Card = React.forwardRef(
             <ConditionalWrapper
               WrapperComponent={DynamicWidthContainer}
               wrapperProps={imageWrapperStyleProps}
-              condition={isImageWidthAdjustable}
+              condition={isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed}
             >
               <FullBleedContent
                 borderRadius={fullBleedBorderRadius}
@@ -393,7 +559,7 @@ const Card = React.forwardRef(
   }
 )
 
-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/src/NavigationBar/NavigationBar.jsx

@@ -8,7 +8,9 @@ import {
   useInputValue,
   useResponsiveProp,
   withLinkRouter,
-  variantProp
+  variantProp,
+  resolveContentMaxWidth,
+  useTheme
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs, scrollToAnchor } from '../utils'
@@ -26,6 +28,15 @@ const Heading = styled.div({
   '> *': { display: 'contents', letterSpacing: 0 }
 })
 
+const ContentWrapper = styled.div(({ maxWidth }) => ({
+  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
@@ -44,11 +55,17 @@ const NavigationBar = React.forwardRef(
       linkRouterProps,
       tokens,
       variant,
+      contentMaxWidth,
       ...rest
     },
     ref
   ) => {
     const { currentValue, setValue } = useInputValue({ value, initialValue: selectedId, onChange })
+    const { themeOptions } = useTheme()
+
+    const contentWidthValue = useResponsiveProp(contentMaxWidth)
+    const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const maxWidth = resolveContentMaxWidth(contentWidthValue, responsiveWidth)
 
     useHash(
       (hash, event) => {
@@ -149,7 +166,7 @@ const NavigationBar = React.forwardRef(
       }
     }, [openSubMenuId, handleMouseDown])
 
-    return (
+    const stackView = (
       <StackView
         accessibilityRole={accessibilityRole}
         direction={direction}
@@ -215,7 +232,6 @@ const NavigationBar = React.forwardRef(
                 key={itemId}
                 href={href}
                 onClick={handleClick}
-                // TODO: refactor to pass selected ID via context
                 selectedId={currentValue}
                 index={index}
                 LinkRouter={ItemLinkRouter}
@@ -236,6 +252,8 @@ const NavigationBar = React.forwardRef(
         )}
       </StackView>
     )
+
+    return maxWidth ? <ContentWrapper maxWidth={maxWidth}>{stackView}</ContentWrapper> : stackView
   }
 )
 
@@ -302,7 +320,24 @@ 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/src/NavigationBar/NavigationSubMenu.jsx

@@ -11,6 +11,34 @@ import NavigationItem from './NavigationItem'
 import useOverlaidPosition from '../utils/useOverlaidPosition'
 import resolveItemSelection from './resolveItemSelection'
 
+const MIN_WIDTH = 192
+const MAX_WIDTH = 289
+const DEFAULT_OFFSETS = { offsets: { vertical: 4 } }
+const XS_ALIGN = { top: 'bottom', left: 'left' }
+const SM_ALIGN = { top: 'bottom', right: 'right' }
+const LG_ALIGN = { top: 'bottom', center: 'center' }
+
+const getResponsiveBreakpoints = (sourceWidth) => ({
+  xs: {
+    ...DEFAULT_OFFSETS,
+    align: XS_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  sm: {
+    ...DEFAULT_OFFSETS,
+    align: SM_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  lg: {
+    ...DEFAULT_OFFSETS,
+    align: LG_ALIGN,
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH
+  }
+})
+
 /**
  * A NavigationItem that opens or closes a Listbox of other NavigationItems.
  *
@@ -36,18 +64,11 @@ const NavigationSubMenu = React.forwardRef(
     ref
   ) => {
     const focusTrapRef = React.useRef()
+    const [sourceWidth, setSourceWidth] = React.useState(0)
 
-    const maxWidth = 289 // Slightly over 288 of nav item to account for subpixel rounding
-    const defaultOffsets = { offsets: { vertical: 4 } }
-    const { align, offsets, minWidth } = useResponsiveProp({
-      xs: { ...defaultOffsets, align: { top: 'bottom', left: 'left' }, minWidth: maxWidth },
-      sm: { ...defaultOffsets, align: { top: 'bottom', right: 'right' }, minWidth: maxWidth },
-      lg: {
-        ...defaultOffsets,
-        align: { top: 'bottom', center: 'center' },
-        minWidth: 192
-      }
-    })
+    const { align, offsets, minWidth, maxWidth } = useResponsiveProp(
+      getResponsiveBreakpoints(sourceWidth)
+    )
 
     const { overlaidPosition, sourceRef, targetRef, onTargetLayout, isReady } = useOverlaidPosition(
       {
@@ -64,6 +85,12 @@ const NavigationSubMenu = React.forwardRef(
 
     const { icoMenu } = useThemeTokens('NavigationBar', tokens, {}, { expanded: isOpen })
 
+    React.useEffect(() => {
+      sourceRef.current?.measureInWindow((_, __, width) => {
+        setSourceWidth(width)
+      })
+    }, [isOpen, sourceRef])
+
     return (
       <>
         <NavigationItem

package/src/NavigationBar/collapseItems.js

@@ -7,7 +7,7 @@ const collapseItems = (items, selectedId) => {
   // Give the root item the label of the current active link
   // (or the first item if for some reason there's no match on the selectedId)
   let rootLabel = items[0].label
-  const isSelected = ({ label, id }) => selectedId === id ?? label
+  const isSelected = ({ label, id }) => selectedId === (id ?? label)
 
   // Linter doesn't like for loops, simulate loop that breaks
   items.some((item) => {