@telus-uds/components-base 3.2.0 → 3.3.0

package/lib/esm/List/ListItemBase.js

@@ -129,8 +129,7 @@ const staticStyles = StyleSheet.create({
   titleAndContentContainer: {
     flexDirection: 'column',
     flexShrink: 1,
-    flexGrow: 1,
-    textAlign: 'justify'
+    flexGrow: 1
   }
 });
 ListItemBase.propTypes = {

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -286,9 +286,9 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           },
           children: subtitle
         })
-      }), /*#__PURE__*/_jsx(Spacer, {
-        space: 4
       })]
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 4
     }), /*#__PURE__*/_jsx(View, {
       style: styles.options,
       children: /*#__PURE__*/_jsx(ScrollView, {

package/lib/esm/TextInput/TextArea.js

@@ -40,6 +40,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref;
   const themeTokens = useThemeTokens('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = React.useState();
+  const isUpdatingHeight = React.useRef(false);
 
   // adjust the text area's height as new lines are added to the content
   const onHeightChange = _ref2 => {
@@ -51,8 +52,16 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }
     } = _ref2;
     // on native this is happens out of the box
-    if (Platform.OS === 'web') {
+    if (Platform.OS === 'web' && !isUpdatingHeight.current) {
+      isUpdatingHeight.current = true;
       setInputHeight(height);
+      // setTimeout is used to “wait” for the next update cycle before allowing a new height adjustment,
+      // avoiding multiple updates in the same render and preventing a possible infinite loop or constant re-renders.
+      setTimeout(() => {
+        isUpdatingHeight.current = false;
+      }, 0);
+    } else {
+      setInputHeight(null);
     }
   };
   const {

package/lib/esm/Typography/Typography.js

@@ -112,13 +112,19 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       backgroundClip: 'text'
     } : styles;
   };
+
+  /**
+   * Added to maintain previous behavior, as the 'auto' value for the 'align' prop now defaults to 'inherit' on the web,
+   * maintaining the previous behavior that was changed in the Text component of react-native.
+   */
+  const resolvedAlign = Platform.OS === 'web' && align === 'auto' ? 'inherit' : align;
   let textStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
     const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
       let [vp, viewportTokens] = _ref4;
       acc[vp] = selectTextStyles({
-        textAlign: align,
+        textAlign: resolvedAlign,
         textDecorationLine,
         ...viewportTokens
       }, themeOptions);
@@ -147,7 +153,7 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     mediaIds = ids.text;
   } else {
     textStyles = selectTextStyles({
-      textAlign: align,
+      textAlign: resolvedAlign,
       textDecorationLine,
       ...themeTokens
     }, themeOptions);

package/lib/package.json

@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.2.0",
+  "version": "3.3.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.2.0",
+  "version": "3.3.0",
   "types": "types/index.d.ts"
 }

package/src/Card/CardBase.jsx

@@ -72,11 +72,12 @@ const CardBase = React.forwardRef(
       <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
         {src ? (
           <ImageBackground
-            alt={alt}
             source={imageSourceViewport}
             imageStyle={{ borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth }}
             resizeMode={backgroundImageResizeMode}
             style={styles.imageBackground}
+            accessible={true}
+            accessibilityLabel={alt}
           >
             {children}
           </ImageBackground>

package/src/Carousel/Carousel.jsx

@@ -25,11 +25,11 @@ import CarouselThumbnailNavigation from './CarouselThumbnailNavigation'
 import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel'
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
 import dictionary from './dictionary'
+import Box from '../Box'
 import {
   ITEMS_PER_VIEWPORT_MD,
   ITEMS_PER_VIEWPORT_LG_XL,
   DEFAULT_POSITION_OFFSET,
-  HERO_POSITION_OFFSET,
   LARGE_VIEWPORT_MARGIN,
   DEFAULT_VIEWPORT_MARGIN
 } from './Constants'
@@ -54,6 +54,24 @@ const staticStyles = StyleSheet.create({
     zIndex: 1,
     right: Platform.OS === 'web' ? undefined : 40,
     top: 40
+  },
+  heroMainContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden',
+    zIndex: -1
+  },
+  heroSwipeArea: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    flexDirection: 'row'
   }
 })
 
@@ -75,6 +93,11 @@ const selectSwipeAreaStyles = (
   flexDirection: 'row'
 })
 
+const selectHeroContainerStyles = (width, hidden) => ({
+  width,
+  visibility: hidden ? 'hidden' : 'visible'
+})
+
 const getDynamicPositionProperty = (areStylesAppliedOnPreviousButton) =>
   areStylesAppliedOnPreviousButton ? 'left' : 'right'
 
@@ -84,19 +107,13 @@ const selectControlButtonPositionStyles = ({
   positionProperty = getDynamicPositionProperty(),
   spaceBetweenSlideAndButton,
   enablePeeking,
-  enableDisplayMultipleItemsPerSlide,
-  enableHero,
-  viewport
+  enableDisplayMultipleItemsPerSlide
 }) => {
   const styles = {}
   if (positionVariant === 'edge') {
     styles[positionProperty] = -1 * (buttonWidth / 2)
   } else if (positionVariant === 'inside') {
-    if (enableHero && viewport === 'xl') {
-      styles[positionProperty] = HERO_POSITION_OFFSET
-    } else {
-      styles[positionProperty] = DEFAULT_POSITION_OFFSET
-    }
+    styles[positionProperty] = DEFAULT_POSITION_OFFSET
   } else if (positionVariant === 'outside') {
     if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       styles[positionProperty] = 0
@@ -115,9 +132,7 @@ const selectPreviousNextNavigationButtonStyles = (
   isLastSlide,
   areStylesAppliedOnPreviousButton,
   enablePeeking,
-  enableDisplayMultipleItemsPerSlide,
-  enableHero,
-  viewport
+  enableDisplayMultipleItemsPerSlide
 ) => {
   const styles = {
     zIndex: 1,
@@ -139,9 +154,7 @@ const selectPreviousNextNavigationButtonStyles = (
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide,
-      enableHero,
-      viewport
+      enableDisplayMultipleItemsPerSlide
     })
   }
 }
@@ -204,17 +217,14 @@ const selectMainContainerStyles = (enableHero, viewport) => {
   return {}
 }
 
-const selectNavigationStyles = (tabs, tabsPanelHeight, enableHero, viewport) => {
-  let marginTop = 0
+const selectNavigationStyles = (tabs, enableHero, viewport) => {
   let marginHorizontal = 0
 
   if (enableHero && tabs) {
-    marginTop = -tabsPanelHeight
     marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN
   }
 
   return {
-    marginTop,
     marginHorizontal
   }
 }
@@ -350,6 +360,7 @@ const Carousel = React.forwardRef(
       itemLabel = 'item',
       previousNextNavigationPosition = 'inside',
       stepTrackerVariant,
+      progressBarVariant = { style: 'subtle' },
       previousNextIconSize = 'default',
       minDistanceToCapture = 5,
       minDistanceForAction = 0.2,
@@ -368,7 +379,8 @@ const Carousel = React.forwardRef(
         <CarouselThumbnailNavigation thumbnails={thumbnails} />
       ) : (
         <CarouselStepTracker
-          variant={stepTrackerVariant}
+          stepTrackerVariant={stepTrackerVariant}
+          progressBarVariant={progressBarVariant}
           enableDisplayMultipleItemsPerSlide={enableDisplayMultipleItemsPerSlide}
         />
       ),
@@ -420,6 +432,13 @@ const Carousel = React.forwardRef(
       height: 0
     })
     const containerLayoutRef = React.useRef(containerLayout)
+    const [heroContainerLayout, setHeroContainerLayout] = React.useState({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    })
+    const heroContainerLayoutRef = React.useRef(heroContainerLayout)
 
     const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] =
       React.useState(0)
@@ -427,6 +446,9 @@ const Carousel = React.forwardRef(
     const pan = React.useRef(new Animated.ValueXY()).current
     const animatedX = React.useRef(0)
     const animatedY = React.useRef(0)
+    const heroPan = React.useRef(new Animated.ValueXY()).current
+    const heroAnimatedX = React.useRef(0)
+    const heroAnimatedY = React.useRef(0)
     const [isAnimating, setIsAnimating] = React.useState(false)
     /**
      * While having the same starting point, `isAutoPlayEnabled` and `isCarouselPlaying` are different states
@@ -465,31 +487,40 @@ const Carousel = React.forwardRef(
         y: animatedY.current
       })
       pan.setValue({ x: 0, y: 0 })
-    }, [pan, animatedX])
+      if (enableHero) {
+        heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * -1
+        heroAnimatedY.current = 0
+        heroPan.setOffset({
+          x: heroAnimatedX.current,
+          y: heroAnimatedY.current
+        })
+        heroPan.setValue({ x: 0, y: 0 })
+      }
+    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero])
 
     const animate = React.useCallback(
-      (toValue, toIndex) => {
+      (panToAnimate, toValue, toIndex) => {
         const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
         if (reduceMotionRef.current || isSwiping.current) {
-          Animated.timing(pan, { toValue, duration: 1, useNativeDriver: false }).start(
+          Animated.timing(panToAnimate, { toValue, duration: 1, useNativeDriver: false }).start(
             handleAnimationEndToIndex
           )
         } else if (isAutoPlayEnabled) {
-          Animated.timing(pan, {
+          Animated.timing(panToAnimate, {
             ...springConfig,
             toValue,
             useNativeDriver: false,
             duration: transitionDuration * 1000
           }).start(handleAnimationEndToIndex)
         } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
-          Animated.timing(pan, {
+          Animated.timing(panToAnimate, {
             ...springConfig,
             toValue,
             useNativeDriver: false,
             duration: transitionDuration ? transitionDuration * 1000 : 1000
           }).start(handleAnimationEndToIndex)
         } else {
-          Animated.spring(pan, {
+          Animated.spring(panToAnimate, {
             ...springConfig,
             toValue,
             useNativeDriver: false
@@ -497,7 +528,6 @@ const Carousel = React.forwardRef(
         }
       },
       [
-        pan,
         springConfig,
         handleAnimationEnd,
         transitionDuration,
@@ -534,7 +564,10 @@ const Carousel = React.forwardRef(
 
         const index = activeIndexRef.current + calcDelta
         if (skipChanges) {
-          animate(toValue, index)
+          animate(pan, toValue, index)
+          if (enableHero) {
+            animate(heroPan, toValue, index)
+          }
           return calcDelta
         }
 
@@ -551,7 +584,12 @@ const Carousel = React.forwardRef(
         )
 
         toValue.x = finalWidth * -1 * calcDelta
-        animate(toValue, index)
+        const heroToValue = { x: 0, y: 0 }
+        heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta
+        animate(pan, toValue, index)
+        if (enableHero) {
+          animate(heroPan, heroToValue, index)
+        }
         if (isCarouselPlaying) {
           stopAutoplay()
           if (
@@ -584,7 +622,10 @@ const Carousel = React.forwardRef(
         stopAutoplay,
         isAutoPlayEnabled,
         viewport,
-        enablePeeking
+        enablePeeking,
+        pan,
+        heroPan,
+        enableHero
       ]
     )
 
@@ -625,8 +666,6 @@ const Carousel = React.forwardRef(
       [fixOffsetAndGo]
     )
 
-    const [tabsPanelHeight, setTabsPanelHeight] = React.useState(0)
-
     React.useEffect(() => {
       activeIndexRef.current = activeIndex
     }, [activeIndex])
@@ -639,6 +678,10 @@ const Carousel = React.forwardRef(
       containerLayoutRef.current = containerLayout
     }, [containerLayout])
 
+    React.useEffect(() => {
+      heroContainerLayoutRef.current = heroContainerLayout
+    }, [heroContainerLayout])
+
     React.useEffect(() => {
       pan.x.addListener(({ value }) => {
         animatedX.current = value
@@ -646,6 +689,14 @@ const Carousel = React.forwardRef(
       pan.y.addListener(({ value }) => {
         animatedY.current = value
       })
+      if (enableHero) {
+        heroPan.x.addListener(({ value }) => {
+          heroAnimatedX.current = value
+        })
+        heroPan.y.addListener(({ value }) => {
+          heroAnimatedY.current = value
+        })
+      }
       if (isCarouselPlaying) {
         startAutoplay()
       }
@@ -653,8 +704,21 @@ const Carousel = React.forwardRef(
         stopAutoplay()
         pan.x.removeAllListeners()
         pan.y.removeAllListeners()
+        if (enableHero) {
+          heroPan.x.removeAllListeners()
+          heroPan.y.removeAllListeners()
+        }
       }
-    }, [pan.x, pan.y, startAutoplay, stopAutoplay, isCarouselPlaying])
+    }, [
+      pan.x,
+      pan.y,
+      heroPan.x,
+      heroPan.y,
+      startAutoplay,
+      stopAutoplay,
+      isCarouselPlaying,
+      enableHero
+    ])
 
     React.useEffect(() => {
       const subscription = Dimensions.addEventListener('change', () => {
@@ -682,16 +746,18 @@ const Carousel = React.forwardRef(
       }
     }, [stopAutoplay])
 
-    const onTabsPanelLayout = (event) => {
-      setTabsPanelHeight(event.nativeEvent.layout.height)
-    }
-
     const onContainerLayout = ({
       nativeEvent: {
         layout: { x, y, width, height }
       }
     }) => setContainerLayout((prevState) => ({ ...prevState, x, y, width, height }))
 
+    const onHeroContainerLayout = ({
+      nativeEvent: {
+        layout: { x, y, width, height }
+      }
+    }) => setHeroContainerLayout((prevState) => ({ ...prevState, x, y, width, height }))
+
     const onPreviousNextNavigationButtonLayout = ({
       nativeEvent: {
         layout: { width }
@@ -742,7 +808,7 @@ const Carousel = React.forwardRef(
             const correction = gesture.moveX - gesture.x0
 
             if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-              animate({ x: 0, y: 0 }, 0)
+              animate(pan, { x: 0, y: 0 }, 0)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta, TRANSITION_MODES.SWIPE)
@@ -752,6 +818,65 @@ const Carousel = React.forwardRef(
           }
         }),
       [
+        pan,
+        updateIndex,
+        updateOffset,
+        animate,
+        isSwipeAllowed,
+        minDistanceForAction,
+        handleAnimationStart,
+        minDistanceToCapture,
+        startAutoplay,
+        stopAutoplay,
+        isCarouselPlaying
+      ]
+    )
+
+    const heroPanResponder = React.useMemo(
+      () =>
+        PanResponder.create({
+          onPanResponderTerminationRequest: () => false,
+          onMoveShouldSetResponderCapture: () => true,
+          onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+            if (!isSwipeAllowed()) {
+              return false
+            }
+
+            handleAnimationStart(activeIndexRef.current)
+
+            const allow = Math.abs(gestureState.dx) > minDistanceToCapture
+
+            if (allow) {
+              isSwiping.current = true
+              stopAutoplay()
+            }
+
+            return allow
+          },
+          onPanResponderGrant: () => {
+            updateOffset()
+          },
+          onPanResponderMove: Animated.event([null, { dx: heroPan.x }], {
+            useNativeDriver: false
+          }),
+          onPanResponderRelease: (_, gesture) => {
+            if (isCarouselPlaying) {
+              startAutoplay()
+            }
+            const correction = gesture.moveX - gesture.x0
+
+            if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
+              animate(heroPan, { x: 0, y: 0 }, 0)
+            } else {
+              const delta = correction > 0 ? -1 : 1
+              updateIndex(delta, TRANSITION_MODES.SWIPE)
+            }
+
+            isSwiping.current = false
+          }
+        }),
+      [
+        heroPan,
         updateIndex,
         updateOffset,
         animate,
@@ -759,7 +884,6 @@ const Carousel = React.forwardRef(
         minDistanceForAction,
         handleAnimationStart,
         minDistanceToCapture,
-        pan.x,
         startAutoplay,
         stopAutoplay,
         isCarouselPlaying
@@ -888,9 +1012,7 @@ const Carousel = React.forwardRef(
                       positionProperty: getDynamicPositionProperty(),
                       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
                       enablePeeking,
-                      enableDisplayMultipleItemsPerSlide,
-                      enableHero,
-                      viewport
+                      enableDisplayMultipleItemsPerSlide
                     })
                   ]}
                 >
@@ -914,9 +1036,7 @@ const Carousel = React.forwardRef(
                     isLastSlide,
                     true,
                     enablePeeking,
-                    enableDisplayMultipleItemsPerSlide,
-                    enableHero,
-                    viewport
+                    enableDisplayMultipleItemsPerSlide
                   )}
                   testID="previous-button-container"
                 >
@@ -974,9 +1094,7 @@ const Carousel = React.forwardRef(
                       peekingProps: getPeekingProps(viewport),
                       enableDisplayMultipleItemsPerSlide,
                       viewport,
-                      backgroundColor: element.props.backgroundColor,
-                      enableHero,
-                      tabsPanelHeight
+                      backgroundColor: element.props.backgroundColor
                     })
                     return <React.Fragment key={index.toFixed(2)}>{clonedElement}</React.Fragment>
                   })}
@@ -992,9 +1110,7 @@ const Carousel = React.forwardRef(
                     isLastSlide,
                     false,
                     enablePeeking,
-                    enableDisplayMultipleItemsPerSlide,
-                    enableHero,
-                    viewport
+                    enableDisplayMultipleItemsPerSlide
                   )}
                   testID="next-button-container"
                 >
@@ -1012,14 +1128,39 @@ const Carousel = React.forwardRef(
                 </View>
               ) : null}
             </View>
-            <View
-              style={selectNavigationStyles(tabs, tabsPanelHeight, enableHero, viewport)}
-              onLayout={tabs && onTabsPanelLayout}
-            >
+            <View style={selectNavigationStyles(tabs, enableHero, viewport)}>
               {showPanelNavigation ? activePanelNavigation : null}
             </View>
           </CarouselProvider>
         </View>
+        {enableHero && (
+          <View style={staticStyles.heroMainContainer}>
+            <Animated.View
+              style={StyleSheet.flatten([
+                staticStyles.heroSwipeArea,
+                {
+                  transform: [{ translateX: heroPan.x }, { translateY: heroPan.y }]
+                }
+              ])}
+              onLayout={onHeroContainerLayout}
+              {...heroPanResponder.panHandlers}
+              {...getA11yPropsFromHtmlTag(tag)}
+              accessibilityLiveRegion={accessibilityLiveRegion}
+            >
+              {childrenArray.map((element, index) => {
+                const hidden = !isAnimating && index !== activeIndex
+                return (
+                  <View
+                    style={selectHeroContainerStyles(heroContainerLayout.width, hidden)}
+                    key={index.toFixed(2)}
+                  >
+                    <Box flex={1} variant={{ background: element.props.backgroundColor }} />
+                  </View>
+                )
+              })}
+            </Animated.View>
+          </View>
+        )}
       </View>
     )
   }
@@ -1033,6 +1174,10 @@ Carousel.propTypes = {
    * Prop related to StepTracker Variants
    */
   stepTrackerVariant: variantProp.propType,
+  /**
+   * Prop related to ProgressBar Variants
+   */
+  progressBarVariant: variantProp.propType,
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -11,7 +11,6 @@ import {
 } from '../../utils'
 import { useCarousel } from '../CarouselContext'
 import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants'
-import Box from '../../Box'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -101,8 +100,6 @@ const CarouselItem = React.forwardRef(
       enableDisplayMultipleItemsPerSlide,
       viewport,
       backgroundColor,
-      enableHero,
-      tabsPanelHeight,
       ...rest
     },
     ref
@@ -131,10 +128,7 @@ const CarouselItem = React.forwardRef(
         {...focusabilityProps}
         ref={ref}
       >
-        <Box variant={{ background: backgroundColor }} space={0} flex={1}>
-          {children}
-          {enableHero && <View style={{ height: tabsPanelHeight }} />}
-        </Box>
+        {children}
       </View>
     )
   }

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -9,7 +9,7 @@ import Progress from '../../Progress'
 import { variantProp } from '../../utils'
 
 const CarouselStepTracker = React.forwardRef(
-  ({ variant, enableDisplayMultipleItemsPerSlide }, ref) => {
+  ({ stepTrackerVariant, progressBarVariant, enableDisplayMultipleItemsPerSlide }, ref) => {
     const {
       activeIndex,
       totalItems,
@@ -47,7 +47,7 @@ const CarouselStepTracker = React.forwardRef(
                     items: totalItems,
                     current: activeIndex + 1
                   }}
-                  variant={{ style: 'subtle' }}
+                  variant={progressBarVariant}
                   accessibilityLabel={getCopyWithPlaceholders('stepTrackerLabel')}
                 />
               </Progress>
@@ -66,7 +66,7 @@ const CarouselStepTracker = React.forwardRef(
             stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
           }}
           tokens={stepTrackerTokens}
-          variant={variant}
+          variant={stepTrackerVariant}
         />
       </StackView>
     )
@@ -76,7 +76,8 @@ const CarouselStepTracker = React.forwardRef(
 CarouselStepTracker.displayName = 'CarouselStepTracker'
 
 CarouselStepTracker.propTypes = {
-  variant: variantProp.propType,
+  stepTrackerVariant: variantProp.propType,
+  progressBarVariant: variantProp.propType,
   enableDisplayMultipleItemsPerSlide: PropTypes.bool
 }
 

package/src/ExpandCollapse/Control.jsx

@@ -39,7 +39,9 @@ function selectContainerStyles({
     borderBottomRightRadius,
     borderTopLeftRadius,
     borderBottomLeftRadius,
-    ...verticalAlignRow(verticalAlign, iconPosition === 'right')
+    ...verticalAlignRow(verticalAlign, iconPosition === 'right'),
+    // Updated default alignment due to the change in Pressable's behavior from div to button on web.
+    textAlign: Platform.OS === 'web' ? 'inherit' : undefined
   }
 }