@telus-uds/components-web 2.32.2 → 2.33.1

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 27 Mar 2024 21:09:55 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Apr 2024 16:28:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.33.1
+
+Wed, 24 Apr 2024 16:28:55 GMT
+
+### Patches
+
+- DatePicker visual inconsistency fixed: when the selected date was outside the actual month, the date was highlighted in the calendar but the calendar still appeared in the actual month instead of the correct month. (35577399+JoshHC@users.noreply.github.com)
+- vertical position fixed for the calendar in datepicker when scrolling (35577399+JoshHC@users.noreply.github.com)
+- `NavigationSubMenu:` fix proptype (guillermo.peitzner@telus.com)
+- `NavigationBar:` close menus when clicking outside the component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.83.0
+
+## 2.33.0
+
+Fri, 05 Apr 2024 17:16:24 GMT
+
+### Minor changes
+
+- Bump @telus-uds/components-base to v1.82.0
+- Bump @telus-uds/system-theme-tokens to v2.54.0
+
+### Patches
+
+- `Breadcrumbs`: fix text wrapping error (guillermo.peitzner@telus.com)
+
 ## 2.32.2
 
-Wed, 27 Mar 2024 21:09:55 GMT
+Wed, 27 Mar 2024 21:13:10 GMT
 
 ### Patches
 

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -27,15 +27,9 @@ const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
   listStylePosition: 'inside',
   margin: 0,
   padding: 0,
-  alignItems: 'baseline',
-  height: _ref => {
-    let {
-      iconContainerSize
-    } = _ref;
-    return `${iconContainerSize}px`;
-  }
+  alignItems: 'baseline'
 });
-const omitProps = _ref2 => {
+const omitProps = _ref => {
   let {
     current,
     path,
@@ -44,7 +38,7 @@ const omitProps = _ref2 => {
     childRoutes,
     component,
     ...props
-  } = _ref2;
+  } = _ref;
   return props;
 };
 const getBreadcrumbName = (item, params) => {
@@ -107,7 +101,7 @@ const getStructuredData = (items, baseUrl) => {
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = _ref3 => {
+const Breadcrumbs = _ref2 => {
   let {
     baseUrl,
     children,
@@ -118,7 +112,7 @@ const Breadcrumbs = _ref3 => {
     variant,
     LinkRouter,
     ...rest
-  } = _ref3;
+  } = _ref2;
   // React Helmet can cause a memory leak in SSR if not properly configured.
   // Only run it in SSR if theme options tells us to.
   /* const {
@@ -128,7 +122,7 @@ const Breadcrumbs = _ref3 => {
   // const isSSR = typeof window === 'undefined' || isHydrating
   // const hasMetadata = isSSR ? enableHelmetSSR : true
   const helmetContext = {};
-  const activeRoutes = children ? _react.default.Children.map((0, _componentsBase.unpackFragment)(children), _ref4 => {
+  const activeRoutes = children ? _react.default.Children.map((0, _componentsBase.unpackFragment)(children), _ref3 => {
     let {
       props: {
         href,
@@ -136,7 +130,7 @@ const Breadcrumbs = _ref3 => {
         ...itemRest
       },
       ref
-    } = _ref4;
+    } = _ref3;
     return {
       path: href,
       breadcrumbName,
@@ -166,7 +160,7 @@ const Breadcrumbs = _ref3 => {
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
       iconContainerSize: themeTokens.iconContainerSize,
-      children: items.map(_ref5 => {
+      children: items.map(_ref4 => {
         let {
           href,
           current,
@@ -174,7 +168,7 @@ const Breadcrumbs = _ref3 => {
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
-        } = _ref5;
+        } = _ref4;
         return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
           ...itemRest,
           current: current,

package/lib/Breadcrumbs/Item/Item.js

@@ -37,7 +37,8 @@ const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig
       iconContainerSize
     } = _ref3;
     return `${iconContainerSize}px`;
-  }
+  },
+  marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
   displayName: "Item__IconContainer",

package/lib/DatePicker/DatePicker.js

@@ -131,9 +131,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         left,
         top
       } = textInputRef.current.getBoundingClientRect();
+      const inputTop = top + window.scrollY;
       setDatePickerPosition({
         left,
-        top: top + textInputRef.current.offsetHeight
+        top: inputTop + textInputRef.current.offsetHeight
       });
     };
     const throttledUpdateDimensions = (0, _lodash.throttle)(updateDimensions, 100, {
@@ -308,7 +309,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
           date: inputDate,
           onDateChange: onChange,
-          focused: isFocused,
+          focused: inputDate ?? isFocused,
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,

package/lib/NavigationBar/NavigationBar.js

@@ -70,27 +70,49 @@ const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setOpenSubMenuId(null);
     }
   };
+  const navRefDefault = (0, _react.useRef)(null);
+  const navRef = ref ?? navRefDefault;
+  const itemsRef = (0, _react.useRef)(null);
+
+  // Close the submenu when the user clicks outside the navigation bar
+  const handleMouseDown = (0, _react.useCallback)(event => {
+    if (navRef.current && itemsRef.current) {
+      // Get the bounding rectangles of the navigation bar and the items container
+      const navRect = navRef.current.getBoundingClientRect();
+      const itemsRect = itemsRef.current.getBoundingClientRect();
+
+      // Check if the click was outside the navigation bar and the items container
+      const isOutsideNav = event.clientX < navRect.left || event.clientX > navRect.right || event.clientY < navRect.top || event.clientY > navRect.bottom;
+      const isOutsideItems = event.clientX < itemsRect.left || event.clientX > itemsRect.right || event.clientY < itemsRect.top || event.clientY > itemsRect.bottom;
+      if (isOutsideNav && isOutsideItems) {
+        setOpenSubMenuId(null);
+      }
+    }
+  }, [navRef, itemsRef, setOpenSubMenuId]);
 
-  // Add listeners for mouse clicks outside and for ESCAPE key presses
   // TODO: create a custom hook for that and use here and in the Footnote
   (0, _react.useEffect)(() => {
+    // Add listeners for mouse clicks outside and for key presses
+    document.addEventListener('mousedown', handleMouseDown);
     if (openSubMenuId !== null) {
       window.addEventListener('click', handleSubMenuClose);
       window.addEventListener('keydown', handleSubMenuClose);
       window.addEventListener('touchstart', handleSubMenuClose);
     }
     return () => {
+      // Remove listeners when the component is unmounted
+      document.removeEventListener('mousedown', handleMouseDown);
       if (openSubMenuId !== null) {
         window.removeEventListener('click', handleSubMenuClose);
         window.removeEventListener('keydown', handleSubMenuClose);
         window.removeEventListener('touchstart', handleSubMenuClose);
       }
     };
-  }, [openSubMenuId]);
+  }, [openSubMenuId, handleMouseDown]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
     accessibilityRole: accessibilityRole,
     direction: direction,
-    ref: ref,
+    ref: navRef,
     space: 2,
     tokens: {
       alignItems: direction === 'column' ? 'flex-start' : 'center',
@@ -142,6 +164,7 @@ const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         },
         items: nestedItems,
         selected: itemId === selectedId,
+        itemsContainerRef: itemsRef,
         ...itemRest,
         ...(nestedItems && {
           isOpen

package/lib/NavigationBar/NavigationSubMenu.js

@@ -29,7 +29,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     items = [],
     openOverlayRef,
     LinkRouter,
-    linkRouterProps
+    linkRouterProps,
+    itemsContainerRef
   } = _ref;
   const focusTrapRef = (0, _react.useRef)();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
@@ -131,7 +132,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
           parentRef: sourceRef,
           selectedId: selectedId,
           LinkRouter: LinkRouter,
-          linkRouterProps: linkRouterProps
+          linkRouterProps: linkRouterProps,
+          ref: itemsContainerRef
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         // This catches and shifts focus to other interactive elements.
@@ -156,7 +158,8 @@ NavigationSubMenu.propTypes = {
   items: _propTypes.default.array,
   openOverlayRef: _propTypes.default.object,
   LinkRouter: _propTypes.default.elementType,
-  linkRouterProps: _propTypes.default.object
+  linkRouterProps: _propTypes.default.object,
+  itemsContainerRef: _propTypes.default.object
 };
 var _default = NavigationSubMenu;
 exports.default = _default;

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -20,15 +20,9 @@ const StyledList = /*#__PURE__*/styled.ol.withConfig({
   listStylePosition: 'inside',
   margin: 0,
   padding: 0,
-  alignItems: 'baseline',
-  height: _ref => {
-    let {
-      iconContainerSize
-    } = _ref;
-    return `${iconContainerSize}px`;
-  }
+  alignItems: 'baseline'
 });
-const omitProps = _ref2 => {
+const omitProps = _ref => {
   let {
     current,
     path,
@@ -37,7 +31,7 @@ const omitProps = _ref2 => {
     childRoutes,
     component,
     ...props
-  } = _ref2;
+  } = _ref;
   return props;
 };
 const getBreadcrumbName = (item, params) => {
@@ -100,7 +94,7 @@ const getStructuredData = (items, baseUrl) => {
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = _ref3 => {
+const Breadcrumbs = _ref2 => {
   let {
     baseUrl,
     children,
@@ -111,7 +105,7 @@ const Breadcrumbs = _ref3 => {
     variant,
     LinkRouter,
     ...rest
-  } = _ref3;
+  } = _ref2;
   // React Helmet can cause a memory leak in SSR if not properly configured.
   // Only run it in SSR if theme options tells us to.
   /* const {
@@ -121,7 +115,7 @@ const Breadcrumbs = _ref3 => {
   // const isSSR = typeof window === 'undefined' || isHydrating
   // const hasMetadata = isSSR ? enableHelmetSSR : true
   const helmetContext = {};
-  const activeRoutes = children ? React.Children.map(unpackFragment(children), _ref4 => {
+  const activeRoutes = children ? React.Children.map(unpackFragment(children), _ref3 => {
     let {
       props: {
         href,
@@ -129,7 +123,7 @@ const Breadcrumbs = _ref3 => {
         ...itemRest
       },
       ref
-    } = _ref4;
+    } = _ref3;
     return {
       path: href,
       breadcrumbName,
@@ -159,7 +153,7 @@ const Breadcrumbs = _ref3 => {
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(StyledList, {
       iconContainerSize: themeTokens.iconContainerSize,
-      children: items.map(_ref5 => {
+      children: items.map(_ref4 => {
         let {
           href,
           current,
@@ -167,7 +161,7 @@ const Breadcrumbs = _ref3 => {
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
-        } = _ref5;
+        } = _ref4;
         return /*#__PURE__*/_createElement(Item, {
           ...itemRest,
           current: current,

package/lib-module/Breadcrumbs/Item/Item.js

@@ -30,7 +30,8 @@ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
       iconContainerSize
     } = _ref3;
     return `${iconContainerSize}px`;
-  }
+  },
+  marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "Item__IconContainer",

package/lib-module/DatePicker/DatePicker.js

@@ -124,9 +124,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         left,
         top
       } = textInputRef.current.getBoundingClientRect();
+      const inputTop = top + window.scrollY;
       setDatePickerPosition({
         left,
-        top: top + textInputRef.current.offsetHeight
+        top: inputTop + textInputRef.current.offsetHeight
       });
     };
     const throttledUpdateDimensions = throttle(updateDimensions, 100, {
@@ -301,7 +302,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
           date: inputDate,
           onDateChange: onChange,
-          focused: isFocused,
+          focused: inputDate ?? isFocused,
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,

package/lib-module/NavigationBar/NavigationBar.js

@@ -1,5 +1,5 @@
 var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
@@ -62,27 +62,49 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
       setOpenSubMenuId(null);
     }
   };
+  const navRefDefault = useRef(null);
+  const navRef = ref ?? navRefDefault;
+  const itemsRef = useRef(null);
+
+  // Close the submenu when the user clicks outside the navigation bar
+  const handleMouseDown = useCallback(event => {
+    if (navRef.current && itemsRef.current) {
+      // Get the bounding rectangles of the navigation bar and the items container
+      const navRect = navRef.current.getBoundingClientRect();
+      const itemsRect = itemsRef.current.getBoundingClientRect();
+
+      // Check if the click was outside the navigation bar and the items container
+      const isOutsideNav = event.clientX < navRect.left || event.clientX > navRect.right || event.clientY < navRect.top || event.clientY > navRect.bottom;
+      const isOutsideItems = event.clientX < itemsRect.left || event.clientX > itemsRect.right || event.clientY < itemsRect.top || event.clientY > itemsRect.bottom;
+      if (isOutsideNav && isOutsideItems) {
+        setOpenSubMenuId(null);
+      }
+    }
+  }, [navRef, itemsRef, setOpenSubMenuId]);
 
-  // Add listeners for mouse clicks outside and for ESCAPE key presses
   // TODO: create a custom hook for that and use here and in the Footnote
   useEffect(() => {
+    // Add listeners for mouse clicks outside and for key presses
+    document.addEventListener('mousedown', handleMouseDown);
     if (openSubMenuId !== null) {
       window.addEventListener('click', handleSubMenuClose);
       window.addEventListener('keydown', handleSubMenuClose);
       window.addEventListener('touchstart', handleSubMenuClose);
     }
     return () => {
+      // Remove listeners when the component is unmounted
+      document.removeEventListener('mousedown', handleMouseDown);
       if (openSubMenuId !== null) {
         window.removeEventListener('click', handleSubMenuClose);
         window.removeEventListener('keydown', handleSubMenuClose);
         window.removeEventListener('touchstart', handleSubMenuClose);
       }
     };
-  }, [openSubMenuId]);
+  }, [openSubMenuId, handleMouseDown]);
   return /*#__PURE__*/_jsxs(StackView, {
     accessibilityRole: accessibilityRole,
     direction: direction,
-    ref: ref,
+    ref: navRef,
     space: 2,
     tokens: {
       alignItems: direction === 'column' ? 'flex-start' : 'center',
@@ -134,6 +156,7 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
         },
         items: nestedItems,
         selected: itemId === selectedId,
+        itemsContainerRef: itemsRef,
         ...itemRest,
         ...(nestedItems && {
           isOpen

package/lib-module/NavigationBar/NavigationSubMenu.js

@@ -24,7 +24,8 @@ const NavigationSubMenu = _ref => {
     items = [],
     openOverlayRef,
     LinkRouter,
-    linkRouterProps
+    linkRouterProps,
+    itemsContainerRef
   } = _ref;
   const focusTrapRef = useRef();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
@@ -126,7 +127,8 @@ const NavigationSubMenu = _ref => {
           parentRef: sourceRef,
           selectedId: selectedId,
           LinkRouter: LinkRouter,
-          linkRouterProps: linkRouterProps
+          linkRouterProps: linkRouterProps,
+          ref: itemsContainerRef
         })
       }), /*#__PURE__*/_jsx("div", {
         // This catches and shifts focus to other interactive elements.
@@ -151,6 +153,7 @@ NavigationSubMenu.propTypes = {
   items: PropTypes.array,
   openOverlayRef: PropTypes.object,
   LinkRouter: PropTypes.elementType,
-  linkRouterProps: PropTypes.object
+  linkRouterProps: PropTypes.object,
+  itemsContainerRef: PropTypes.object
 };
 export default NavigationSubMenu;

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.81.0",
+    "@telus-uds/components-base": "1.83.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.53.0",
+    "@telus-uds/system-theme-tokens": "^2.54.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.32.2"
+  "version": "2.33.1"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -25,8 +25,7 @@ const StyledList = styled.ol({
   listStylePosition: 'inside',
   margin: 0,
   padding: 0,
-  alignItems: 'baseline',
-  height: ({ iconContainerSize }) => `${iconContainerSize}px`
+  alignItems: 'baseline'
 })
 
 const omitProps = ({

package/src/Breadcrumbs/Item/Item.jsx

@@ -17,7 +17,8 @@ const StyledItemContainer = styled.li({
   display: 'flex',
   paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`,
   lineHeight: ({ lineHeight, fontSize }) => `${Math.ceil(lineHeight * fontSize)}px`,
-  height: ({ iconContainerSize }) => `${iconContainerSize}px`
+  height: ({ iconContainerSize }) => `${iconContainerSize}px`,
+  marginBottom: '8px'
 })
 
 const IconContainer = styled.span({

package/src/DatePicker/DatePicker.jsx

@@ -114,9 +114,10 @@ const DatePicker = forwardRef(
       const updateDimensions = () => {
         if (inline || !textInputRef.current) return
         const { left, top } = textInputRef.current.getBoundingClientRect()
+        const inputTop = top + window.scrollY
         setDatePickerPosition({
           left,
-          top: top + textInputRef.current.offsetHeight
+          top: inputTop + textInputRef.current.offsetHeight
         })
       }
       const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
@@ -282,7 +283,7 @@ const DatePicker = forwardRef(
               <DayPickerSingleDateController
                 date={inputDate}
                 onDateChange={onChange}
-                focused={isFocused}
+                focused={inputDate ?? isFocused}
                 onFocusChange={onFocusChange}
                 numberOfMonths={1}
                 hideKeyboardShortcutsPanel={true}

package/src/NavigationBar/NavigationBar.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import {
   selectSystemProps,
@@ -69,28 +69,66 @@ const NavigationBar = forwardRef(
       }
     }
 
-    // Add listeners for mouse clicks outside and for ESCAPE key presses
+    const navRefDefault = useRef(null)
+    const navRef = ref ?? navRefDefault
+    const itemsRef = useRef(null)
+
+    // Close the submenu when the user clicks outside the navigation bar
+    const handleMouseDown = useCallback(
+      (event) => {
+        if (navRef.current && itemsRef.current) {
+          // Get the bounding rectangles of the navigation bar and the items container
+          const navRect = navRef.current.getBoundingClientRect()
+          const itemsRect = itemsRef.current.getBoundingClientRect()
+
+          // Check if the click was outside the navigation bar and the items container
+          const isOutsideNav =
+            event.clientX < navRect.left ||
+            event.clientX > navRect.right ||
+            event.clientY < navRect.top ||
+            event.clientY > navRect.bottom
+
+          const isOutsideItems =
+            event.clientX < itemsRect.left ||
+            event.clientX > itemsRect.right ||
+            event.clientY < itemsRect.top ||
+            event.clientY > itemsRect.bottom
+
+          if (isOutsideNav && isOutsideItems) {
+            setOpenSubMenuId(null)
+          }
+        }
+      },
+      [navRef, itemsRef, setOpenSubMenuId]
+    )
+
     // TODO: create a custom hook for that and use here and in the Footnote
     useEffect(() => {
+      // Add listeners for mouse clicks outside and for key presses
+      document.addEventListener('mousedown', handleMouseDown)
+
       if (openSubMenuId !== null) {
         window.addEventListener('click', handleSubMenuClose)
         window.addEventListener('keydown', handleSubMenuClose)
         window.addEventListener('touchstart', handleSubMenuClose)
       }
       return () => {
+        // Remove listeners when the component is unmounted
+        document.removeEventListener('mousedown', handleMouseDown)
+
         if (openSubMenuId !== null) {
           window.removeEventListener('click', handleSubMenuClose)
           window.removeEventListener('keydown', handleSubMenuClose)
           window.removeEventListener('touchstart', handleSubMenuClose)
         }
       }
-    }, [openSubMenuId])
+    }, [openSubMenuId, handleMouseDown])
 
     return (
       <StackView
         accessibilityRole={accessibilityRole}
         direction={direction}
-        ref={ref}
+        ref={navRef}
         space={2}
         tokens={{
           alignItems: direction === 'column' ? 'flex-start' : 'center',
@@ -145,6 +183,7 @@ const NavigationBar = forwardRef(
                 linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
                 items={nestedItems}
                 selected={itemId === selectedId}
+                itemsContainerRef={itemsRef}
                 {...itemRest}
                 {...(nestedItems && { isOpen })}
                 {...(nestedItems && isOpen && { openOverlayRef })}

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -20,7 +20,8 @@ const NavigationSubMenu = ({
   items = [],
   openOverlayRef,
   LinkRouter,
-  linkRouterProps
+  linkRouterProps,
+  itemsContainerRef
 }) => {
   const focusTrapRef = useRef()
 
@@ -86,6 +87,7 @@ const NavigationSubMenu = ({
               selectedId={selectedId}
               LinkRouter={LinkRouter}
               linkRouterProps={linkRouterProps}
+              ref={itemsContainerRef}
             />
           </Listbox.Overlay>
           <div
@@ -114,7 +116,8 @@ NavigationSubMenu.propTypes = {
   items: PropTypes.array,
   openOverlayRef: PropTypes.object,
   LinkRouter: PropTypes.elementType,
-  linkRouterProps: PropTypes.object
+  linkRouterProps: PropTypes.object,
+  itemsContainerRef: PropTypes.object
 }
 
 export default NavigationSubMenu