@telus-uds/components-base 3.29.1 → 3.31.0

package/lib/esm/Carousel/CarouselThumbnail.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Image from "react-native-web/dist/exports/Image";
+import View from "react-native-web/dist/exports/View";
 import { useCarousel } from './CarouselContext';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '../Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectPressableTokens = _ref => {
   let {
     borderColor,
@@ -23,17 +26,64 @@ const selectPressableTokens = _ref => {
   };
 };
 
+// Play icon overlay appearance is consistent across all brands and is not theme-configurable.
+// The circle occupies 55% of the thumbnail size, and the icon occupies 55% of the circle diameter.
+const PLAY_ICON_RATIO = 0.55;
+const PLAY_ICON_BORDER_RADIUS_DIVISOR = 2;
+const selectImageStyles = size => ({
+  width: size,
+  height: size
+});
+const selectSelectedStyles = _ref2 => {
+  let {
+    selectedBorderColor,
+    selectedBorderWidth,
+    padding,
+    margin
+  } = _ref2;
+  return {
+    borderColor: selectedBorderColor,
+    borderWidth: selectedBorderWidth,
+    padding: padding - selectedBorderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectNonSelectedStyles = _ref3 => {
+  let {
+    borderWidth,
+    padding,
+    margin,
+    selectedBorderWidth
+  } = _ref3;
+  return {
+    padding: padding - borderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectPlayIconCircleStyles = thumbnailSize => {
+  const diameter = thumbnailSize * PLAY_ICON_RATIO;
+  return {
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / PLAY_ICON_BORDER_RADIUS_DIVISOR
+  };
+};
+const selectPlayIconTokens = thumbnailSize => ({
+  size: thumbnailSize * PLAY_ICON_RATIO * PLAY_ICON_RATIO
+});
+
 /**
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     accessibilityLabel,
     alt,
     index,
+    isVideo,
     src
-  } = _ref2;
+  } = _ref4;
   const {
     activeIndex,
     itemLabel,
@@ -55,59 +105,101 @@ const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     selectedBorderColor,
     selectedBorderWidth,
     size,
-    margin
+    margin,
+    playIcon
   } = getThumbnailTokens({
     viewport
   });
-  const styles = {
-    image: {
-      height: size,
-      width: size
-    },
-    selected: {
-      borderColor: selectedBorderColor,
-      borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth,
-      marginBottom: margin + selectedBorderWidth
-    },
-    nonSelected: {
-      padding: padding - borderWidth,
-      marginBottom: margin + selectedBorderWidth
-    }
-  };
   return /*#__PURE__*/_jsx(Pressable, {
     onKeyDown: handleKeyDown,
     onPress: handlePress,
-    style: _ref3 => {
+    style: _ref5 => {
       let {
         hovered,
         pressed,
         focused
-      } = _ref3;
+      } = _ref5;
       const pressableStyles = selectPressableTokens(getThumbnailTokens({
         hover: hovered,
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex ? [styles.selected, {
-        outline: 'none'
-      }] : styles.nonSelected];
+      return [pressableStyles, index === activeIndex ? [selectSelectedStyles({
+        selectedBorderColor,
+        selectedBorderWidth,
+        padding,
+        margin
+      }), staticStyles.selectedPressableOutline] : selectNonSelectedStyles({
+        borderWidth,
+        padding,
+        margin,
+        selectedBorderWidth
+      })];
     },
     ref: ref,
-    children: /*#__PURE__*/_jsx(Image, {
-      accessibilityIgnoresInvertColors: true,
-      accessibilityLabel: accessibilityLabel ?? alt,
-      source: src,
-      style: styles.image,
-      title: thumbnailTitle
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.imageContainer, selectImageStyles(size)],
+      children: [/*#__PURE__*/_jsx(Image, {
+        accessibilityIgnoresInvertColors: true,
+        accessibilityLabel: accessibilityLabel ?? alt,
+        source: src,
+        style: selectImageStyles(size),
+        title: thumbnailTitle
+      }), isVideo && playIcon && /*#__PURE__*/_jsx(View, {
+        style: staticStyles.playIconOverlayContainer,
+        testID: `play-icon-overlay-${index}`,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [selectPlayIconCircleStyles(size), staticStyles.playIconCircleBackground],
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: playIcon,
+            tokens: {
+              ...selectPlayIconTokens(size),
+              color: staticStyles.playIconSymbol.color
+            }
+          })
+        })
+      })]
     })
   }, src);
 });
 CarouselThumbnail.displayName = 'CarouselThumbnail';
 CarouselThumbnail.propTypes = {
+  /** Accessibility label for screen readers, overrides the alt text */
   accessibilityLabel: PropTypes.string,
+  /** Alt text for the thumbnail image */
   alt: PropTypes.string,
+  /** Zero-based index of this thumbnail within the carousel */
   index: PropTypes.number,
-  src: PropTypes.string
+  /**
+   * When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video.
+   */
+  isVideo: PropTypes.bool,
+  /** Image source URI (web) or local asset require() (native) */
+  src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
+const staticStyles = StyleSheet.create({
+  imageContainer: {
+    position: 'relative'
+  },
+  playIconOverlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selectedPressableOutline: {
+    outlineStyle: 'none'
+  },
+  playIconCircleBackground: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  playIconSymbol: {
+    color: 'rgb(255, 255, 255)'
+  }
+});
 export default CarouselThumbnail;

package/lib/esm/Carousel/CarouselThumbnailNavigation.js

@@ -45,12 +45,14 @@ const CarouselThumbnailNavigation = /*#__PURE__*/React.forwardRef((_ref, ref) =>
         let {
           accessibilityLabel,
           alt,
+          isVideo,
           src
         } = _ref2;
         return /*#__PURE__*/_jsx(CarouselThumbnail, {
           accessibilityLabel: accessibilityLabel,
           alt: alt,
           index: index,
+          isVideo: isVideo,
           src: src
         }, src);
       })
@@ -63,9 +65,14 @@ CarouselThumbnailNavigation.propTypes = {
    * An array of objects containing information on the thumbnail images.
    */
   thumbnails: PropTypes.arrayOf(PropTypes.shape({
+    /** Accessibility label for the thumbnail image, used by assistive technologies. */
     accessibilityLabel: PropTypes.string,
+    /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
     alt: PropTypes.string,
-    src: PropTypes.string
+    /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+    isVideo: PropTypes.bool,
+    /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   })).isRequired
 };
 export default CarouselThumbnailNavigation;

package/lib/esm/Footnote/FootnoteLink.js

@@ -9,28 +9,28 @@ import { htmlAttrs, selectSystemProps, useCopy, viewProps, wrapStringsInText, va
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
-
-// The top property varies between devices due to how devices render the viewport.
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const DEFAULT_LINE_HEIGHT = 1;
+const LINE_HEIGHT_MULTIPLIER = 2;
 const selectTextStyle = _ref => {
   let {
     fontSize,
     lineHeight
   } = _ref;
-  return {
-    fontSize,
-    lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
-    ...Platform.select({
-      ios: {
-        top: -fontSize / 2
-      },
-      android: {
-        top: fontSize / 4
-      },
-      web: {
-        top: -fontSize / 2.8
-      }
-    })
-  };
+  return Platform.select({
+    native: {
+      fontSize: fontSize / HALF_FONT_SIZE,
+      lineHeight: fontSize,
+      position: 'relative',
+      top: -(fontSize * lineHeight) / HALF_FONT_SIZE
+    },
+    web: {
+      fontSize,
+      lineHeight: lineHeight !== DEFAULT_LINE_HEIGHT ? lineHeight : fontSize * LINE_HEIGHT_MULTIPLIER,
+      top: -fontSize / QUARTER_FONT_SIZE
+    }
+  });
 };
 const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
@@ -74,6 +74,7 @@ const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
 });
 FootnoteLink.displayName = 'FootnoteLink';
+FootnoteLink.__UDS_COMPONENT_NAME__ = 'FootnoteLink';
 const copyShape = PropTypes.shape({
   a11yLabel: PropTypes.string.isRequired
 });

package/lib/esm/Listbox/ListboxOverlay.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
 import Portal from '../Portal';
 import { useThemeTokens } from '../ThemeProvider';
 import Card from '../Card';
@@ -60,7 +61,12 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         paddingLeft: paddingHorizontal,
         paddingRight: paddingHorizontal
       },
-      children: children
+      children: Platform.OS !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
+        style: {
+          maxHeight
+        },
+        children: children
+      }) : children
     })
   });
 });

package/lib/esm/MultiSelectFilter/ModalOverlay.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { Portal } from '@gorhom/portal';
+import { Portal as GorhomPortal } from '@gorhom/portal';
+import LocalPortal from '../Portal/Portal';
 import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
@@ -116,7 +117,12 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     copy
   });
   const closeLabel = getCopy('closeButton');
-  return /*#__PURE__*/_jsx(Portal, {
+
+  // On web, use the local Portal (always appends to document.body) to ensure correct
+  // absolute positioning in MFE/iframe contexts. @gorhom/portal may render its host
+  // outside the iframe's document, causing coordinate mismatches when scrolled.
+  const PortalComponent = Platform.OS === 'web' ? LocalPortal : GorhomPortal;
+  return /*#__PURE__*/_jsx(PortalComponent, {
     children: /*#__PURE__*/_jsx(View, {
       ref: containerRef,
       onLayout: onLayout,

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Portal } from '@gorhom/portal';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Dimensions from "react-native-web/dist/exports/Dimensions";
@@ -212,20 +211,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setIsOpen(false);
     onCancel();
   };
-  const appRootRef = React.useRef(null);
-  const [rootOffsets, setRootOffsets] = React.useState(null);
-  React.useEffect(() => {
-    if (rootOffsets) return;
-    appRootRef.current?.measureInWindow((x, y) => {
-      // Only set offsets if they are positive
-      // this is because we want to avoid negative offsets that could cause
-      // the dropdown to be positioned incorrectly in some situations
-      if (y > 0) setRootOffsets({
-        horizontal: x,
-        vertical: y
-      });
-    });
-  }, [isOpen, rootOffsets]);
   const {
     align,
     offsets
@@ -242,8 +227,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         left: 'left'
       },
       offsets: {
-        vertical: 4 - (rootOffsets?.vertical || 0),
-        horizontal: -rootOffsets?.horizontal || 0
+        vertical: 4
       }
     }
   });
@@ -380,12 +364,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     })]
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(View, {
-        ref: appRootRef,
-        style: styles.appRootRef
-      })
-    }), /*#__PURE__*/_jsx(ButtonDropdown, {
+    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
       ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
@@ -466,11 +445,6 @@ const styles = StyleSheet.create({
   },
   scrollContainer: {
     padding: 1
-  },
-  appRootRef: {
-    position: 'absolute',
-    top: 0,
-    left: 0
   }
 });
 

package/lib/esm/Progress/Progress.js

@@ -7,6 +7,8 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import ProgressContext from './ProgressContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const BORDER_SIDES = 2;
+const CENTER_DIVISOR = 2;
 const selectProgressStyles = _ref => {
   let {
     backgroundColor,
@@ -25,6 +27,21 @@ const selectProgressStyles = _ref => {
     ...applyShadowToken(shadow)
   };
 };
+const selectBarWrapperStyles = _ref2 => {
+  let {
+    barHeight,
+    borderRadius,
+    borderWidth,
+    height
+  } = _ref2;
+  return {
+    height: barHeight,
+    width: '100%',
+    position: 'absolute',
+    top: (height - borderWidth * BORDER_SIDES - barHeight) / CENTER_DIVISOR,
+    borderRadius
+  };
+};
 
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
@@ -38,10 +55,11 @@ const selectProgressStyles = _ref => {
  *
  * - Use the following tokens to customize the appearance:
  *   - `backgroundColor` for the background color of the progress container,
+ *   - `barHeight` to control the height of the progress bars displayed within the container,
  *   - `borderColor` to control the color of the border,
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
- *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `height` to control the height of the progress bar container.
  *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
@@ -62,16 +80,23 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const Progress = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     tokens,
     variant,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const themeTokens = useThemeTokens('Progress', tokens, variant);
-  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
   const layers = variant?.layers ?? false;
+  const {
+    barHeight,
+    height
+  } = themeTokens;
+  const content = barHeight && barHeight !== height ? /*#__PURE__*/_jsx(View, {
+    style: selectBarWrapperStyles(themeTokens),
+    children: children
+  }) : children;
   return /*#__PURE__*/_jsx(ProgressContext.Provider, {
     value: {
       layers
@@ -80,7 +105,7 @@ const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       ref: ref,
       style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
       ...selectProps(rest),
-      children: children
+      children: content
     })
   });
 });