@telus-uds/components-base 1.8.4 → 1.10.0

package/src/ExpandCollapse/Panel.jsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useState } from 'react'
 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
@@ -95,6 +97,7 @@ const ExpandCollapsePanel = forwardRef(
           isExpanded={isExpanded}
           tokens={controlTokens}
           onPress={handleControlPress}
+          ref={controlRef}
         >
           {control}
         </ExpandCollapseControl>
@@ -142,7 +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()
 }
 
 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/StepTracker/StepTracker.jsx

@@ -95,10 +95,17 @@ const StepTracker = forwardRef(
       }
     )
     const getCopy = useCopy({ dictionary, copy })
-    const stepTrackerLabel = getCopy('stepTrackerLabel')
-      .replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length)
-      .replace('%{stepCount}', steps.length)
-      .replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1])
+    const stepTrackerLabel = showStepTrackerLabel
+      ? getCopy('stepTrackerLabel')
+          .replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length)
+          .replace('%{stepCount}', steps.length)
+          .replace(
+            '%{stepLabel}',
+            current < steps.length ? steps[current] : steps[steps.length - 1]
+          )
+      : ''
+    const getStepLabel = (index) =>
+      themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : ''
     if (!steps.length) return null
     const selectedProps = selectProps({
       accessibilityLabel: stepTrackerLabel,
@@ -123,7 +130,7 @@ const StepTracker = forwardRef(
                   status={current}
                   key={label}
                   label={label}
-                  name={getCopy('stepLabel').replace('%{stepNumber}', index + 1)}
+                  name={getStepLabel(index)}
                   stepIndex={index}
                   stepCount={steps.length}
                   tokens={themeTokens}

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/index.js

@@ -3,6 +3,7 @@ export { default as ActivityIndicator } from './ActivityIndicator'
 export { default as Box } from './Box'
 export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
+export * from './Carousel'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as Divider } from './Divider'

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
 }
 
 /**