@telus-uds/components-base 1.7.1 → 1.8.0

package/src/utils/animation/useVerticalExpandAnimation.js

@@ -1,16 +1,30 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, 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 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])
+
   useEffect(() => {
+    const onComplete = () => !isExpanded && setIsAnimating(false)
+
     if (Platform.OS === 'web') {
-      return
+      if (!elementRef.current) return () => {}
+
+      // React Native Web does not pass `onTransitionEnd` through, must attach manually.
+      // https://github.com/necolas/react-native-web/pull/1713
+      const element = elementRef.current
+      element.addEventListener('transitionend', onComplete)
+      return () => element.removeEventListener('transitionend', onComplete)
     }
 
     const animationConfig = {
@@ -20,28 +34,27 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
       useNativeDriver: false
     }
 
-    Animated.timing(expandAnimatedValue, animationConfig).start()
+    const animation = Animated.timing(expandAnimatedValue, animationConfig)
+    animation.start(onComplete)
+    return () => animation.stop()
   }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration])
 
-  let containerStyles
+  // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+  const containerStyles = !isExpanded && !isAnimating ? { visibility: 'hidden' } : {}
 
   // 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`
 
-      containerStyles = {
-        transition: `height ${transitionDuration}ms ease-in-out`,
-        height: isExpanded ? containerHeight : 0
-      }
+      containerStyles.height = isExpanded ? containerHeight : 0
     } else {
-      containerStyles = {
-        height: expandAnimatedValue
-      }
+      containerStyles.height = expandAnimatedValue
     }
   }
 
-  return containerStyles
+  return [containerStyles, elementRef]
 }
 
 export default useVerticalExpandAnimation

package/src/utils/props/inputSupportsProps.js

@@ -2,6 +2,10 @@ import PropTypes from 'prop-types'
 
 export default {
   types: {
+    /**
+     * Whether the English or French copy will be used (e.g. for accessibility labels).
+     */
+    copy: PropTypes.oneOf(['en', 'fr']),
     /**
      * The input label.
      */
@@ -28,8 +32,9 @@ export default {
      */
     validation: PropTypes.oneOf(['error', 'success'])
   },
-  select: ({ label, hint, hintPosition, feedback, tooltip, validation }) => ({
+  select: ({ copy, label, hint, hintPosition, feedback, tooltip, validation }) => ({
     supportsProps: {
+      copy,
       label,
       hint,
       hintPosition,

package/src/utils/props/tokens.js

@@ -86,33 +86,35 @@ export const selectTokens = (specifier, tokens, prefix) => {
  *   tokens: getTokensPropType('Component1', 'Component2')
  * }
  */
-export const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
-  PropTypes.checkPropTypes(
-    {
-      [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
-    },
-    props,
-    propName,
-    componentName
-  )
-
-  if (typeof props[propName] !== 'function') {
+export const getTokensPropType =
+  (...componentsNames) =>
+  (props, propName, componentName) => {
     PropTypes.checkPropTypes(
       {
-        [propName]: PropTypes.exact(
-          Object.fromEntries(
-            componentsNames.flatMap((component) =>
-              getTokenNames(component).map((key) => [key, tokenValueType])
-            )
-          )
-        )
+        [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
       },
       props,
       propName,
       componentName
     )
+
+    if (typeof props[propName] !== 'function') {
+      PropTypes.checkPropTypes(
+        {
+          [propName]: PropTypes.exact(
+            Object.fromEntries(
+              componentsNames.flatMap((component) =>
+                getTokenNames(component).map((key) => [key, tokenValueType])
+              )
+            )
+          )
+        },
+        props,
+        propName,
+        componentName
+      )
+    }
   }
-}
 
 /**
  * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.

package/stories/Tabs/Tabs.stories.jsx

@@ -40,9 +40,10 @@ TabsWithHref.args = {
   ]
 }
 
-const loremIpsumArray = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. '
-  .repeat(5)
-  .split('. ')
+const loremIpsumArray =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. '
+    .repeat(5)
+    .split('. ')
 
 export const TabsControlled = (args) => {
   const [page, setPage] = useState('1')