@telus-uds/components-base 0.0.2-prerelease.9 → 1.1.0

package/src/InputLabel/LabelContent.jsx

@@ -1,13 +1,21 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
-function LabelContent({ children, forId }) {
-  return <label htmlFor={forId}>{children}</label>
-}
-
-export default LabelContent
+const LabelContent = forwardRef(({ children, forId }, ref) => (
+  <label ref={ref} htmlFor={forId} style={staticStyles.inheritCursor}>
+    {children}
+  </label>
+))
+LabelContent.displayName = 'LabelContent'
 
 LabelContent.propTypes = {
   children: PropTypes.string,
   forId: PropTypes.string
 }
+
+// Note that <label> is not React Native, so we can't use `StyleSheet.create` here
+const staticStyles = {
+  inheritCursor: { cursor: 'inherit' }
+}
+
+export default LabelContent

package/src/InputLabel/LabelContent.native.jsx

@@ -1,6 +1,15 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-function LabelContent({ children }) {
-  return children
+const LabelContent = forwardRef(({ children }, ref) =>
+  ref ? <View ref={ref}>{children}</View> : children
+)
+LabelContent.displayName = 'LabelContent'
+
+LabelContent.propTypes = {
+  children: PropTypes.node
 }
 
 export default LabelContent

package/src/InputSupports/InputSupports.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import PropTypes from 'prop-types'
 import InputLabel from '../InputLabel'
@@ -7,41 +7,36 @@ import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
 import useInputSupports from './useInputSupports'
 
-function InputSupports({
-  children,
-  label,
-  hint,
-  hintPosition = 'inline',
-  feedback,
-  tooltip,
-  validation
-}) {
-  const { space } = useThemeTokens('InputSupports')
+const InputSupports = forwardRef(
+  ({ children, label, hint, hintPosition = 'inline', feedback, tooltip, validation }, ref) => {
+    const { space } = useThemeTokens('InputSupports')
 
-  const { inputId, hintId, feedbackId, a11yProps } = useInputSupports({
-    feedback,
-    hint,
-    label,
-    validation
-  })
+    const { inputId, hintId, feedbackId, a11yProps } = useInputSupports({
+      feedback,
+      hint,
+      label,
+      validation
+    })
 
-  return (
-    <StackView space={space}>
-      {label && (
-        <InputLabel
-          label={label}
-          hint={hint}
-          hintPosition={hintPosition}
-          hintId={hintId}
-          tooltip={tooltip}
-          forId={inputId}
-        />
-      )}
-      {typeof children === 'function' ? children({ a11yProps, inputId }) : children}
-      {feedback && <Feedback id={feedbackId} title={feedback} validation={validation} />}
-    </StackView>
-  )
-}
+    return (
+      <StackView space={space} ref={ref}>
+        {label && (
+          <InputLabel
+            label={label}
+            hint={hint}
+            hintPosition={hintPosition}
+            hintId={hintId}
+            tooltip={tooltip}
+            forId={inputId}
+          />
+        )}
+        {typeof children === 'function' ? children({ a11yProps, inputId }) : children}
+        {feedback && <Feedback id={feedbackId} title={feedback} validation={validation} />}
+      </StackView>
+    )
+  }
+)
+InputSupports.displayName = 'InputSupports'
 
 InputSupports.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

package/src/Link/ChevronLink.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
@@ -11,24 +11,34 @@ import LinkBase from './LinkBase'
  *
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
-const ChevronLink = ({ direction = 'right', children, tokens, variant, ...linkProps }) => {
-  const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
-  const applyChevronTokens = (linkState) => {
-    const { leftIcon, rightIcon, iconDisplace, ...otherTokens } = getChevronTokens(linkState)
-    return {
-      ...selectTokens('Link', otherTokens),
-      icon: direction === 'right' ? rightIcon : leftIcon,
-      iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
+const ChevronLink = forwardRef(
+  ({ direction = 'right', children, tokens, variant, dataSet, ...linkProps }, ref) => {
+    const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
+    const applyChevronTokens = (linkState) => {
+      const { leftIcon, rightIcon, iconDisplace, ...otherTokens } = getChevronTokens(linkState)
+      return {
+        ...selectTokens('Link', otherTokens),
+        icon: direction === 'right' ? rightIcon : leftIcon,
+        iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
+      }
     }
+
+    const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant)
+    return (
+      <LinkBase
+        {...linkProps}
+        iconPosition={direction}
+        tokens={getTokens}
+        dataSet={dataSet}
+        ref={ref}
+      >
+        {children}
+      </LinkBase>
+    )
   }
+)
 
-  const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant)
-  return (
-    <LinkBase {...linkProps} iconPosition={direction} tokens={getTokens}>
-      {children}
-    </LinkBase>
-  )
-}
+ChevronLink.displayName = 'ChevronLink'
 ChevronLink.propTypes = {
   ...LinkBase.propTypes,
   tokens: getTokensPropType('ChevronLink', 'Link'),

package/src/Link/InlinePressable.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Pressable, StyleSheet } from 'react-native'
 
 /**
@@ -15,8 +15,9 @@ 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 = ({ children, style, ...props }) => (
+const InlinePressable = forwardRef(({ children, style, ...props }, ref) => (
   <Pressable
+    ref={ref}
     style={(pressState) => [
       staticStyles.inline,
       typeof style === 'function' ? style(pressState) : style
@@ -25,7 +26,8 @@ const InlinePressable = ({ children, style, ...props }) => (
   >
     {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
   </Pressable>
-)
+))
+InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({
   inline: {

package/src/Link/InlinePressable.native.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import React, { useState } from 'react'
+import React, { forwardRef, useState } from 'react'
 import { Text, TouchableWithoutFeedback } from 'react-native'
 
 /**
@@ -38,7 +38,7 @@ const pressablePropsToTouchable = ({
  */
 // 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 = ({ onPress, children, style, ...rest }) => {
+const InlinePressable = forwardRef(({ onPress, children, style, ...rest }, ref) => {
   const [isFocused, setIsFocused] = useState(false)
   const handleFocus = () => setIsFocused(true)
   const handleBlur = () => setIsFocused(false)
@@ -61,6 +61,7 @@ const InlinePressable = ({ onPress, children, style, ...rest }) => {
       onPressOut={handlePressOut}
       onFocus={handleFocus}
       onBlur={handleBlur}
+      ref={ref}
       {...pressablePropsToTouchable(rest)}
     >
       <Text style={currentStyle}>
@@ -68,6 +69,7 @@ const InlinePressable = ({ onPress, children, style, ...rest }) => {
       </Text>
     </TouchableWithoutFeedback>
   )
-}
+})
+InlinePressable.displayName = 'InlinePressable'
 
 export default InlinePressable

package/src/Link/Link.jsx

@@ -1,23 +1,29 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
 
-const Link = ({
-  href,
-  children,
-  accessibilityRole = 'link',
-  variant = {},
-  tokens,
-  ...linkProps
-}) => {
-  const getTokens = useThemeTokensCallback('Link', tokens, variant)
-  return (
-    <LinkBase href={href} accessibilityRole={accessibilityRole} tokens={getTokens} {...linkProps}>
-      {children}
-    </LinkBase>
-  )
-}
+const Link = forwardRef(
+  (
+    { href, children, accessibilityRole = 'link', variant = {}, tokens, dataSet, ...linkProps },
+    ref
+  ) => {
+    const getTokens = useThemeTokensCallback('Link', tokens, variant)
+    return (
+      <LinkBase
+        href={href}
+        accessibilityRole={accessibilityRole}
+        tokens={getTokens}
+        ref={ref}
+        dataSet={dataSet}
+        {...linkProps}
+      >
+        {children}
+      </LinkBase>
+    )
+  }
+)
+Link.displayName = 'Link'
 
 Link.propTypes = LinkBase.propTypes
 

package/src/Link/LinkBase.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Text, Platform, StyleSheet } from 'react-native'
 import {
@@ -88,69 +88,78 @@ const selectIconTokens = ({ color, iconSize, iconTranslateX, iconTranslateY }) =
  *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
  *   should be used more widely (e.g. styled components)
  */
-const LinkBase = ({
-  href,
-  onPress,
-  icon,
-  iconPosition = icon ? 'left' : undefined,
-  iconProps,
-  variant,
-  tokens = {},
-  children,
-  accessibilityRole = 'link',
-  ...props
-}) => {
-  const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-  const linkPropSet = linkProps.select({
-    accessibilityRole,
-    href,
-    onPress: linkProps.handleHref({ href, onPress }),
-    hrefAttrs,
-    ...rest
-  })
+const LinkBase = forwardRef(
+  (
+    {
+      href,
+      onPress,
+      icon,
+      iconPosition = icon ? 'left' : undefined,
+      iconProps,
+      variant,
+      tokens = {},
+      children,
+      accessibilityRole = 'link',
+      dataSet,
+      ...props
+    },
+    ref
+  ) => {
+    const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+    const linkPropSet = linkProps.select({
+      accessibilityRole,
+      href,
+      onPress: linkProps.handleHref({ href, onPress }),
+      hrefAttrs,
+      ...rest
+    })
 
-  const resolveLinkTokens = (pressState) =>
-    resolvePressableTokens(tokens, pressState, { iconPosition })
+    const resolveLinkTokens = (pressState) =>
+      resolvePressableTokens(tokens, pressState, { iconPosition })
 
-  // On web, this makes focus rings wrap only the link, not the entire block
-  const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
+    // On web, this makes focus rings wrap only the link, not the entire block
+    const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
 
-  return (
-    <InlinePressable
-      {...linkPropSet}
-      style={(linkState) => {
-        const themeTokens = resolveLinkTokens(linkState)
-        const outerBorderStyles = selectOuterBorderStyles(themeTokens)
-        const hasIcon = Boolean(icon || themeTokens.icon)
-        return [outerBorderStyles, blockLeftStyle, hasIcon && staticStyles.rowContainer]
-      }}
-    >
-      {(linkState) => {
-        const themeTokens = resolveLinkTokens(linkState)
-        const textStyles = selectTextStyles(themeTokens)
-        const iconTokens = selectIconTokens(themeTokens)
+    return (
+      <InlinePressable
+        {...linkPropSet}
+        ref={ref}
+        dataSet={dataSet}
+        style={(linkState) => {
+          const themeTokens = resolveLinkTokens(linkState)
+          const outerBorderStyles = selectOuterBorderStyles(themeTokens)
+          const hasIcon = Boolean(icon || themeTokens.icon)
+          return [outerBorderStyles, blockLeftStyle, hasIcon && staticStyles.rowContainer]
+        }}
+      >
+        {(linkState) => {
+          const themeTokens = resolveLinkTokens(linkState)
+          const textStyles = selectTextStyles(themeTokens)
+          const iconTokens = selectIconTokens(themeTokens)
 
-        // TODO: may need to apply some smarter text inheritance here if inline to avoid native
-        // issues like double-application of line heights breaking align-items: baseline
-        const blockTextStyles = selectBlockStyles(themeTokens)
+          // TODO: may need to apply some smarter text inheritance here if inline to avoid native
+          // issues like double-application of line heights breaking align-items: baseline
+          const blockTextStyles = selectBlockStyles(themeTokens)
 
-        const IconComponent = icon || themeTokens.icon
-        const { iconSpace } = themeTokens
+          const IconComponent = icon || themeTokens.icon
+          const { iconSpace } = themeTokens
 
-        return (
-          <IconText
-            icon={IconComponent}
-            iconPosition={iconPosition}
-            space={iconSpace}
-            iconProps={{ ...iconProps, tokens: iconTokens }}
-          >
-            <Text style={[textStyles, blockTextStyles, staticStyles.baseline]}>{children}</Text>
-          </IconText>
-        )
-      }}
-    </InlinePressable>
-  )
-}
+          return (
+            <IconText
+              icon={IconComponent}
+              iconPosition={iconPosition}
+              space={iconSpace}
+              iconProps={{ ...iconProps, tokens: iconTokens }}
+            >
+              <Text style={[textStyles, blockTextStyles, staticStyles.baseline]}>{children}</Text>
+            </IconText>
+          )
+        }}
+      </InlinePressable>
+    )
+  }
+)
+LinkBase.displayName = 'LinkBase'
 
 LinkBase.propTypes = {
   ...a11yProps.types,

package/src/Link/TextButton.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
@@ -9,28 +9,35 @@ import LinkBase from './LinkBase'
  * Link but has the accessibility role of a `Button`. It should be used for actions that
  * take place on the current page, or for navigation within an app.
  */
-const TextButton = ({
-  onPress,
-  children,
-  variant,
-  tokens,
-  // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
-  // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
-  accessibilityRole = 'button',
-  ...linkProps
-}) => {
-  const getTokens = useThemeTokensCallback('Link', tokens, variant)
-  return (
-    <LinkBase
-      onPress={onPress}
-      accessibilityRole={accessibilityRole}
-      tokens={getTokens}
-      {...linkProps}
-    >
-      {children}
-    </LinkBase>
-  )
-}
+const TextButton = forwardRef(
+  (
+    {
+      onPress,
+      children,
+      variant,
+      tokens,
+      // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
+      // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
+      accessibilityRole = 'button',
+      ...linkProps
+    },
+    ref
+  ) => {
+    const getTokens = useThemeTokensCallback('Link', tokens, variant)
+    return (
+      <LinkBase
+        onPress={onPress}
+        accessibilityRole={accessibilityRole}
+        tokens={getTokens}
+        ref={ref}
+        {...linkProps}
+      >
+        {children}
+      </LinkBase>
+    )
+  }
+)
+TextButton.displayName = 'TextButton'
 
 TextButton.propTypes = {
   ...LinkBase.propTypes,

package/src/List/List.jsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, Children } from 'react'
+import React, { cloneElement, forwardRef, Children } from 'react'
 import { View, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import { getTokensPropType, variantProp, componentPropType } from '../utils'
@@ -6,10 +6,10 @@ import { a11yProps } from '../utils/propTypes'
 import ListItem from './ListItem'
 
 /**
- * A Unordered List component has a child a ListItem that
+ * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = ({ children, showDivider, tokens, variant, ...rest }) => {
+const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
   const accessibilityRole = Platform.select({ web: 'list', default: 'none' })
   const a11y = a11yProps.select(rest)
   const items = Children.map(children, (child, index) => {
@@ -25,13 +25,12 @@ const List = ({ children, showDivider, tokens, variant, ...rest }) => {
   })
 
   return (
-    <View accessibilityRole={accessibilityRole} {...a11y}>
+    <View ref={ref} accessibilityRole={accessibilityRole} {...a11y}>
       {items}
     </View>
   )
-}
-
-List.Item = ListItem
+})
+List.displayName = 'List'
 
 List.propTypes = {
   ...a11yProps.types,