@telus-uds/components-base 3.29.1 → 3.31.0

package/src/Footnote/FootnoteLink.jsx

@@ -14,22 +14,26 @@ import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-// The top property varies between devices due to how devices render the viewport.
-const selectTextStyle = ({ fontSize, lineHeight }) => ({
-  fontSize,
-  lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
-  ...Platform.select({
-    ios: {
-      top: -fontSize / 2
-    },
-    android: {
-      top: fontSize / 4
+const HALF_FONT_SIZE = 2
+const QUARTER_FONT_SIZE = 4
+const DEFAULT_LINE_HEIGHT = 1
+const LINE_HEIGHT_MULTIPLIER = 2
+
+const selectTextStyle = ({ fontSize, lineHeight }) =>
+  Platform.select({
+    native: {
+      fontSize: fontSize / HALF_FONT_SIZE,
+      lineHeight: fontSize,
+      position: 'relative',
+      top: -(fontSize * lineHeight) / HALF_FONT_SIZE
     },
     web: {
-      top: -fontSize / 2.8
+      fontSize,
+      lineHeight:
+        lineHeight !== DEFAULT_LINE_HEIGHT ? lineHeight : fontSize * LINE_HEIGHT_MULTIPLIER,
+      top: -fontSize / QUARTER_FONT_SIZE
     }
   })
-})
 
 const FootnoteLink = React.forwardRef(
   ({ copy = 'en', content = [], onClick, tokens, variant = {}, ...rest }, ref) => {
@@ -70,6 +74,7 @@ const FootnoteLink = React.forwardRef(
 )
 
 FootnoteLink.displayName = 'FootnoteLink'
+FootnoteLink.__UDS_COMPONENT_NAME__ = 'FootnoteLink'
 
 const copyShape = PropTypes.shape({ a11yLabel: PropTypes.string.isRequired })
 

package/src/Listbox/ListboxOverlay.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet, Platform } from 'react-native'
+import { View, StyleSheet, Platform, ScrollView } from 'react-native'
 import Portal from '../Portal'
 import { useThemeTokens } from '../ThemeProvider'
 import Card from '../Card'
@@ -69,7 +69,11 @@ const DropdownOverlay = React.forwardRef(
             paddingRight: paddingHorizontal
           }}
         >
-          {children}
+          {Platform.OS !== 'web' ? (
+            <ScrollView style={{ maxHeight }}>{children}</ScrollView>
+          ) : (
+            children
+          )}
         </Card>
       </View>
     )

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-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'
@@ -105,8 +106,13 @@ const ModalOverlay = React.forwardRef(
     const getCopy = useCopy({ dictionary, copy })
     const closeLabel = getCopy('closeButton')
 
+    // 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 (
-      <Portal>
+      <PortalComponent>
         <View
           ref={containerRef}
           onLayout={onLayout}
@@ -135,7 +141,7 @@ const ModalOverlay = React.forwardRef(
             {children}
           </Card>
         </View>
-      </Portal>
+      </PortalComponent>
     )
   }
 )

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Portal } from '@gorhom/portal'
 import { View, StyleSheet, Dimensions, SafeAreaView, Platform, ScrollView } from 'react-native'
 import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
@@ -221,27 +220,11 @@ const MultiSelectFilter = React.forwardRef(
       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 } = useResponsiveProp({
       xs: { align: { top: 'top', left: 'left' } },
       sm: {
         align: { top: 'bottom', left: 'left' },
-        offsets: {
-          vertical: 4 - (rootOffsets?.vertical || 0),
-          horizontal: -rootOffsets?.horizontal || 0
-        }
+        offsets: { vertical: 4 }
       }
     })
 
@@ -367,14 +350,6 @@ const MultiSelectFilter = React.forwardRef(
 
     return (
       <>
-        {/* 
-        This View is rendered inside a Portal to determine the application's root position.
-        Capturing it is crucial to determine offsets to position the Modal correctly, preventing
-        misalignment that can occur when the Portal does not render the Modal at the body level.
-        */}
-        <Portal>
-          <View ref={appRootRef} style={styles.appRootRef} />
-        </Portal>
         <ButtonDropdown
           ref={sourceRef}
           key={id}
@@ -464,11 +439,6 @@ const styles = StyleSheet.create({
   },
   scrollContainer: {
     padding: 1
-  },
-  appRootRef: {
-    position: 'absolute',
-    top: 0,
-    left: 0
   }
 })
 

package/src/Progress/Progress.jsx

@@ -8,6 +8,9 @@ import ProgressContext from './ProgressContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const BORDER_SIDES = 2
+const CENTER_DIVISOR = 2
+
 const selectProgressStyles = ({
   backgroundColor,
   borderWidth,
@@ -24,6 +27,14 @@ const selectProgressStyles = ({
   ...applyShadowToken(shadow)
 })
 
+const selectBarWrapperStyles = ({ barHeight, borderRadius, borderWidth, height }) => ({
+  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.
  *
@@ -36,10 +47,11 @@ const selectProgressStyles = ({
  *
  * - 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,8 +74,15 @@ const selectProgressStyles = ({
  */
 const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   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 ? (
+      <View style={selectBarWrapperStyles(themeTokens)}>{children}</View>
+    ) : (
+      children
+    )
 
   return (
     <ProgressContext.Provider value={{ layers }}>
@@ -72,7 +91,7 @@ const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref)
         style={[staticStyles.progressContainer, selectProgressStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        {children}
+        {content}
       </View>
     </ProgressContext.Provider>
   )