@telus-uds/components-base 1.8.1 → 1.8.4

package/src/ExpandCollapse/Panel.jsx

@@ -1,5 +1,5 @@
 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 ExpandCollapseControl from './Control'
@@ -86,13 +86,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 (
@@ -105,11 +98,7 @@ const ExpandCollapsePanel = forwardRef(
         >
           {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>
@@ -156,10 +145,4 @@ ExpandCollapsePanel.propTypes = {
   controlTokens: getTokensPropType('ExpandCollapseControl')
 }
 
-const staticStyles = StyleSheet.create({
-  itemsContainer: {
-    overflow: 'hidden'
-  }
-})
-
 export default ExpandCollapsePanel

package/src/List/List.jsx

@@ -17,26 +17,41 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
-  const accessibilityRole = Platform.select({ web: 'list', default: 'none' })
-  const items = Children.map(children, (child, index) => {
-    if (child.type.name === ListItem.name) {
-      return cloneElement(child, {
-        showDivider,
-        isLastItem: index + 1 === Children.count(children),
-        tokens,
-        variant
-      })
-    }
-    return child
-  })
+const List = forwardRef(
+  (
+    {
+      children,
+      showDivider,
+      tokens,
+      variant,
+      accessibilityRole = Platform.select({ web: 'list', default: undefined }),
+      ...rest
+    },
+    ref
+  ) => {
+    const items = Children.map(children, (child, index) => {
+      // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
+      const isListItem = (componentName) => Boolean(componentName === ListItem.displayName)
 
-  return (
-    <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
-      {items}
-    </View>
-  )
-})
+      if (isListItem(child?.type?.displayName) || isListItem(child?.type?.name)) {
+        return cloneElement(child, {
+          showDivider,
+          isLastItem: index + 1 === Children.count(children),
+          tokens,
+          variant,
+          ...child.props
+        })
+      }
+      return child
+    })
+
+    return (
+      <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
+        {items}
+      </View>
+    )
+  }
+)
 List.displayName = 'List'
 
 List.propTypes = {

package/src/List/ListItem.jsx

@@ -65,7 +65,18 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
  */
 const ListItem = forwardRef(
   (
-    { tokens, variant, icon, iconColor, iconSize, showDivider, children, isLastItem, ...rest },
+    {
+      tokens,
+      variant,
+      icon,
+      iconColor,
+      iconSize,
+      showDivider,
+      children,
+      isLastItem,
+      accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
+      ...rest
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('List', tokens, variant)
@@ -78,7 +89,6 @@ const ListItem = forwardRef(
     const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
     const iconTokens = selectItemIconTokens(themeTokens)
     const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
-    const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
 
     const renderItem = () => (
       <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: itemStyles })}</View>

package/src/Modal/Modal.jsx

@@ -202,6 +202,7 @@ const staticStyles = StyleSheet.create({
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
-    right: 0
+    right: 0,
+    zIndex: 1
   }
 })

package/src/Pagination/Pagination.jsx

@@ -139,6 +139,9 @@ const Pagination = forwardRef(
     )
   }
 )
+
+Pagination.displayName = 'Pagination'
+
 PageButton.displayName = 'PageButton'
 
 Pagination.PageButton = PageButton

package/src/Search/Search.jsx

@@ -68,6 +68,7 @@ const Search = forwardRef(
       onChange,
       onSubmit,
       onClear,
+      onFocus,
       accessibilityLabel,
       copy = 'en',
       tokens,
@@ -112,6 +113,10 @@ const Search = forwardRef(
       if (onClear !== undefined) onClear('', event)
     }
 
+    const handleFocus = (event) => {
+      if (onFocus !== undefined) onFocus(event)
+    }
+
     const isEmpty = currentValue === ''
 
     // Accessibility label should always be present and correctly localised
@@ -140,6 +145,7 @@ const Search = forwardRef(
           value={currentValue}
           onChange={setValue}
           onSubmitEditing={handleSubmit}
+          onFocus={handleFocus}
           accessibilityLabel={a11yLabelText}
         />
         <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
@@ -214,6 +220,11 @@ Search.propTypes = {
    */
   onClear: PropTypes.func,
   /**
+   * Triggered when the search input is focused.
+   */
+  onFocus: PropTypes.func,
+  /**
+   *
    * Use to provide an accessible label for the input (visually hidden).
    */
   accessibilityLabel: PropTypes.string,

package/src/Select/Item.native.jsx

@@ -1,10 +1,3 @@
-import PropTypes from 'prop-types'
-
 const Item = () => null
 
 export default Item
-
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-}

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/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]