@telus-uds/components-base 3.26.0 → 3.27.0

package/src/Card/CardBase.jsx

@@ -116,6 +116,44 @@ const setBackgroundImage = ({
   )
 }
 
+const selectPaddedContentStyles = ({
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  hasInteractiveBorder
+}) => ({
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  ...(hasInteractiveBorder
+    ? {
+        borderWidth,
+        borderColor,
+        borderRadius
+      }
+    : {})
+})
+
+const selectInteractiveOverlayStyles = ({ backgroundColor, borderRadius, borderWidth }) => {
+  const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth)
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor,
+    borderRadius: adjustedBorderRadius,
+    pointerEvents: 'none',
+    zIndex: 1
+  }
+}
+
 // Ensure explicit selection of tokens
 export const selectStyles = ({
   flex,
@@ -214,13 +252,55 @@ const CardBase = React.forwardRef(
     const fullBleedPosition = useResponsiveProp(fullBleedContentPosition, 'bottom')
 
     if (backgroundImage && src) {
-      const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = cardStyle
+      const {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        borderWidth,
+        borderColor,
+        borderRadius,
+        backgroundColor,
+        ...containerStyle
+      } = cardStyle
 
       const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
-      const paddedContent = hasPadding ? (
-        <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
-      ) : (
-        children
+      const hasInteractiveBorder = borderWidth && borderWidth > 0
+      const hasInteractiveOverlay = isOverlayColor(backgroundColor)
+
+      const paddedContent =
+        hasPadding || hasInteractiveBorder ? (
+          <View
+            style={selectPaddedContentStyles({
+              paddingTop,
+              paddingBottom,
+              paddingLeft,
+              paddingRight,
+              borderWidth,
+              borderColor,
+              borderRadius,
+              hasInteractiveBorder
+            })}
+          >
+            {children}
+          </View>
+        ) : (
+          children
+        )
+
+      const contentWithOverlay = (
+        <>
+          {hasInteractiveOverlay && Platform.OS === 'web' && (
+            <View
+              style={selectInteractiveOverlayStyles({
+                backgroundColor,
+                borderRadius,
+                borderWidth
+              })}
+            />
+          )}
+          <View style={staticStyles.contentOverlay}>{paddedContent}</View>
+        </>
       )
 
       content = setBackgroundImage({
@@ -229,8 +309,8 @@ const CardBase = React.forwardRef(
         backgroundImageResizeMode,
         backgroundImagePosition,
         backgroundImageAlign,
-        content: paddedContent,
-        cardStyle: containerStyle
+        content: contentWithOverlay,
+        cardStyle: { ...containerStyle, borderRadius }
       })
 
       return (
@@ -314,7 +394,7 @@ const staticStyles = StyleSheet.create({
     position: 'relative',
     width: '100%',
     height: '100%',
-    zIndex: 1
+    zIndex: 2
   },
   containContainer: {
     width: '100%',

package/src/Card/PressableCardBase.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform, View, StyleSheet } from 'react-native'
-
 import { useViewport } from '../ViewportProvider'
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider'
 import {
@@ -26,6 +25,71 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   viewProps
 ])
 
+const selectFocusOverlayContainerStyles = (tokens) => {
+  const { flex, minWidth, marginTop, marginBottom, marginLeft, marginRight } = tokens
+
+  return {
+    flex: flex || 1,
+    minWidth: minWidth || 0,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight
+  }
+}
+
+const selectFocusBorderStyles = (tokens) => {
+  const { borderWidth, borderColor, borderRadius } = tokens
+
+  return {
+    borderWidth,
+    borderColor,
+    borderRadius: borderRadius || 0
+  }
+}
+
+const FocusBorderOverlay = ({ tokens, pressableState, children }) => {
+  const { borderWidth = 0 } = tokens
+  const showFocusBorder = pressableState.focused && borderWidth > 0
+
+  return (
+    <View
+      style={[
+        staticStyles.focusOverlayContainer,
+        selectFocusOverlayContainerStyles(tokens),
+        Platform.OS === 'web' && staticStyles.webOutlineNone
+      ]}
+    >
+      {children}
+      {showFocusBorder && (
+        <View
+          style={[staticStyles.focusBorder, selectFocusBorderStyles(tokens)]}
+          accessible={false}
+          importantForAccessibility="no"
+        />
+      )}
+    </View>
+  )
+}
+
+FocusBorderOverlay.propTypes = {
+  tokens: PropTypes.shape({
+    flex: PropTypes.number,
+    minWidth: PropTypes.number,
+    marginTop: PropTypes.number,
+    marginBottom: PropTypes.number,
+    marginLeft: PropTypes.number,
+    marginRight: PropTypes.number,
+    borderColor: PropTypes.string,
+    borderWidth: PropTypes.number,
+    borderRadius: PropTypes.number
+  }).isRequired,
+  pressableState: PropTypes.shape({
+    focused: PropTypes.bool
+  }).isRequired,
+  children: PropTypes.node
+}
+
 const tokenKeys = [
   'flex',
   'backgroundColor',
@@ -103,11 +167,53 @@ const PressableCardBase = React.forwardRef(
         'PressableCard'
       )
 
-    const getCardTokens = (pressableState) => selectTokens('Card', getTokens(pressableState))
+    const getCardTokens = (pressableState) => {
+      const allTokens = getTokens(pressableState)
+      const cardTokens = selectTokens('Card', allTokens)
+
+      // Handle focus border transparency to avoid double borders
+      if (pressableState.focused && allTokens.borderWidth > 0) {
+        const result = {
+          ...cardTokens,
+          borderColor: 'transparent'
+        }
+
+        // Also handle backgroundImage for interactive states
+        if (backgroundImage) {
+          const { hovered, pressed, focused } = pressableState || {}
+          const isInteractiveState = hovered || pressed || focused
+
+          if (!isInteractiveState) {
+            const { backgroundColor, ...restTokens } = result
+            return restTokens
+          }
+        }
+
+        return result
+      }
+
+      // Handle backgroundImage when not in focus state
+      if (backgroundImage) {
+        const { hovered, pressed, focused } = pressableState || {}
+        const isInteractiveState = hovered || pressed || focused
+
+        if (!isInteractiveState) {
+          const { backgroundColor, ...restTokens } = cardTokens
+          return restTokens
+        }
+      }
+
+      return cardTokens
+    }
+
     const getOuterBorderStyle = (pressableState) => {
       const {
         flex,
         minWidth,
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
         outerBorderColor,
         outerBorderGap = 0,
         outerBorderWidth = 0,
@@ -116,6 +222,10 @@ const PressableCardBase = React.forwardRef(
       return {
         flex,
         minWidth: minWidth + outerBorderGap + outerBorderWidth,
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
         ...applyOuterBorder({ outerBorderColor, outerBorderGap, outerBorderWidth, borderRadius }),
         ...Platform.select({ web: { outline: 'none' } })
       }
@@ -194,13 +304,15 @@ const PressableCardBase = React.forwardRef(
         {...selectProps({ ...rest, accessibilityRole })}
       >
         {(pressableState) => (
-          <CardBase
-            tokens={getCardTokens(pressableState)}
-            backgroundImage={backgroundImage}
-            fullBleedContent={fullBleedContent}
-          >
-            {typeof children === 'function' ? children(getCardState(pressableState)) : children}
-          </CardBase>
+          <FocusBorderOverlay tokens={getTokens(pressableState)} pressableState={pressableState}>
+            <CardBase
+              tokens={getCardTokens(pressableState)}
+              backgroundImage={backgroundImage}
+              fullBleedContent={fullBleedContent}
+            >
+              {typeof children === 'function' ? children(getCardState(pressableState)) : children}
+            </CardBase>
+          </FocusBorderOverlay>
         )}
       </Pressable>
     )
@@ -218,6 +330,20 @@ const staticStyles = StyleSheet.create({
     alignItems: 'stretch',
     justifyContent: 'flex-start',
     textDecorationLine: 'none'
+  },
+  focusOverlayContainer: {
+    position: 'relative'
+  },
+  webOutlineNone: {
+    outline: 'none'
+  },
+  focusBorder: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none'
   }
 })
 

package/src/Carousel/Carousel.jsx

@@ -45,12 +45,13 @@ import {
   LARGE_VIEWPORT_MARGIN,
   DEFAULT_VIEWPORT_MARGIN,
   PEEKING_MULTIPLIER,
-  ACTIVE_INDEX_OFFSET_MULTIPLIER,
   NEGATIVE_MULTIPLIER,
   TRANSITION_MODES,
   SWIPE_RELEASE_STYLES,
   INSTANT_ANIMATION_DURATION,
-  DEFAULT_SWIPE_RELEASE_DURATION
+  DEFAULT_SWIPE_RELEASE_DURATION,
+  POSITION_VARIANTS,
+  POSITION_PROPERTIES
 } from './Constants'
 
 const staticStyles = StyleSheet.create({
@@ -112,7 +113,7 @@ const selectHeroContainerStyles = (width, hidden) => ({
 })
 
 const getDynamicPositionProperty = (areStylesAppliedOnPreviousButton) =>
-  areStylesAppliedOnPreviousButton ? 'left' : 'right'
+  areStylesAppliedOnPreviousButton ? POSITION_PROPERTIES.LEFT : POSITION_PROPERTIES.RIGHT
 
 const selectControlButtonPositionStyles = ({
   positionVariant,
@@ -122,24 +123,41 @@ const selectControlButtonPositionStyles = ({
   enablePeeking,
   enableDisplayMultipleItemsPerSlide,
   isAutoPlayEnabled,
-  viewport
+  viewport,
+  maxWidth,
+  viewportWidth
 }) => {
   const styles = {}
-  if (positionVariant === 'edge') {
-    styles[positionProperty] = -1 * (buttonWidth / 2)
-  } else if (positionVariant === 'inside') {
-    styles[positionProperty] = DEFAULT_POSITION_OFFSET
-  } else if (positionVariant === 'outside') {
+
+  let positionOffset = 0
+
+  if (positionVariant === POSITION_VARIANTS.EDGE) {
+    positionOffset = -1 * (buttonWidth / 2)
+  } else if (positionVariant === POSITION_VARIANTS.INSIDE) {
+    positionOffset = DEFAULT_POSITION_OFFSET
+  } else if (positionVariant === POSITION_VARIANTS.OUTSIDE) {
     if (
       enablePeeking ||
       enableDisplayMultipleItemsPerSlide ||
       (isAutoPlayEnabled && viewport === 'xs')
     ) {
-      styles[positionProperty] = 0
+      positionOffset = 0
     } else {
-      styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth)
+      positionOffset = -1 * (spaceBetweenSlideAndButton + buttonWidth)
     }
   }
+
+  if (enablePeeking) {
+    if (positionProperty === POSITION_PROPERTIES.RIGHT) {
+      const rightMargin = (viewportWidth - maxWidth) / 2
+      positionOffset += rightMargin
+    } else if (positionProperty === POSITION_PROPERTIES.LEFT) {
+      const leftMargin = (viewportWidth - maxWidth) / 2
+      positionOffset += leftMargin
+    }
+  }
+
+  styles[positionProperty] = positionOffset
   return styles
 }
 
@@ -153,7 +171,9 @@ const selectPreviousNextNavigationButtonStyles = (
   enablePeeking,
   enableDisplayMultipleItemsPerSlide,
   isAutoPlayEnabled,
-  viewport
+  viewport,
+  maxWidth,
+  viewportWidth
 ) => {
   const styles = {
     zIndex: 1,
@@ -177,7 +197,9 @@ const selectPreviousNextNavigationButtonStyles = (
       enablePeeking,
       enableDisplayMultipleItemsPerSlide,
       isAutoPlayEnabled,
-      viewport
+      viewport,
+      maxWidth,
+      viewportWidth
     })
   }
 }
@@ -246,7 +268,7 @@ const getMaximumItemsForSlide = (enableDisplayMultipleItemsPerSlide, viewport) =
   return ITEMS_PER_VIEWPORT_XS_SM
 }
 
-const selectRootContainerStyles = (enableHero, viewport) => {
+const selectRootContainerStyles = (enableHero, viewport, enablePeeking) => {
   if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
     return {
       alignItems: 'center'
@@ -257,16 +279,26 @@ const selectRootContainerStyles = (enableHero, viewport) => {
       paddingHorizontal: 16
     }
   }
+  if (enablePeeking) {
+    return {
+      width: '100%'
+    }
+  }
   return {}
 }
 
-const selectMainContainerStyles = (enableHero, viewport, maxWidth) => {
-  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+const selectMainContainerStyles = (enableHero, viewport, maxWidth, enablePeeking) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web' && !enablePeeking) {
     return {
       width: '100%',
       maxWidth: maxWidth || 1200
     }
   }
+  if (enablePeeking) {
+    return {
+      width: '100%'
+    }
+  }
   if (maxWidth !== null && maxWidth !== undefined) {
     return {
       maxWidth,
@@ -277,16 +309,24 @@ const selectMainContainerStyles = (enableHero, viewport, maxWidth) => {
   return {}
 }
 
-const selectNavigationStyles = (tabs, enableHero, viewport) => {
+const selectNavigationStyles = (tabs, enableHero, viewport, enablePeeking, maxWidth) => {
   let marginHorizontal = 0
 
   if (enableHero && tabs) {
     marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN
   }
 
-  return {
+  const styles = {
     marginHorizontal
   }
+
+  if (enablePeeking && maxWidth) {
+    styles.maxWidth = maxWidth
+    styles.alignSelf = 'center'
+    styles.width = '100%'
+  }
+
+  return styles
 }
 
 /**
@@ -295,22 +335,16 @@ const selectNavigationStyles = (tabs, enableHero, viewport) => {
  * @param {number} containerWidth - The width of the carousel container.
  * @param {boolean} enablePeeking - Flag indicating whether peeking is enabled.
  * @param {Object} viewport - The viewport configuration object used to determine peeking properties.
- * @param {React.MutableRefObject<number>} activeIndexRef - A ref object holding the current active index of the carousel.
+ * @param {number} maxWidth - The maximum width constraint for the carousel content.
  * @returns {number} The calculated final width of the carousel container.
  */
-const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef) => {
+const calculateFinalWidth = (containerWidth, enablePeeking, viewport, maxWidth) => {
   let finalWidth = containerWidth
 
   if (enablePeeking) {
-    const { peekingGap, peekingMiddleSpace, peekingMarginLeft } = getPeekingProps(viewport)
-    const slideWide =
-      containerWidth - (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER)
-
-    if (activeIndexRef.current === 0) {
-      finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace
-    } else {
-      finalWidth = slideWide + peekingGap
-    }
+    const { peekingGap, peekingMiddleSpace } = getPeekingProps(viewport)
+    const baseWidth = maxWidth || containerWidth
+    finalWidth = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap
   }
 
   return finalWidth
@@ -431,7 +465,15 @@ const Carousel = React.forwardRef(
 
     const contentMaxWidthValue = useResponsiveProp(contentMaxWidth)
     const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
-    const maxWidth = resolveContentMaxWidth(contentMaxWidthValue, responsiveWidth)
+
+    let maxWidth = null
+    if (enablePeeking || contentMaxWidth !== undefined) {
+      maxWidth =
+        contentMaxWidthValue === undefined
+          ? responsiveWidth
+          : resolveContentMaxWidth(contentMaxWidthValue, responsiveWidth)
+    }
+
     const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport)
     const autoPlayFeatureEnabled =
       autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1
@@ -494,8 +536,17 @@ const Carousel = React.forwardRef(
     const isSwiping = React.useRef(false)
     const autoPlayRef = React.useRef(null)
 
+    const [rootContainerLayout, setRootContainerLayout] = React.useState({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    })
+    const rootContainerLayoutRef = React.useRef(rootContainerLayout)
+
     const isFirstSlide = !activeIndex
     const isLastSlide = activeIndex + 1 >= totalItems
+    const currentViewportWidth = rootContainerLayout.width
 
     const handleAnimationStart = React.useCallback(
       (...args) => {
@@ -518,21 +569,16 @@ const Carousel = React.forwardRef(
 
     const updateOffset = React.useCallback(() => {
       if (enablePeeking) {
-        const { peekingGap, peekingMiddleSpace, peekingMarginLeft } = getPeekingProps(viewport)
+        const { peekingGap, peekingMiddleSpace } = getPeekingProps(viewport)
 
         let finalWidth
-        const slideWide =
-          containerLayoutRef.current.width -
-          (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER)
+        const baseWidth = maxWidth || containerLayoutRef.current.width
+        const slideWide = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER
 
         if (activeIndexRef.current === 0) {
           finalWidth = 0
         } else {
-          finalWidth =
-            slideWide +
-            peekingMarginLeft -
-            peekingMiddleSpace +
-            (slideWide + peekingGap) * (activeIndexRef.current - ACTIVE_INDEX_OFFSET_MULTIPLIER)
+          finalWidth = (slideWide + peekingGap) * activeIndexRef.current
         }
 
         animatedX.current = finalWidth * NEGATIVE_MULTIPLIER
@@ -558,7 +604,7 @@ const Carousel = React.forwardRef(
         })
         heroPan.setValue({ x: 0, y: 0 })
       }
-    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking])
+    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking, maxWidth])
 
     const animate = React.useCallback(
       (panToAnimate, toValue, toIndex, isSwipeRelease = false) => {
@@ -664,7 +710,7 @@ const Carousel = React.forwardRef(
           containerLayoutRef.current.width,
           enablePeeking,
           viewport,
-          activeIndexRef
+          maxWidth
         )
 
         toValue.x = finalWidth * -1 * calcDelta
@@ -710,7 +756,8 @@ const Carousel = React.forwardRef(
         enablePeeking,
         pan,
         heroPan,
-        enableHero
+        enableHero,
+        maxWidth
       ]
     )
 
@@ -767,6 +814,10 @@ const Carousel = React.forwardRef(
       heroContainerLayoutRef.current = heroContainerLayout
     }, [heroContainerLayout])
 
+    React.useEffect(() => {
+      rootContainerLayoutRef.current = rootContainerLayout
+    }, [rootContainerLayout])
+
     React.useEffect(() => {
       pan.x.addListener(({ value }) => {
         animatedX.current = value
@@ -849,6 +900,12 @@ const Carousel = React.forwardRef(
       }
     }) => setPreviousNextNavigationButtonWidth(width)
 
+    const onRootContainerLayout = ({
+      nativeEvent: {
+        layout: { x, y, width, height }
+      }
+    }) => setRootContainerLayout((prevState) => ({ ...prevState, x, y, width, height }))
+
     const isSwipeAllowed = React.useCallback(() => {
       if (totalItems === 1) {
         return false
@@ -1071,8 +1128,11 @@ const Carousel = React.forwardRef(
     )
 
     return (
-      <View style={selectRootContainerStyles(enableHero, viewport)}>
-        <View style={selectMainContainerStyles(enableHero, viewport, maxWidth)}>
+      <View
+        style={selectRootContainerStyles(enableHero, viewport, enablePeeking)}
+        onLayout={onRootContainerLayout}
+      >
+        <View style={selectMainContainerStyles(enableHero, viewport, maxWidth, enablePeeking)}>
           <CarouselProvider
             activeIndex={activeIndex}
             goTo={goTo}
@@ -1087,6 +1147,8 @@ const Carousel = React.forwardRef(
               enableDisplayMultipleItemsPerSlide,
               viewport
             )}
+            maxWidth={maxWidth}
+            viewportWidth={currentViewportWidth}
           >
             <View
               style={[
@@ -1113,7 +1175,9 @@ const Carousel = React.forwardRef(
                       enablePeeking,
                       enableDisplayMultipleItemsPerSlide,
                       isAutoPlayEnabled,
-                      viewport
+                      viewport,
+                      maxWidth,
+                      viewportWidth: currentViewportWidth
                     })
                   ]}
                 >
@@ -1139,7 +1203,9 @@ const Carousel = React.forwardRef(
                     enablePeeking,
                     enableDisplayMultipleItemsPerSlide,
                     isAutoPlayEnabled,
-                    viewport
+                    viewport,
+                    maxWidth,
+                    currentViewportWidth
                   )}
                   testID="previous-button-container"
                 >
@@ -1192,22 +1258,7 @@ const Carousel = React.forwardRef(
                     let hidden = !isAnimating && index !== activeIndex
 
                     if (enablePeeking && !isAnimating) {
-                      if (enableDisplayMultipleItemsPerSlide) {
-                        const maxItemsForSlide = getMaximumItemsForSlide(
-                          enableDisplayMultipleItemsPerSlide,
-                          viewport
-                        )
-                        if (
-                          index >= activeIndex * maxItemsForSlide - 1 &&
-                          index < activeIndex * maxItemsForSlide + maxItemsForSlide + 1
-                        ) {
-                          hidden = false
-                        } else {
-                          hidden = true
-                        }
-                      } else if (index >= activeIndex - 1 && index <= activeIndex + 1) {
-                        hidden = false
-                      }
+                      hidden = false
                     } else if (
                       !enablePeeking &&
                       enableDisplayMultipleItemsPerSlide &&
@@ -1250,7 +1301,9 @@ const Carousel = React.forwardRef(
                     enablePeeking,
                     enableDisplayMultipleItemsPerSlide,
                     isAutoPlayEnabled,
-                    viewport
+                    viewport,
+                    maxWidth,
+                    currentViewportWidth
                   )}
                   testID="next-button-container"
                 >
@@ -1268,7 +1321,9 @@ const Carousel = React.forwardRef(
                 </View>
               ) : null}
             </View>
-            <View style={selectNavigationStyles(tabs, enableHero, viewport)}>
+            <View
+              style={selectNavigationStyles(tabs, enableHero, viewport, enablePeeking, maxWidth)}
+            >
               {showPanelNavigation ? activePanelNavigation : null}
             </View>
           </CarouselProvider>