@telus-uds/components-base 3.18.0 → 3.20.0

package/lib/esm/Box/Box.js

@@ -7,8 +7,8 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import Image from "react-native-web/dist/exports/Image";
 import { useTheme, useThemeTokens, useResponsiveThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, createMediaQueryStyles, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps, StyleSheet as RNMQStyleSheet, getSpacingScale } from '../utils';
-import backgroundImageStylesMap from './backgroundImageStylesMap';
+import { a11yProps, createMediaQueryStyles, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps, StyleSheet as RNMQStyleSheet, getSpacingScale, formatImageSource } from '../utils';
+import backgroundImageStylesMap, { backgroundPositions } from './backgroundImageStylesMap';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -68,39 +68,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[`${backgroundImagePosition}-${backgroundImageAlign}`]
-    };
+  const backgroundImageTestID = testID ? `${testID}-background-image` : undefined;
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
+    if (Platform.OS === 'web') {
+      const backgroundPosition = backgroundPositions[positionKey] || 'center center';
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition
+      };
+      return /*#__PURE__*/_jsx(View, {
+        style: [staticStyles.imageBackground, backgroundImageStyle],
+        "aria-label": alt,
+        testID: backgroundImageTestID,
+        children: content
+      });
+    }
+    const positionStyles = backgroundImageStylesMap[positionKey] || {};
     return /*#__PURE__*/_jsxs(View, {
-      style: staticStyles.containedContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: containedViewStyle,
-        children: /*#__PURE__*/_jsx(Image, {
-          source: {
-            uri: src
-          },
-          alt: alt,
-          style: staticStyles.containedImage,
-          accessibilityIgnoresInvertColors: true
-        })
-      }), content]
+      style: staticStyles.containContainer,
+      children: [/*#__PURE__*/_jsx(Image, {
+        source: src,
+        resizeMode: backgroundImageResizeMode,
+        style: [staticStyles.containImage, positionStyles],
+        accessible: true,
+        accessibilityLabel: alt,
+        accessibilityIgnoresInvertColors: true,
+        testID: backgroundImageTestID
+      }), /*#__PURE__*/_jsx(View, {
+        style: staticStyles.contentOverlay,
+        children: content
+      })]
     });
   }
   return /*#__PURE__*/_jsx(ImageBackground, {
-    source: {
-      uri: src
-    },
-    alt: alt,
-    style: staticStyles.backgroundImageContainer,
+    source: src,
     resizeMode: backgroundImageResizeMode,
+    style: staticStyles.imageBackground,
+    accessible: true,
+    accessibilityLabel: alt,
+    testID: backgroundImageTestID,
     children: content
   });
 };
@@ -257,31 +269,61 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     align = ''
   } = backgroundImage || {};
   const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
-  const backgroundImagePosition = useResponsiveProp(position, 'none');
-  const backgroundImageAlign = useResponsiveProp(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0);
-  if (backgroundImage) content = setBackgroundImage({
-    src,
-    alt,
-    backgroundImageResizeMode,
-    backgroundImagePosition,
-    backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
-  });
-  React.useEffect(() => {
-    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
-      Image.getSize(src, (width, height) => {
-        // Only update the state if the size has changed
-        if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
-          setBackgroundImageWidth(width);
-          setBackgroundImageHeight(height);
-        }
+  const backgroundImagePosition = useResponsiveProp(position);
+  const backgroundImageAlign = useResponsiveProp(align);
+  const imageSourceViewport = formatImageSource(useResponsiveProp(src));
+  if (backgroundImage && src) {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = boxStyles;
+    const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
+    const paddedContent = hasPadding ? /*#__PURE__*/_jsx(View, {
+      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__*/_jsx(ScrollView, {
+        ...scrollProps,
+        ...props,
+        testID: testID,
+        dataSet: dataSetValue,
+        ref: ref,
+        children: content
       });
     }
-  }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+    return /*#__PURE__*/_jsx(View, {
+      ...props,
+      style: containerStyle,
+      testID: testID,
+      dataSet: dataSetValue,
+      ref: ref,
+      children: content
+    });
+  }
   const dataSetValue = boxMediaIds ? {
     media: boxMediaIds,
     ...dataSet
@@ -394,10 +436,12 @@ Box.propTypes = {
   */
   customGradient: PropTypes.func,
   /**
-   * Use this prop to add a background image to the box.
+   * Apply background image to the box.
    */
   backgroundImage: PropTypes.shape({
-    src: PropTypes.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.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
     position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
@@ -406,18 +450,24 @@ Box.propTypes = {
 };
 export default Box;
 const staticStyles = StyleSheet.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/esm/Box/backgroundImageStylesMap.js

@@ -1,11 +1,15 @@
-export default {
+import Platform from "react-native-web/dist/exports/Platform";
+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,
@@ -16,60 +20,160 @@ export 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%'
@@ -77,6 +181,7 @@ export default {
   'left-stretch': {
     top: 0,
     bottom: 0,
+    left: 0,
     height: '100%'
   },
   'right-stretch': {
@@ -86,9 +191,11 @@ export default {
     height: '100%'
   },
   'bottom-stretch': {
+    bottom: 0,
     left: 0,
     right: 0,
-    bottom: 0,
     width: '100%'
   }
-};
+};
+export const backgroundPositions = Platform.OS === 'web' ? webBackgroundPositions : {};
+export default Platform.OS === 'web' ? webStyles : nativeStyles;

package/lib/esm/Button/ButtonDropdown.js

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

package/lib/esm/Carousel/Carousel.js

@@ -8,7 +8,7 @@ import Dimensions from "react-native-web/dist/exports/Dimensions";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
-import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy, unpackFragment } from '../utils';
+import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy, unpackFragment, isTouchDevice } from '../utils';
 import { useA11yInfo } from '../A11yInfoProvider';
 import { CarouselProvider } from './CarouselContext';
 import CarouselItem from './CarouselItem';
@@ -717,7 +717,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       return false;
     }
     if (Platform.OS === 'web') {
-      return !!(viewport === 'xs' || viewport === 'sm');
+      return !!(viewport === 'xs' || viewport === 'sm' || viewport === 'md' && isTouchDevice());
     }
     return true;
   }, [viewport, totalItems]);

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -66,35 +66,21 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, 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.OS !== 'web') {
-      // For native platforms, use baseline alignment with optional offset
-      return {
-        iconTranslateY: baselineAlignment + iconBaselineOffset
-      };
-    }
+    const mobileAdjustment = Platform.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__*/_jsx(Link, {
@@ -105,6 +91,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...linkTokens,
       ...getTokens(linkState),
       iconSize,
+      blockFontSize: fontSize,
       blockLineHeight: lineHeight
     }),
     ref: ref,

package/lib/esm/Link/LinkBase.js

@@ -180,7 +180,8 @@ const LinkBase = /*#__PURE__*/React.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);
@@ -193,10 +194,12 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       const {
         iconSpace
       } = themeTokens;
+      const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
+      const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
       return /*#__PURE__*/_jsx(IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
-        space: iconSpace,
+        space: adjustedIconSpace,
         iconProps: {
           ...iconProps,
           tokens: iconTokens,
@@ -263,15 +266,11 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderStyles: {
+  outerBorderCompensation: {
     ...(Platform.OS !== 'web' && {
-      margin: 0,
       marginHorizontal: 2,
-      padding: 0
-    }),
-    ...(Platform.OS === 'android' && {
-      paddingHorizontal: 2,
-      paddingTop: 2
+      paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
+      paddingTop: Platform.OS === 'android' ? 2 : 0
     })
   }
 });

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -64,7 +64,6 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
   width: windowWidth
 });
 const TOTAL_COLUMNS = 12;
-const MAX_ITEMS_THRESHOLD = 12;
 const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     label,
@@ -171,12 +170,13 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   });
   const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
   const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
-  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
-  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
+  let rowLength = items.length;
+  if (viewport !== 'xs' && colSize === 2) {
+    rowLength = Math.ceil(items.length / 2);
+  }
   React.useEffect(() => {
-    if (colSize === 1) return setMaxWidth(false);
-    return colSize === 2 && setMaxWidth(true);
-  }, [colSize]);
+    setMaxWidth(items.length >= rowLimit);
+  }, [items.length, rowLimit]);
   React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const uniqueFields = ['id', 'label'];
   if (!containUniqueFields(items, uniqueFields)) {
@@ -423,14 +423,14 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       dismissWhenPressedOutside: dismissWhenPressedOutside,
       onClose: onClose,
       overlaidPosition: overlaidPosition,
-      maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
+      maxHeight: items.length >= rowLimit ? true : maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
       minHeight: minHeight,
       minWidth: minWidth,
       tokens: {
         ...tokens,
-        maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth,
+        maxWidth: items.length >= rowLimit ? true : maxWidth,
         borderColor: containerBorderColor
       },
       copy: copy,
@@ -482,9 +482,9 @@ MultiSelectFilter.propTypes = {
    */
   label: PropTypes.string.isRequired,
   /**
-   * The text for the subtitle
+   * The text for the subtitle. Can also be JSX.
    */
-  subtitle: PropTypes.string,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.