@telus-uds/components-base 1.75.0 → 1.77.0

package/lib-module/Box/Box.js

@@ -1,11 +1,16 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import ScrollView from "react-native-web/dist/exports/ScrollView";
 import Platform from "react-native-web/dist/exports/Platform";
+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 { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, selectSystemProps, spacingProps, useSpacingScale, variantProp, viewProps } from '../utils';
+import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps } from '../utils';
+import backgroundImageStylesMap from './backgroundImageStylesMap';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -56,6 +61,45 @@ const selectBoxStyles = (_ref, customGradient) => {
   });
   return styles;
 };
+const setBackgroundImage = _ref2 => {
+  let {
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    backgroundImageWidth,
+    backgroundImageHeight,
+    content
+  } = _ref2;
+  if (backgroundImageResizeMode === 'contain') {
+    const containedViewStyle = {
+      ...staticStyles.containedView,
+      width: backgroundImageWidth,
+      height: backgroundImageHeight,
+      ...backgroundImageStylesMap[`${backgroundImagePosition}-${backgroundImageAlign}`]
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      style: staticStyles.containedContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: containedViewStyle,
+        children: /*#__PURE__*/_jsx(Image, {
+          source: src,
+          alt: alt,
+          style: staticStyles.containedImage,
+          accessibilityIgnoresInvertColors: true
+        })
+      }), content]
+    });
+  }
+  return /*#__PURE__*/_jsx(ImageBackground, {
+    source: src,
+    alt: alt,
+    style: staticStyles.backgroundImageContainer,
+    resizeMode: backgroundImageResizeMode,
+    children: content
+  });
+};
 
 /**
  * A layout utility component. Use Box to create space (padding) around content.
@@ -122,7 +166,7 @@ const selectBoxStyles = (_ref, customGradient) => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Box = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -141,8 +185,9 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     testID,
     dataSet,
     customGradient,
+    backgroundImage,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const props = {
     accessibilityRole,
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
@@ -157,7 +202,41 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     paddingBottom: useSpacingScale(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
-  const childrenToRender = typeof customGradient === 'function' ? customGradient(styles.colors, styles)(children) : children;
+  let content = children;
+  if (typeof customGradient === 'function') content = customGradient(styles.colors, styles)(children);
+  const {
+    src = '',
+    alt = '',
+    resizeMode = '',
+    position = '',
+    align = ''
+  } = backgroundImage || {};
+  const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
+  const backgroundImagePosition = useResponsiveProp(position, 'none');
+  const backgroundImageAlign = useResponsiveProp(align, 'stretch');
+  const [backgroundImageWidth, setBackgroundImageWidth] = useState(0);
+  const [backgroundImageHeight, setBackgroundImageHeight] = useState(0);
+  if (backgroundImage) content = setBackgroundImage({
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    backgroundImageWidth,
+    backgroundImageHeight,
+    content
+  });
+  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);
+        }
+      });
+    }
+  }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
@@ -167,7 +246,7 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
       testID: testID,
       dataSet: dataSet,
       ref: ref,
-      children: childrenToRender
+      children: content
     });
   }
   return /*#__PURE__*/_jsx(View, {
@@ -176,7 +255,7 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     testID: testID,
     dataSet: dataSet,
     ref: ref,
-    children: childrenToRender
+    children: content
   });
 });
 Box.displayName = 'Box';
@@ -264,6 +343,33 @@ Box.propTypes = {
   /**
   Use this prop if need to add a custom gradient for mobile
   */
-  customGradient: PropTypes.func
+  customGradient: PropTypes.func,
+  /**
+   * Use this prop to add a background image to the box.
+   */
+  backgroundImage: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
+    align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
+  })
 };
-export default Box;
+export default Box;
+const staticStyles = StyleSheet.create({
+  backgroundImageContainer: {
+    flex: 1
+  },
+  containedContainer: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  containedView: {
+    zIndex: -1,
+    position: 'absolute'
+  },
+  containedImage: {
+    width: '100%',
+    height: '100%'
+  }
+});

package/lib-module/Box/backgroundImageStylesMap.js

@@ -0,0 +1,94 @@
+export default {
+  'top-start': {
+    top: 0
+  },
+  'top-center': {
+    left: 0,
+    right: 0,
+    marginHorizontal: 'auto'
+  },
+  'top-end': {
+    top: 0,
+    right: 0
+  },
+  'right-start': {
+    top: 0,
+    right: 0
+  },
+  'left-start': {
+    top: 0
+  },
+  'left-center': {
+    top: 0,
+    bottom: 0,
+    marginVertical: 'auto'
+  },
+  'none-start': {
+    top: 0,
+    bottom: 0,
+    marginVertical: 'auto'
+  },
+  'none-center': {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 'auto'
+  },
+  'right-center': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    marginVertical: 'auto'
+  },
+  'none-end': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    marginVertical: 'auto'
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0
+  },
+  'bottom-center': {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    marginHorizontal: 'auto'
+  },
+  'bottom-end': {
+    right: 0,
+    bottom: 0
+  },
+  'right-end': {
+    right: 0,
+    bottom: 0
+  },
+  'top-stretch': {
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
+    top: 0,
+    bottom: 0,
+    height: '100%'
+  },
+  'right-stretch': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%'
+  }
+};

package/lib-module/Carousel/CarouselThumbnail.js

@@ -54,7 +54,8 @@ const CarouselThumbnail = _ref2 => {
     padding,
     selectedBorderColor,
     selectedBorderWidth,
-    size
+    size,
+    margin
   } = getThumbnailTokens({
     viewport
   });
@@ -66,7 +67,12 @@ const CarouselThumbnail = _ref2 => {
     selected: {
       borderColor: selectedBorderColor,
       borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth + borderWidth
+      padding: padding - selectedBorderWidth,
+      marginBottom: margin + selectedBorderWidth
+    },
+    nonSelected: {
+      padding: padding - borderWidth,
+      marginBottom: margin + selectedBorderWidth
     }
   };
   return /*#__PURE__*/_jsx(Pressable, {
@@ -83,9 +89,9 @@ const CarouselThumbnail = _ref2 => {
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex && styles.selected, {
+      return [pressableStyles, index === activeIndex ? [styles.selected, {
         outline: 'none'
-      }];
+      }] : styles.nonSelected];
     },
     children: /*#__PURE__*/_jsx(Image, {
       accessibilityIgnoresInvertColors: true,

package/lib-module/Carousel/CarouselThumbnailNavigation.js

@@ -24,8 +24,7 @@ const CarouselThumbnailNavigation = /*#__PURE__*/forwardRef((_ref, ref) => {
     throw new Error('Thumbnail set provided does not match the number of slides in the carousel');
   }
   const {
-    containerPaddingTop: thumbnailContainerPaddingTop,
-    margin: thumbnailMargin
+    containerPaddingTop: thumbnailContainerPaddingTop
   } = useThemeTokens('CarouselThumbnail');
   const stackWrapTokens = {
     justifyContent: 'flex-start'
@@ -33,13 +32,14 @@ const CarouselThumbnailNavigation = /*#__PURE__*/forwardRef((_ref, ref) => {
   const containerStyles = {
     justifyContent: 'center',
     alignItems,
-    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+    paddingTop: thumbnailContainerPaddingTop
   };
   return /*#__PURE__*/_jsx(View, {
     style: containerStyles,
     children: /*#__PURE__*/_jsx(StackWrap, {
       direction: "row",
       tokens: stackWrapTokens,
+      space: 2,
       ref: ref,
       children: thumbnails.map((_ref2, index) => {
         let {

package/lib-module/ExpandCollapse/Panel.js

@@ -68,6 +68,14 @@ const selectContentPanelStyles = _ref3 => {
     marginBottom
   };
 };
+const selectControlPanelStyles = _ref4 => {
+  let {
+    contentPanelBackgroundColor
+  } = _ref4;
+  return {
+    backgroundColor: contentPanelBackgroundColor
+  };
+};
 
 /**
  * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
@@ -79,7 +87,7 @@ const selectContentPanelStyles = _ref3 => {
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {
     openIds = [],
     panelId,
@@ -93,7 +101,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
     controlRef,
     content,
     ...rest
-  } = _ref4;
+  } = _ref5;
   const [containerHeight, setContainerHeight] = useState(null);
   const isExpanded = openIds.includes(panelId);
   const selectedProps = selectProps({
@@ -135,14 +143,17 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
   }) : /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: themeTokens,
-    children: [/*#__PURE__*/_jsx(ExpandCollapseControl, {
-      ...selectedProps,
-      isExpanded: isExpanded,
-      tokens: controlTokens,
-      variant: variant,
-      onPress: handleControlPress,
-      ref: controlRef,
-      children: control
+    children: [/*#__PURE__*/_jsx(View, {
+      style: selectControlPanelStyles(themeTokens),
+      children: /*#__PURE__*/_jsx(ExpandCollapseControl, {
+        ...selectedProps,
+        isExpanded: isExpanded,
+        tokens: controlTokens,
+        variant: variant,
+        onPress: handleControlPress,
+        ref: controlRef,
+        children: control
+      })
     }), isExpanded && /*#__PURE__*/_jsx(View, {
       style: {
         borderTopColor: themeTokens.expandDividerColor,

package/lib-module/Footnote/Footnote.js

@@ -165,19 +165,15 @@ const Footnote = _ref6 => {
         children: content
       });
     }
-    return (
-      /*#__PURE__*/
-      // TODO: Extract the OrderedList.Item from the array when the issue #4361 is fixed
-      _jsx(OrderedList, {
-        start: number,
-        children: [/*#__PURE__*/_jsx(OrderedList.Item, {
-          children: /*#__PURE__*/_jsx(Text, {
-            style: selectCustomContentFontStyle(themeTokens),
-            children: content
-          })
-        }, number)]
-      })
-    );
+    return /*#__PURE__*/_jsx(OrderedList, {
+      start: number,
+      children: /*#__PURE__*/_jsx(OrderedList.Item, {
+        children: /*#__PURE__*/_jsx(Text, {
+          style: selectCustomContentFontStyle(themeTokens),
+          children: content
+        })
+      }, number)
+    });
   }, [content, number, themeTokens]);
   useEffect(() => {
     if (isOpen) {

package/lib-module/Link/ChevronLink.js

@@ -18,6 +18,7 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens = {},
     variant,
     dataSet,
+    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
@@ -46,6 +47,7 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
+    onPress: onPress,
     children: children
   });
 });

package/lib-module/Link/InlinePressable.js

@@ -1,6 +1,7 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
@@ -13,18 +14,31 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
+/* eslint-disable react/prop-types */
 import { jsx as _jsx } from "react/jsx-runtime";
 const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
+    onPress,
     ...props
   } = _ref;
+  const handlePress = useCallback(() => {
+    if (onPress) {
+      onPress();
+    }
+  }, [onPress]);
+  const handleKeyPress = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handlePress();
+    }
+  }, [handlePress]);
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
+    onPress: handlePress,
+    onKeyDown: Platform.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib-module/Link/LinkBase.js

@@ -178,6 +178,7 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
+    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib-module/OrderedList/OrderedList.js

@@ -5,25 +5,6 @@ import OrderedListBase from './OrderedListBase';
 import Item from './Item';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const getChildrenWithParentVariants = (variant, children, start) => {
-  if (variant) return children.map((child, i) => {
-    var _child$props;
-    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-    return {
-      ...child,
-      props: {
-        ...child.props,
-        index: start + i,
-        isLastChild: i === children.length - 1,
-        variant: {
-          ...existingChildVariants,
-          ...variant
-        }
-      }
-    };
-  });
-  return children;
-};
 const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -31,7 +12,27 @@ const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant,
     ...rest
   } = _ref;
-  const childrenWithParentVariants = useMemo(() => getChildrenWithParentVariants(variant, children, start), [children, variant, start]);
+  const childrenWithParentVariants = useMemo(() => {
+    const addVariantToProps = (child, i, isLastChild) => {
+      var _child$props;
+      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      return /*#__PURE__*/React.cloneElement(child, {
+        index: start + i,
+        isLastChild,
+        variant: {
+          ...existingChildVariants,
+          ...variant
+        }
+      });
+    };
+    if (variant) {
+      if (Array.isArray(children)) {
+        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+      }
+      return [addVariantToProps(children, 0, true)];
+    }
+    return children;
+  }, [children, variant, start]);
   return /*#__PURE__*/_jsx(OrderedListBase, {
     ref: ref,
     ...selectProps(rest),