@telus-uds/components-base 3.21.0 → 3.23.0

package/src/Button/ButtonBase.jsx

@@ -16,7 +16,9 @@ import {
   viewProps,
   wrapStringsInText,
   withLinkRouter,
-  contentfulProps
+  contentfulProps,
+  createMediaQueryStyles,
+  StyleSheet as StyleSheetUtils
 } from '../utils'
 import { IconText } from '../Icon'
 
@@ -47,21 +49,26 @@ const selectFlexAndWidthStyles = ({ width, flex }) => {
   return styles
 }
 
-const selectOuterContainerStyles = ({
+const selectOuterContainerStyles = (
+  {
+    opacity,
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap,
+    borderRadius,
+    outerBackgroundColor,
+    alignSelf
+  },
+  heightFull
+) => ({
+  backgroundColor: outerBackgroundColor,
   opacity,
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  borderRadius,
-  outerBackgroundColor
-}) => ({
   ...Platform.select({
     native: {
-      alignSelf: 'flex-start'
-    }
+      alignSelf: alignSelf !== undefined ? alignSelf : 'flex-start'
+    },
+    web: heightFull ? {} : { alignSelf: 'flex-start' }
   }),
-  backgroundColor: outerBackgroundColor,
-  opacity,
   ...applyOuterBorder({
     outerBorderGap,
     outerBorderWidth,
@@ -217,10 +224,14 @@ const ButtonBase = React.forwardRef(
       icon,
       iconPosition = icon ? 'left' : undefined,
       iconProps,
+      heightFull = true,
       ...rawRest
     },
     ref
   ) => {
+    const { themeOptions } = useTheme()
+    const { viewport } = rawRest
+    const enableMediaQueryStyleSheet = themeOptions.enableMediaQueryStyleSheet && viewport
     const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const extraButtonState = { inactive, selected, iconPosition }
     const resolveButtonTokens = (pressableState) =>
@@ -228,9 +239,49 @@ const ButtonBase = React.forwardRef(
 
     const systemProps = selectProps(rest)
 
+    let layoutMediaQueryStyles
+    let flexAndWidthStylesIds
+
+    if (enableMediaQueryStyleSheet) {
+      const defaultPressableState = { pressed: false, hovered: false, focused: false }
+      const defaultTokensByViewport = resolveButtonTokens(defaultPressableState)
+
+      const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce(
+        (acc, [vp, viewportTokens]) => {
+          const flexAndWidthStyles =
+            viewportTokens.width === '100%' && viewportTokens.flex === 1
+              ? selectFlexAndWidthStyles(viewportTokens)
+              : {}
+
+          acc[vp] = {
+            ...staticStyles.row,
+            ...selectWebOnlyStyles(inactive, viewportTokens, systemProps),
+            ...(Object.keys(flexAndWidthStyles).length > 0 ? flexAndWidthStyles : {}),
+            ...selectOuterSizeStyles(viewportTokens)
+          }
+          return acc
+        },
+        {}
+      )
+
+      const mediaQueryStyles = createMediaQueryStyles(layoutTokensByViewport)
+      const { ids, styles } = StyleSheetUtils.create({
+        layout: {
+          ...mediaQueryStyles
+        }
+      })
+
+      layoutMediaQueryStyles = styles.layout
+      flexAndWidthStylesIds = ids.layout
+    }
+
     const getPressableStyle = (pressableState) => {
+      if (enableMediaQueryStyleSheet) {
+        const themeTokens = resolveButtonTokens(pressableState)[viewport]
+        return [layoutMediaQueryStyles, selectOuterContainerStyles(themeTokens)]
+      }
+
       const themeTokens = resolveButtonTokens(pressableState)
-      // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
       const flexAndWidthStyles =
         themeTokens.width === '100%' && themeTokens.flex === 1
           ? selectFlexAndWidthStyles(themeTokens)
@@ -239,12 +290,21 @@ const ButtonBase = React.forwardRef(
       return [
         staticStyles.row,
         selectWebOnlyStyles(inactive, themeTokens, systemProps),
-        selectOuterContainerStyles(themeTokens),
+        selectOuterContainerStyles(themeTokens, heightFull),
         ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []),
         selectOuterSizeStyles(themeTokens)
       ]
     }
-    const { themeOptions } = useTheme()
+
+    const dataSetProp =
+      flexAndWidthStylesIds || rawRest.dataSet
+        ? {
+            dataSet: {
+              ...(flexAndWidthStylesIds ? { media: flexAndWidthStylesIds } : {}),
+              ...rawRest.dataSet
+            }
+          }
+        : {}
 
     return (
       <Pressable
@@ -255,9 +315,12 @@ const ButtonBase = React.forwardRef(
         disabled={inactive}
         hrefAttrs={hrefAttrs}
         {...systemProps}
+        {...dataSetProp}
       >
         {(pressableState) => {
-          const themeTokens = resolveButtonTokens(pressableState)
+          const themeTokens = enableMediaQueryStyleSheet
+            ? resolveButtonTokens(pressableState)[viewport]
+            : resolveButtonTokens(pressableState)
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
           const textStyles = [

package/src/Button/ButtonDropdown.jsx

@@ -105,6 +105,7 @@ const ButtonDropdown = React.forwardRef(
       accessibilityRole = 'radio',
       description,
       singleOption,
+      heightFull = true,
       ...props
     },
     ref
@@ -151,6 +152,7 @@ const ButtonDropdown = React.forwardRef(
         {...pressHandlers}
         onPress={handlePress}
         tokens={getButtonTokens}
+        heightFull={heightFull}
         inactive={singleOption || inactive}
         icon={() => null}
         accessibilityRole={accessibilityRole}

package/src/Button/ButtonGroup.jsx

@@ -1,21 +1,20 @@
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
-import { Platform } from 'react-native'
+import { Platform, View, StyleSheet } from 'react-native'
 
 import ButtonBase from './ButtonBase'
-import { StackWrap } from '../StackView'
 import Fieldset from '../Fieldset'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
+  useSpacingScale,
   a11yProps,
   containUniqueFields,
   focusHandlerProps,
   pressProps,
   getTokensPropType,
   selectSystemProps,
-  selectTokens,
   useMultipleInputValues,
   variantProp,
   viewProps
@@ -30,16 +29,6 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const getStackWrapTokens = (variant) => {
-  return Platform.select({
-    web: {
-      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
-      width: variant?.width === 'equal' ? '100%' : 'auto'
-    },
-    default: {}
-  })
-}
-
 const ButtonGroup = React.forwardRef(
   (
     {
@@ -72,25 +61,52 @@ const ButtonGroup = React.forwardRef(
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
-    const themeStackTokens = selectTokens('StackView', themeTokens)
-    const variantStackTokens = getStackWrapTokens(variant)
-    const stackTokens = {
-      ...themeStackTokens,
-      ...variantStackTokens
-    }
     const { direction, space, fieldSpace, borderRadius, backgroundColor, padding, gap } =
       themeTokens
 
+    const isMobileNonContained =
+      Platform.OS !== 'web' && (!variant || variant?.style !== 'contained')
+
     const themeButtonTokensCallback = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
+    const gapValue = useSpacingScale(gap || space)
 
-    const getButtonTokens = (state) => {
-      const themeButtonTokens = themeButtonTokensCallback(state)
-      return {
-        ...themeButtonTokens,
-        width: variant?.width === 'equal' ? '100%' : 'auto',
-        flex: variant?.width === 'equal' ? 1 : undefined
-      }
-    }
+    const getButtonTokens = useCallback(
+      (state) => {
+        const themeButtonTokens = themeButtonTokensCallback(state)
+
+        const shouldUseTransparentBackground =
+          isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus
+
+        return {
+          ...themeButtonTokens,
+          ...(variant?.width === 'equal' && staticStyles.equalWidth),
+          ...(shouldUseTransparentBackground && { backgroundColor: 'transparent' }),
+          alignSelf: themeButtonTokens.width ? 'flex-start' : 'center'
+        }
+      },
+      [themeButtonTokensCallback, isMobileNonContained, variant?.width]
+    )
+
+    const fieldsetStyles = useMemo(
+      () => ({
+        ...staticStyles.fieldsetBase,
+        borderRadius,
+        backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
+        padding,
+        width: variant?.width === 'equal' ? '100%' : 'auto'
+      }),
+      [borderRadius, backgroundColor, padding, variant?.width, isMobileNonContained]
+    )
+
+    const viewStyles = useMemo(
+      () => ({
+        ...staticStyles.viewBase,
+        flexDirection: direction === 'column' ? 'column' : 'row',
+        gap: gapValue || 0,
+        justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start'
+      }),
+      [direction, gapValue, variant?.width]
+    )
 
     const { currentValues, toggleOneValue } = useMultipleInputValues({
       initialValues,
@@ -130,24 +146,10 @@ const ButtonGroup = React.forwardRef(
         inactive={inactive}
         validation={validation}
         accessibilityRole={accessibilityRole}
-        style={{
-          borderRadius,
-          backgroundColor,
-          padding,
-          ...(Platform.OS === 'web'
-            ? { gap, width: variant?.width === 'equal' ? '100%' : 'auto' }
-            : { alignSelf: 'flex-start' })
-        }}
+        style={fieldsetStyles}
         {...selectProps(rest)}
       >
-        <StackWrap
-          accessibilityRole={innerRole}
-          space={space}
-          direction={direction}
-          tokens={stackTokens}
-          gap={gap}
-          ref={ref}
-        >
+        <View accessibilityRole={innerRole} style={viewStyles}>
           {items.map(
             ({ label, id = label, accessibilityLabel, ref: itemRef, ...itemRest }, index) => {
               const isSelected = currentValues.includes(id)
@@ -193,7 +195,7 @@ const ButtonGroup = React.forwardRef(
               )
             }
           )}
-        </StackWrap>
+        </View>
       </Fieldset>
     )
   }
@@ -309,4 +311,19 @@ ButtonGroup.propTypes = {
   copy: PropTypes.oneOf(['en', 'fr'])
 }
 
+const staticStyles = StyleSheet.create({
+  fieldsetBase: {
+    alignSelf: 'flex-start',
+    display: 'inline'
+  },
+  viewBase: {
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  },
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  }
+})
+
 export default ButtonGroup

package/src/Button/propTypes.js

@@ -10,6 +10,12 @@ export const textAndA11yText = ABBPropTypes.childrenOf(
 
 const buttonPropTypes = {
   tokens: getTokensPropType('Button'),
+  /**
+   * If true, the button will honor the align-items value from its parent flex container.
+   * If false, the button will always align to 'flex-start' in a flex container.
+   * Currently, `heightFull`'s default behaviour will expand to the full height of its parent's flex container. In an upcoming major release, the default behaviour will be changed to expand based on the content. To maintain the expected behaviour, you must explicitly set `heightFull: true`
+   */
+  heightFull: PropTypes.bool,
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme

package/src/Card/PressableCardBase.jsx

@@ -204,7 +204,9 @@ const staticStyles = StyleSheet.create({
   },
   linkContainer: {
     flex: 1,
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start'
   }
 })
 

package/src/Carousel/Carousel.jsx

@@ -399,6 +399,7 @@ const Carousel = React.forwardRef(
       copy,
       slideDuration = 0,
       transitionDuration = 0,
+      loopDuration = transitionDuration,
       autoPlay = false,
       enablePeeking = false,
       ...rest
@@ -406,6 +407,7 @@ const Carousel = React.forwardRef(
     ref
   ) => {
     let childrenArray = unpackFragment(children)
+    const isTransitioningRef = React.useRef(false)
     const viewport = useViewport()
     const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport)
     const autoPlayFeatureEnabled =
@@ -481,10 +483,14 @@ const Carousel = React.forwardRef(
     )
     const handleAnimationEnd = React.useCallback(
       (...args) => {
-        if (typeof onAnimationEnd === 'function') onAnimationEnd(...args)
-        setIsAnimating(false)
+        const result = args[args.length - 1]
+        if (result?.finished) {
+          if (typeof onAnimationEnd === 'function') onAnimationEnd(...args)
+          setIsAnimating(false)
+          isTransitioningRef.current = false
+        }
       },
-      [onAnimationEnd]
+      [onAnimationEnd, isTransitioningRef]
     )
 
     const updateOffset = React.useCallback(() => {
@@ -533,6 +539,8 @@ const Carousel = React.forwardRef(
 
     const animate = React.useCallback(
       (panToAnimate, toValue, toIndex) => {
+        const applicableTransitionDuration =
+          isLastSlide && toIndex === 0 ? loopDuration : transitionDuration
         const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
         if (reduceMotionRef.current || isSwiping.current) {
           Animated.timing(panToAnimate, { toValue, duration: 1, useNativeDriver: false }).start(
@@ -543,14 +551,14 @@ const Carousel = React.forwardRef(
             ...springConfig,
             toValue,
             useNativeDriver: false,
-            duration: transitionDuration * 1000
+            duration: applicableTransitionDuration * 1000
           }).start(handleAnimationEndToIndex)
         } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
           Animated.timing(panToAnimate, {
             ...springConfig,
             toValue,
             useNativeDriver: false,
-            duration: transitionDuration ? transitionDuration * 1000 : 1000
+            duration: applicableTransitionDuration ? applicableTransitionDuration * 1000 : 1000
           }).start(handleAnimationEndToIndex)
         } else {
           Animated.spring(panToAnimate, {
@@ -564,6 +572,8 @@ const Carousel = React.forwardRef(
         springConfig,
         handleAnimationEnd,
         transitionDuration,
+        loopDuration,
+        isLastSlide,
         isAutoPlayEnabled,
         enablePeeking,
         enableDisplayMultipleItemsPerSlide
@@ -597,7 +607,9 @@ const Carousel = React.forwardRef(
 
         const index = activeIndexRef.current + calcDelta
         if (skipChanges) {
+          isTransitioningRef.current = true
           animate(pan, toValue, index)
+
           if (enableHero) {
             animate(heroPan, toValue, index)
           }
@@ -617,6 +629,7 @@ const Carousel = React.forwardRef(
         toValue.x = finalWidth * -1 * calcDelta
         const heroToValue = { x: 0, y: 0 }
         heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta
+        isTransitioningRef.current = true
         animate(pan, toValue, index)
         if (enableHero) {
           animate(heroPan, heroToValue, index)
@@ -1007,6 +1020,15 @@ const Carousel = React.forwardRef(
       setisCarouselPlaying((prevState) => !prevState)
     }, [isCarouselPlaying, stopAutoplay, startAutoplay])
 
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        if (isTransitioningRef.current && event.key === 'Tab') {
+          event.preventDefault()
+        }
+      },
+      [isTransitioningRef]
+    )
+
     return (
       <View style={selectRootContainerStyles(enableHero, viewport)}>
         <View style={selectMainContainerStyles(enableHero, viewport)}>
@@ -1036,6 +1058,7 @@ const Carousel = React.forwardRef(
               ref={ref}
               {...systemProps}
               {...containerProps}
+              {...(Platform.OS === 'web' ? { onKeyDown: handleKeyDown } : {})}
             >
               {isAutoPlayEnabled ? (
                 <View
@@ -1125,10 +1148,45 @@ const Carousel = React.forwardRef(
                   accessibilityLiveRegion={accessibilityLiveRegion}
                 >
                   {childrenArray.map((element, index) => {
-                    const hidden = !isAnimating && index !== activeIndex
+                    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
+                      }
+                    } else if (
+                      !enablePeeking &&
+                      enableDisplayMultipleItemsPerSlide &&
+                      !isAnimating
+                    ) {
+                      const maxItemsForSlide = getMaximumItemsForSlide(
+                        enableDisplayMultipleItemsPerSlide,
+                        viewport
+                      )
+                      if (
+                        index >= activeIndex * maxItemsForSlide &&
+                        index < activeIndex * maxItemsForSlide + maxItemsForSlide
+                      ) {
+                        hidden = false
+                      }
+                    }
+
                     const clonedElement = React.cloneElement(element, {
                       elementIndex: index,
-                      hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                      hidden,
                       enablePeeking,
                       peekingProps: getPeekingProps(viewport),
                       enableDisplayMultipleItemsPerSlide,
@@ -1390,6 +1448,12 @@ Carousel.propTypes = {
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
   transitionDuration: PropTypes.number,
+  /**
+   * Time it takes in seconds to transition from last slide to first slide
+   * - Default value equals `transitionDuration`'s value
+   * - `autoPlay` and `transitionDuration` are required to be set for this to work
+   */
+  loopDuration: PropTypes.number,
   /**
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -114,15 +114,43 @@ const CarouselItem = React.forwardRef(
 
     const handleFocus = React.useCallback(
       (event) => {
-        if (Platform.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
-          goTo(activeIndex + 1)
+        if (Platform.OS === 'web') {
+          if (enablePeeking) {
+            if (enableDisplayMultipleItemsPerSlide) {
+              const startIndex = maximumItemsForSlide * activeIndex
+              const endIndex = startIndex + maximumItemsForSlide - 1
+              if (elementIndex < startIndex) {
+                if (activeIndex - 1 < 0) {
+                  goTo(0)
+                } else {
+                  goTo(activeIndex - 1)
+                }
+              } else if (elementIndex > endIndex) {
+                goTo(activeIndex + 1)
+              }
+            } else if (elementIndex !== activeIndex) {
+              if (elementIndex > activeIndex) {
+                goTo(activeIndex + 1)
+              } else if (elementIndex < activeIndex) {
+                goTo(activeIndex - 1)
+              }
+            }
+          }
         }
 
         if (rest.onFocus) {
           rest.onFocus(event)
         }
       },
-      [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]
+      [
+        elementIndex,
+        activeIndex,
+        goTo,
+        maximumItemsForSlide,
+        rest,
+        enablePeeking,
+        enableDisplayMultipleItemsPerSlide
+      ]
     )
 
     return (

package/src/Icon/Icon.jsx

@@ -43,20 +43,17 @@ const Icon = React.forwardRef(
         }
 
     const getIconContentForMobile = () => {
-      if (Object.keys(paddingStyles).length) {
-        return (
-          <View
-            style={{
-              backgroundColor: themeTokens.backgroundColor,
-              borderRadius: themeTokens.borderRadius,
-              ...paddingStyles
-            }}
-          >
-            {iconContent}
-          </View>
-        )
-      }
-      return iconContent
+      return (
+        <View
+          style={{
+            backgroundColor: themeTokens.backgroundColor,
+            borderRadius: themeTokens.borderRadius,
+            ...paddingStyles
+          }}
+        >
+          {iconContent}
+        </View>
+      )
     }
 
     return Platform.OS === 'web' ? (

package/src/Icon/IconText.jsx

@@ -90,7 +90,6 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
-  /* eslint-enable react/no-unused-prop-types */
 }
 
 const staticStyles = StyleSheet.create({