@telus-uds/components-web 4.16.0 → 4.17.0

package/CHANGELOG.md

@@ -1,9 +1,22 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 12 Jan 2026 14:55:22 GMT and should not be manually modified.
+This log was last generated on Mon, 19 Jan 2026 20:39:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.17.0
+
+Mon, 19 Jan 2026 20:39:51 GMT
+
+### Minor changes
+
+- `PriceLockup`: Add inverse variant (david.melara1@telus.com)
+- Bump @telus-uds/components-base to v3.26.0
+
+### Patches
+
+- `NavigationBar`: Fix flickering from overlay overflow  (david.melara1@telus.com)
+
 ## 4.16.0
 
 Mon, 12 Jan 2026 14:55:22 GMT

package/lib/cjs/NavigationBar/NavigationSubMenu.js

@@ -12,11 +12,52 @@ var _useOverlaidPosition = _interopRequireDefault(require("../utils/useOverlaidP
 var _resolveItemSelection = _interopRequireDefault(require("./resolveItemSelection"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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.
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
- */const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     id,
@@ -33,42 +74,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     itemsContainerRef
   } = _ref;
   const focusTrapRef = _react.default.useRef();
-  const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
-  const defaultOffsets = {
-    offsets: {
-      vertical: 4
-    }
-  };
+  const [sourceWidth, setSourceWidth] = _react.default.useState(0);
   const {
     align,
     offsets,
-    minWidth
-  } = (0, _componentsBase.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
-    }
-  });
+    minWidth,
+    maxWidth
+  } = (0, _componentsBase.useResponsiveProp)(getResponsiveBreakpoints(sourceWidth));
   const {
     overlaidPosition,
     sourceRef,
@@ -95,6 +107,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   } = (0, _componentsBase.useThemeTokens)('NavigationBar', tokens, {}, {
     expanded: isOpen
   });
+  _react.default.useEffect(() => {
+    sourceRef.current?.measureInWindow((_, __, width) => {
+      setSourceWidth(width);
+    });
+  }, [isOpen, sourceRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationItem.default, {
       ref: sourceRef,

package/lib/cjs/utils/useOverlaidPosition.js

@@ -111,6 +111,13 @@ function getOverlaidPosition(_ref2) {
       positioning[side] = adjusted.offset;
     }
   }
+  if (positioning.left) {
+    const overflowAmount = positioning.left + targetDimensions.width - windowDimensions.width;
+    if (overflowAmount > 0) {
+      const spaceToRightEdge = windowDimensions.width - (sourceLayout.x + sourceLayout.width);
+      positioning.left = positioning.left - overflowAmount - spaceToRightEdge;
+    }
+  }
   return positioning;
 }
 
@@ -210,7 +217,10 @@ const useOverlaidPosition = _ref3 => {
     windowDimensions,
     offsets,
     align
-  }) : {};
+  }) : {
+    top: 0,
+    left: 0
+  };
   return {
     overlaidPosition,
     sourceRef,

package/lib/esm/NavigationBar/NavigationSubMenu.js

@@ -4,13 +4,52 @@ import { Icon, useResponsiveProp, useThemeTokens, Listbox, getTokensPropType } f
 import NavigationItem from './NavigationItem';
 import useOverlaidPosition from '../utils/useOverlaidPosition';
 import resolveItemSelection from './resolveItemSelection';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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.
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -28,42 +67,13 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     itemsContainerRef
   } = _ref;
   const focusTrapRef = React.useRef();
-  const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
-  const defaultOffsets = {
-    offsets: {
-      vertical: 4
-    }
-  };
+  const [sourceWidth, setSourceWidth] = React.useState(0);
   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
-    }
-  });
+    minWidth,
+    maxWidth
+  } = useResponsiveProp(getResponsiveBreakpoints(sourceWidth));
   const {
     overlaidPosition,
     sourceRef,
@@ -90,6 +100,11 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = useThemeTokens('NavigationBar', tokens, {}, {
     expanded: isOpen
   });
+  React.useEffect(() => {
+    sourceRef.current?.measureInWindow((_, __, width) => {
+      setSourceWidth(width);
+    });
+  }, [isOpen, sourceRef]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(NavigationItem, {
       ref: sourceRef,

package/lib/esm/utils/useOverlaidPosition.js

@@ -103,6 +103,13 @@ function getOverlaidPosition(_ref2) {
       positioning[side] = adjusted.offset;
     }
   }
+  if (positioning.left) {
+    const overflowAmount = positioning.left + targetDimensions.width - windowDimensions.width;
+    if (overflowAmount > 0) {
+      const spaceToRightEdge = windowDimensions.width - (sourceLayout.x + sourceLayout.width);
+      positioning.left = positioning.left - overflowAmount - spaceToRightEdge;
+    }
+  }
   return positioning;
 }
 
@@ -202,7 +209,10 @@ const useOverlaidPosition = _ref3 => {
     windowDimensions,
     offsets,
     align
-  }) : {};
+  }) : {
+    top: 0,
+    left: 0
+  };
   return {
     overlaidPosition,
     sourceRef,

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.25.0",
+    "@telus-uds/components-base": "^3.26.0",
     "@telus-uds/system-constants": "^3.0.0",
     "@telus-uds/system-theme-tokens": "^4.18.0",
     "fscreen": "^1.2.0",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.16.0"
+  "version": "4.17.0"
 }

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/utils/useOverlaidPosition.js

@@ -118,6 +118,14 @@ function getOverlaidPosition({
     }
   }
 
+  if (positioning.left) {
+    const overflowAmount = positioning.left + targetDimensions.width - windowDimensions.width
+    if (overflowAmount > 0) {
+      const spaceToRightEdge = windowDimensions.width - (sourceLayout.x + sourceLayout.width)
+      positioning.left = positioning.left - overflowAmount - spaceToRightEdge
+    }
+  }
+
   return positioning
 }
 
@@ -212,7 +220,7 @@ const useOverlaidPosition = ({
         offsets,
         align
       })
-    : {}
+    : { top: 0, left: 0 }
 
   return {
     overlaidPosition,