@telus-uds/components-base 3.18.0 → 3.20.0

package/CHANGELOG.md

@@ -1,9 +1,40 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 16 Sep 2025 21:19:36 GMT and should not be manually modified.
+This log was last generated on Fri, 10 Oct 2025 15:11:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.20.0
+
+Fri, 10 Oct 2025 15:11:05 GMT
+
+### Minor changes
+
+- `Spacer`: add RNMQ support (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.15.1
+
+### Patches
+
+- `ButtonDropdown`: Small size variant updates. (oscar.palencia@telus.com)
+- `MultiSelectfilter`: rowLimit prop issue causing display problems fixed (35577399+JoshHC@users.noreply.github.com)
+- `ExpandCollapseMini`: extra padding removed (35577399+JoshHC@users.noreply.github.com)
+
+## 3.19.0
+
+Fri, 03 Oct 2025 20:34:06 GMT
+
+### Minor changes
+
+- `Carousel`: add swipe functionality to MD viewport (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: add documentation for JSX usage in `subtitle` prop (oscar.palencia@telus.com)
+- `StepTracker`: add style bar variant (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.15.0
+
+### Patches
+
+- `TabBar`: fix item token management (guillermo.peitzner@telus.com)
+- `Box`: fix background image contain position (guillermo.peitzner@telus.com)
+
 ## 3.18.0
 
 Tue, 16 Sep 2025 21:19:36 GMT

package/jest.config.cjs

@@ -29,12 +29,20 @@ module.exports = {
   ],
   cacheDirectory: '.cache/jest-cache-react-17',
   moduleNameMapper: {
-    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
+    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy',
+    '^@telus-uds/system-constants$': '<rootDir>/../system-constants/src',
+    '^@telus-uds/system-theme-tokens$': '<rootDir>/../system-theme-tokens/src'
   },
   testMatch: [`<rootDir>/__tests__/**/*.test.js?(x)`],
   transformIgnorePatterns: [
     'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
   ],
-  // Count everything in src when calculating coverage
+  // Count everything in src when calculating coverage,
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/packages/palette-allium/build/'
+    // '/@telus-uds/palette-allium',
+    // '/@telus-uds/palette-allium/build/rn/icons/, /@telus-uds/palette-allium/build/web/icons/'
+  ],
   collectCoverageFrom: ['src/**/*.{js,jsx}']
 }

package/lib/cjs/Box/Box.js

@@ -14,9 +14,11 @@ var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
-var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+var _backgroundImageStylesMap = _interopRequireWildcard(require("./backgroundImageStylesMap"));
 var _ViewportProvider = require("../ViewportProvider");
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
@@ -75,39 +77,51 @@ const setBackgroundImage = _ref2 => {
     backgroundImageResizeMode,
     backgroundImagePosition,
     backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
+    content,
+    testID
   } = _ref2;
-  if (backgroundImageResizeMode === 'contain') {
-    const containedViewStyle = {
-      ...staticStyles.containedView,
-      width: backgroundImageWidth,
-      height: backgroundImageHeight,
-      ..._backgroundImageStylesMap.default[`${backgroundImagePosition}-${backgroundImageAlign}`]
-    };
+  const backgroundImageTestID = testID ? `${testID}-background-image` : undefined;
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
+    if (_Platform.default.OS === 'web') {
+      const backgroundPosition = _backgroundImageStylesMap.backgroundPositions[positionKey] || 'center center';
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.imageBackground, backgroundImageStyle],
+        "aria-label": alt,
+        testID: backgroundImageTestID,
+        children: content
+      });
+    }
+    const positionStyles = _backgroundImageStylesMap.default[positionKey] || {};
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: staticStyles.containedContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: containedViewStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-          source: {
-            uri: src
-          },
-          alt: alt,
-          style: staticStyles.containedImage,
-          accessibilityIgnoresInvertColors: true
-        })
-      }), content]
+      style: staticStyles.containContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        source: src,
+        resizeMode: backgroundImageResizeMode,
+        style: [staticStyles.containImage, positionStyles],
+        accessible: true,
+        accessibilityLabel: alt,
+        accessibilityIgnoresInvertColors: true,
+        testID: backgroundImageTestID
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.contentOverlay,
+        children: content
+      })]
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
-    source: {
-      uri: src
-    },
-    alt: alt,
-    style: staticStyles.backgroundImageContainer,
+    source: src,
     resizeMode: backgroundImageResizeMode,
+    style: staticStyles.imageBackground,
+    accessible: true,
+    accessibilityLabel: alt,
+    testID: backgroundImageTestID,
     children: content
   });
 };
@@ -264,31 +278,61 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     align = ''
   } = backgroundImage || {};
   const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
-  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position, 'none');
-  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = _react.default.useState(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = _react.default.useState(0);
-  if (backgroundImage) content = setBackgroundImage({
-    src,
-    alt,
-    backgroundImageResizeMode,
-    backgroundImagePosition,
-    backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
-  });
-  _react.default.useEffect(() => {
-    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
-      _Image.default.getSize(src, (width, height) => {
-        // Only update the state if the size has changed
-        if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
-          setBackgroundImageWidth(width);
-          setBackgroundImageHeight(height);
-        }
+  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
+  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
+  const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  if (backgroundImage && src) {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = boxStyles;
+    const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
+    const paddedContent = hasPadding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    }) : children;
+    content = setBackgroundImage({
+      src: imageSourceViewport,
+      alt,
+      backgroundImageResizeMode,
+      backgroundImagePosition,
+      backgroundImageAlign,
+      content: paddedContent,
+      testID
+    });
+    const dataSetValue = boxMediaIds ? {
+      media: boxMediaIds,
+      ...dataSet
+    } : dataSet;
+    if (scroll) {
+      const scrollProps = typeof scroll === 'object' ? scroll : {};
+      scrollProps.contentContainerStyle = [containerStyle, scrollProps.contentContainerStyle];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+        ...scrollProps,
+        ...props,
+        testID: testID,
+        dataSet: dataSetValue,
+        ref: ref,
+        children: content
       });
     }
-  }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ...props,
+      style: containerStyle,
+      testID: testID,
+      dataSet: dataSetValue,
+      ref: ref,
+      children: content
+    });
+  }
   const dataSetValue = boxMediaIds ? {
     media: boxMediaIds,
     ...dataSet
@@ -401,10 +445,12 @@ Box.propTypes = {
   */
   customGradient: _propTypes.default.func,
   /**
-   * Use this prop to add a background image to the box.
+   * Apply background image to the box.
    */
   backgroundImage: _propTypes.default.shape({
-    src: _propTypes.default.string.isRequired,
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
     resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
     position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
@@ -413,18 +459,24 @@ Box.propTypes = {
 };
 var _default = exports.default = Box;
 const staticStyles = _StyleSheet.default.create({
-  backgroundImageContainer: {
-    flex: 1
+  imageBackground: {
+    width: '100%',
+    height: '100%'
   },
-  containedContainer: {
-    flex: 1,
-    overflow: 'hidden'
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
   },
-  containedView: {
-    zIndex: -1,
-    position: 'absolute'
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
   },
-  containedImage: {
+  containImage: {
+    position: 'absolute',
     width: '100%',
     height: '100%'
   }

package/lib/cjs/Box/backgroundImageStylesMap.js

@@ -3,15 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.default = exports.backgroundPositions = void 0;
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const webStyles = {
   'top-start': {
-    top: 0
+    top: 0,
+    left: 0
   },
   'top-center': {
-    left: 0,
-    right: 0,
-    marginHorizontal: 'auto'
+    top: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
   },
   'top-end': {
     top: 0,
@@ -22,60 +27,160 @@ var _default = exports.default = {
     right: 0
   },
   'left-start': {
-    top: 0
+    top: 0,
+    left: 0
   },
   'left-center': {
-    top: 0,
+    top: '50%',
+    left: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'right-center': {
+    top: '50%',
+    right: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0
+  },
+  'bottom-center': {
+    bottom: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
+  },
+  'bottom-end': {
     bottom: 0,
-    marginVertical: 'auto'
+    right: 0
+  },
+  'right-end': {
+    bottom: 0,
+    right: 0
   },
-  'none-start': {
+  'top-stretch': {
+    top: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
     top: 0,
     bottom: 0,
-    marginVertical: 'auto'
+    left: 0,
+    height: '100%'
   },
-  'none-center': {
+  'right-stretch': {
     top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
     bottom: 0,
     left: 0,
     right: 0,
-    margin: 'auto'
+    width: '100%'
+  }
+};
+const webBackgroundPositions = {
+  'top-start': 'left top',
+  'top-center': 'center top',
+  'top-end': 'right top',
+  'bottom-start': 'left bottom',
+  'bottom-center': 'center bottom',
+  'bottom-end': 'right bottom',
+  'left-center': 'left center',
+  'right-center': 'right center'
+};
+const nativeStyles = {
+  'top-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
   },
-  'right-center': {
+  'top-center': {
+    top: 0,
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
+  },
+  'top-end': {
     top: 0,
-    bottom: 0,
     right: 0,
-    marginVertical: 'auto'
+    width: 150,
+    height: 200
   },
-  'none-end': {
+  'right-start': {
     top: 0,
-    bottom: 0,
     right: 0,
-    marginVertical: 'auto'
+    width: 150,
+    height: 200
+  },
+  'left-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'left-center': {
+    left: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
+  },
+  'right-center': {
+    right: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
   },
   'bottom-start': {
     bottom: 0,
-    left: 0
+    left: 0,
+    width: 150,
+    height: 200
   },
   'left-end': {
     bottom: 0,
-    left: 0
+    left: 0,
+    width: 150,
+    height: 200
   },
   'bottom-center': {
-    left: 0,
-    right: 0,
     bottom: 0,
-    marginHorizontal: 'auto'
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
   },
   'bottom-end': {
+    bottom: 0,
     right: 0,
-    bottom: 0
+    width: 150,
+    height: 200
   },
   'right-end': {
+    bottom: 0,
     right: 0,
-    bottom: 0
+    width: 150,
+    height: 200
   },
   'top-stretch': {
+    top: 0,
     left: 0,
     right: 0,
     width: '100%'
@@ -83,6 +188,7 @@ var _default = exports.default = {
   'left-stretch': {
     top: 0,
     bottom: 0,
+    left: 0,
     height: '100%'
   },
   'right-stretch': {
@@ -92,9 +198,11 @@ var _default = exports.default = {
     height: '100%'
   },
   'bottom-stretch': {
+    bottom: 0,
     left: 0,
     right: 0,
-    bottom: 0,
     width: '100%'
   }
-};
+};
+const backgroundPositions = exports.backgroundPositions = _Platform.default.OS === 'web' ? webBackgroundPositions : {};
+var _default = exports.default = _Platform.default.OS === 'web' ? webStyles : nativeStyles;

package/lib/cjs/Button/ButtonDropdown.js

@@ -64,6 +64,7 @@ const selectDescriptionTextStyles = tokens => ({
     fontName: tokens?.descriptionFontName,
     fontSize: tokens?.descriptionFontSize,
     fontWeight: tokens?.descriptionFontWeight,
+    lineHeight: tokens?.descriptionLineHeight,
     fontColor: tokens?.color
   }),
   paddingBottom: tokens?.descriptionTextPaddingBottom

package/lib/cjs/Carousel/Carousel.js

@@ -724,7 +724,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       return false;
     }
     if (_Platform.default.OS === 'web') {
-      return !!(viewport === 'xs' || viewport === 'sm');
+      return !!(viewport === 'xs' || viewport === 'sm' || viewport === 'md' && (0, _utils.isTouchDevice)());
     }
     return true;
   }, [viewport, totalItems]);

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -73,35 +73,21 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
     const isHovered = hover || linkHover;
     const iconBaselineOffset = 0;
     const hoverTranslateY = 4;
-
-    // Calculate baseline alignment to vertically center icon with text
-    // This combines font and icon metrics with adjustments for visual balance
-    const fontBaseline = fontSize / hoverTranslateY; // Quarter of font size - adjusts for text's visual center point
-    const iconBaseline = iconSize / hoverTranslateY; // Quarter of icon size - adjusts for icon's visual center point
-    const staticOffset = hoverTranslateY; // Fixed downward adjustment to fine-tune vertical alignment
-    const sizeCompensation = -Math.abs(iconSize - fontSize); // Compensates when icon and text sizes differ significantly
-
+    const fontBaseline = fontSize / hoverTranslateY;
+    const iconBaseline = iconSize / hoverTranslateY;
+    const staticOffset = hoverTranslateY;
+    const sizeCompensation = -Math.abs(iconSize - fontSize);
     const baselineAlignment = fontBaseline + iconBaseline - staticOffset + sizeCompensation;
-    if (_Platform.default.OS !== 'web') {
-      // For native platforms, use baseline alignment with optional offset
-      return {
-        iconTranslateY: baselineAlignment + iconBaselineOffset
-      };
-    }
+    const mobileAdjustment = _Platform.default.OS !== 'web' ? -2 : 0;
     if (isHovered) {
-      // Apply animation offset to the baseline-aligned position
-      // When expanded: move icon UP (1.3 the hover distance for clear movement)
-      // When collapsed: move icon DOWN (single hover distance)
       const hoverMovementDistance = 1.3;
       const animationOffset = expanded ? -(hoverTranslateY * hoverMovementDistance) : hoverTranslateY;
       return {
-        iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset
+        iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset + mobileAdjustment
       };
     }
-
-    // Default state uses baseline alignment with optional offset
     return {
-      iconTranslateY: baselineAlignment + iconBaselineOffset
+      iconTranslateY: baselineAlignment + iconBaselineOffset + mobileAdjustment
     };
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
@@ -112,6 +98,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
       ...linkTokens,
       ...getTokens(linkState),
       iconSize,
+      blockFontSize: fontSize,
       blockLineHeight: lineHeight
     }),
     ref: ref,

package/lib/cjs/Link/LinkBase.js

@@ -187,7 +187,8 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, staticStyles.outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      const mobileCompensation = null;
+      return [outerBorderStyles, mobileCompensation, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -200,10 +201,12 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       const {
         iconSpace
       } = themeTokens;
+      const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
+      const adjustedIconSpace = _Platform.default.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
-        space: iconSpace,
+        space: adjustedIconSpace,
         iconProps: {
           ...iconProps,
           tokens: iconTokens,
@@ -270,15 +273,11 @@ const staticStyles = _StyleSheet.default.create({
       }
     })
   },
-  outerBorderStyles: {
+  outerBorderCompensation: {
     ...(_Platform.default.OS !== 'web' && {
-      margin: 0,
       marginHorizontal: 2,
-      padding: 0
-    }),
-    ...(_Platform.default.OS === 'android' && {
-      paddingHorizontal: 2,
-      paddingTop: 2
+      paddingHorizontal: _Platform.default.OS === 'android' ? 2 : 0,
+      paddingTop: _Platform.default.OS === 'android' ? 2 : 0
     })
   }
 });