@telus-uds/components-base 1.8.3 → 1.9.0

package/src/ExpandCollapse/Panel.jsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useState } from 'react'
-import { Animated, Platform, StyleSheet, View } from 'react-native'
+import { Animated, Platform, View } from 'react-native'
 import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
 
 import ExpandCollapseControl from './Control'
 import { useThemeTokens } from '../ThemeProvider'
@@ -51,6 +52,7 @@ const ExpandCollapsePanel = forwardRef(
       children,
       tokens,
       variant,
+      controlRef,
       ...rest
     },
     ref
@@ -86,13 +88,6 @@ const ExpandCollapsePanel = forwardRef(
       tokens: themeTokens
     })
 
-    // on web we can hide the contents until we have the container measured and avoid occasional jitter
-    // this won't work on native platforms
-    const overflowContainerStyles =
-      containerHeight === null && Platform.OS === 'web'
-        ? { height: 0, visibility: 'hidden' }
-        : undefined
-
     const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps
 
     return (
@@ -102,14 +97,11 @@ const ExpandCollapsePanel = forwardRef(
           isExpanded={isExpanded}
           tokens={controlTokens}
           onPress={handleControlPress}
+          ref={controlRef}
         >
           {control}
         </ExpandCollapseControl>
-        <Animated.View
-          ref={animatedRef}
-          style={[overflowContainerStyles, animatedStyles, staticStyles.itemsContainer]}
-          {...focusabilityProps}
-        >
+        <Animated.View ref={animatedRef} style={animatedStyles} {...focusabilityProps}>
           <View onLayout={onContainerLayout}>
             <View style={selectContainerStyles(themeTokens)}>{children}</View>
           </View>
@@ -153,13 +145,11 @@ ExpandCollapsePanel.propTypes = {
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: getTokensPropType('ExpandCollapseControl')
+  controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * An optional ref to be attached to the control
+   */
+  controlRef: ABBPropTypes.ref()
 }
 
-const staticStyles = StyleSheet.create({
-  itemsContainer: {
-    overflow: 'hidden'
-  }
-})
-
 export default ExpandCollapsePanel

package/src/Link/InlinePressable.jsx

@@ -15,11 +15,11 @@ import { Pressable, StyleSheet } from 'react-native'
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ children, style, ...props }, ref) => (
+const InlinePressable = forwardRef(({ children, style, inline = false, ...props }, ref) => (
   <Pressable
     ref={ref}
     style={(pressState) => [
-      staticStyles.inline,
+      staticStyles[inline ? 'inline' : 'inlineFlex'],
       typeof style === 'function' ? style(pressState) : style
     ]}
     {...props}
@@ -32,6 +32,9 @@ InlinePressable.displayName = 'InlinePressable'
 const staticStyles = StyleSheet.create({
   inline: {
     // Stop Pressable defaulting to (block) flex
+    display: 'inline'
+  },
+  inlineFlex: {
     display: 'inline-flex'
   }
 })

package/src/Link/LinkBase.jsx

@@ -132,18 +132,21 @@ const LinkBase = forwardRef(
     const resolveLinkTokens = (pressState) =>
       resolvePressableTokens(tokens, pressState, { iconPosition })
 
+    const defaultThemeTokens = resolveLinkTokens({})
+    const hasIcon = Boolean(icon || defaultThemeTokens.icon)
+
     // On web, this makes focus rings wrap only the link, not the entire block
     const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
 
     return (
       <InlinePressable
         {...selectedProps}
+        inline={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-          const hasIcon = Boolean(icon || themeTokens.icon)
           return [
             outerBorderStyles,
             blockLeftStyle,

package/src/List/List.jsx

@@ -30,12 +30,16 @@ const List = forwardRef(
     ref
   ) => {
     const items = Children.map(children, (child, index) => {
-      if (child.type.name === ListItem.name) {
+      // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
+      const isListItem = (componentName) => Boolean(componentName === ListItem.displayName)
+
+      if (isListItem(child?.type?.displayName) || isListItem(child?.type?.name)) {
         return cloneElement(child, {
           showDivider,
           isLastItem: index + 1 === Children.count(children),
           tokens,
-          variant
+          variant,
+          ...child.props
         })
       }
       return child

package/src/Tabs/Tabs.jsx

@@ -23,9 +23,24 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const { selectHorizontalScrollTokens, useItemPositions } = horizontalScrollUtils
 
+const getDefaultTabItemAccessibilityRole = (parentRole) => {
+  switch (parentRole) {
+    case 'tablist':
+      return 'tab'
+    case 'navigation':
+      return 'link'
+    default:
+      return undefined
+  }
+}
+
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
+ *
+ * If you are using Tabs to navigate to a new page (web-only) you should pass
+ * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
+ * TabItems to default to a role of link and obtain aria-current behaviour.
  */
 const Tabs = forwardRef(
   (
@@ -61,6 +76,11 @@ const Tabs = forwardRef(
       isPositioningReady
     )
 
+    const restProps = selectProps(rest)
+    const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist'
+    const defaultTabItemAccessibiltyRole =
+      getDefaultTabItemAccessibilityRole(parentAccessibilityRole)
+
     return (
       <HorizontalScroll
         ref={ref}
@@ -68,8 +88,8 @@ const Tabs = forwardRef(
         itemPositions={itemPositions}
         tokens={selectHorizontalScrollTokens(themeTokens)}
         scrollButtonTokens={scrollButtonTokens}
-        accessibilityRole="tablist"
-        {...selectProps(rest)}
+        accessibilityRole={parentAccessibilityRole}
+        {...restProps}
       >
         <StackView space={space} direction="row">
           {items.map(
@@ -78,6 +98,7 @@ const Tabs = forwardRef(
                 href,
                 label,
                 id,
+                accessibilityRole = defaultTabItemAccessibiltyRole,
                 ref: itemRef,
                 LinkRouter: ItemLinkRouter = LinkRouter,
                 linkRouterProps: itemLinkRouterProps
@@ -98,6 +119,7 @@ const Tabs = forwardRef(
                   selected={isSelected}
                   itemPositions={itemPositions}
                   index={index}
+                  accessibilityRole={accessibilityRole}
                   LinkRouter={ItemLinkRouter}
                   linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
                 >

package/src/Tabs/TabsItem.jsx

@@ -86,11 +86,11 @@ const TabsItem = forwardRef(
       itemPositions,
       index,
       children,
-      accessibilityRole = href ? 'link' : 'tab',
-      accessibilityState = Platform.OS === 'web' && accessibilityRole === 'link'
-        ? // Web links can't be aria-selected but can be aria-current
-          { current: selected ? 'page' : false }
-        : { selected },
+      accessibilityRole,
+      accessibilityCurrent = Platform.OS === 'web' && accessibilityRole === 'link' && selected
+        ? 'page'
+        : undefined,
+      accessibilityState = accessibilityRole === 'tab' ? { selected } : undefined,
       ...rawRest
     },
     ref
@@ -121,6 +121,7 @@ const TabsItem = forwardRef(
 
     const selectedProps = selectProps({
       accessibilityRole,
+      accessibilityCurrent,
       accessibilityState,
       ...rest
     })

package/src/TextInput/TextInput.jsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react'
-import { Platform } from 'react-native'
 import {
   a11yProps,
   focusHandlerProps,
@@ -42,13 +41,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = forwardRef(({ tokens, variant = {}, pattern, ...rest }, ref) => {
-  React.useEffect(() => {
-    if (Platform.OS === 'web' && pattern && ref.current) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.pattern = pattern
-    }
-  }, [ref, pattern])
+const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {

package/src/TextInput/TextInputBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -128,6 +128,7 @@ const TextInputBase = forwardRef(
       onBlur,
       onMouseOver,
       onMouseOut,
+      pattern,
       tokens,
       variant = {},
       ...rest
@@ -161,6 +162,15 @@ const TextInputBase = forwardRef(
       readOnly
     })
 
+    const element = ref?.current
+    useEffect(() => {
+      if (Platform.OS === 'web' && pattern && element) {
+        // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
+        // which a `pattern` user must provide anyway to call .checkValidity() on the element.
+        element.pattern = pattern
+      }
+    }, [element, pattern])
+
     const handleChangeText = (event) => {
       const text = event.nativeEvent?.text || event.target?.value
       setValue(text, event)

package/src/TextInput/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
-import { Platform } from 'react-native'
 
+// These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
 const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
@@ -24,12 +25,7 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: PropTypes.func,
-  ...Platform.select({
-    web: {
-      pattern: PropTypes.string
-    }
-  })
+  onChange: PropTypes.func
 }
 
 export default textInputPropTypes

package/src/utils/animation/useVerticalExpandAnimation.js

@@ -1,21 +1,27 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Animated, Easing, Platform } from 'react-native'
 
 // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
 function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
   const [isAnimating, setIsAnimating] = useState(false)
+  const [wasExpanded, setWasExpanded] = useState(isExpanded)
+  const expandStateChanged = isExpanded !== wasExpanded
 
   const expandAnimatedValue = useRef(new Animated.Value(0)).current
   const elementRef = useRef(null)
 
   const { expandDuration, collapseDuration } = tokens
 
-  // Treat as animating from when expanded state changes, until animation completes
-  useEffect(() => setIsAnimating(true), [isExpanded])
+  useLayoutEffect(() => {
+    if (expandStateChanged) {
+      setIsAnimating(true)
+      setWasExpanded(isExpanded)
+    }
+  }, [expandStateChanged, isExpanded])
 
   useEffect(() => {
-    const onComplete = () => !isExpanded && setIsAnimating(false)
+    const onComplete = () => setIsAnimating(false)
 
     if (Platform.OS === 'web') {
       if (!elementRef.current) return () => {}
@@ -39,19 +45,47 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
     return () => animation.stop()
   }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration])
 
-  // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
-  const containerStyles = !isExpanded && !isAnimating ? { visibility: 'hidden' } : {}
+  const containerStyles = {}
 
-  // don't visually collapse the container until we have it measured
-  if (containerHeight !== null) {
-    if (Platform.OS === 'web') {
-      const transitionDuration = isExpanded ? expandDuration : collapseDuration
-      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`
+  if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden'
 
-      containerStyles.height = isExpanded ? containerHeight : 0
+  if (!isExpanded && !isAnimating && !expandStateChanged) {
+    if (Platform.OS === 'web') {
+      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
+      containerStyles.visibility = 'hidden'
     } else {
-      containerStyles.height = expandAnimatedValue
+      // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
+      // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
+      containerStyles.opacity = 0
+    }
+  }
+
+  // don't visually collapse the container until we have it measured
+  if (containerHeight === null) {
+    if (Platform.OS === 'web') {
+      // on web we can hide the contents until we have the container measured and avoid occasional jitter
+      // this won't work on native platforms
+      containerStyles.height = 0
+      containerStyles.visibility = 'hidden'
     }
+  } else if (Platform.OS === 'web') {
+    const transitionDuration = isExpanded ? expandDuration : collapseDuration
+    containerStyles.transition = `height ${transitionDuration}ms ease-in-out`
+
+    containerStyles.height = isExpanded ? containerHeight : 0
+  } else if (
+    Platform.OS === 'ios' &&
+    isExpanded &&
+    !isAnimating &&
+    !expandStateChanged &&
+    typeof containerHeight === 'number'
+  ) {
+    // iOS reflows text while the height animation is in progress. Sometimes, it hits a timing bug where
+    // it fails to reflow properly after the last animation frame, leaving the last line of text not visible.
+    // Force reflow after animation completes with a static height non-identical to the last animated height.
+    containerStyles.height = containerHeight + 1
+  } else {
+    containerStyles.height = expandAnimatedValue
   }
 
   return [containerStyles, elementRef]

package/src/utils/props/textInputProps.js

@@ -121,7 +121,13 @@ const crossPlatform = {
 const webOnly = {
   disabled: PropTypes.bool,
   dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
-  lang: PropTypes.string
+  lang: PropTypes.string,
+  /**
+   * Sets the HTML input `pattern` attr. Not supported by React Native Web, but is supported by UDS.
+   * Must also pass in a ref and check validity by calling the HTML element's checkValidity method:
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
+   */
+  pattern: PropTypes.string
 }
 
 /**