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

package/src/Pagination/SideButton.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Text } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -25,53 +25,56 @@ const directionToSide = {
   next: 'right'
 }
 
-function SideButton({ direction = 'previous', onPress, href, copy, variant, tokens, ...props }) {
-  const viewport = useViewport()
-  const buttonVariant = { direction, viewport, ...variant }
-  const getTokens = useThemeTokensCallback('PaginationSideButton', tokens, buttonVariant)
+const SideButton = forwardRef(
+  ({ direction = 'previous', onPress, href, copy, variant, tokens, ...props }, ref) => {
+    const viewport = useViewport()
+    const buttonVariant = { direction, viewport, ...variant }
+    const getTokens = useThemeTokensCallback('PaginationSideButton', tokens, buttonVariant)
 
-  const getCopy = useCopy({ dictionary, copy })
+    const getCopy = useCopy({ dictionary, copy })
 
-  const { icon } = getTokens(tokens, buttonVariant)
+    const { icon } = getTokens(tokens, buttonVariant)
 
-  const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
-  const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
+    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+    const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
 
-  const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
-  const showLabel = viewport !== 'sm' && viewport !== 'xs'
+    const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
+    const showLabel = viewport !== 'sm' && viewport !== 'xs'
 
-  const accessibilityLabel =
-    direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel')
-  const accessibilityRole = href !== undefined ? 'link' : 'button'
+    const accessibilityLabel =
+      direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel')
+    const accessibilityRole = href !== undefined ? 'link' : 'button'
 
-  const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-  const buttonProps = {
-    accessibilityRole,
-    accessibilityLabel,
-    onPress,
-    href,
-    hrefAttrs,
-    ...rest
-  }
+    const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+    const buttonProps = {
+      accessibilityRole,
+      accessibilityLabel,
+      onPress,
+      href,
+      hrefAttrs,
+      ...rest
+    }
 
-  return (
-    <ButtonBase {...buttonProps} tokens={getButtonTokens}>
-      {({ textStyles, ...buttonState }) => {
-        const iconProps = { tokens: getIconTokens(buttonState) }
-        return (
-          <IconText
-            icon={icon}
-            space={1}
-            iconPosition={directionToSide[direction]}
-            iconProps={iconProps}
-          >
-            {showLabel && <Text style={textStyles}>{label}</Text>}
-          </IconText>
-        )
-      }}
-    </ButtonBase>
-  )
-}
+    return (
+      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens}>
+        {({ textStyles, ...buttonState }) => {
+          const iconProps = { tokens: getIconTokens(buttonState) }
+          return (
+            <IconText
+              icon={icon}
+              space={1}
+              iconPosition={directionToSide[direction]}
+              iconProps={iconProps}
+            >
+              {showLabel && <Text style={textStyles}>{label}</Text>}
+            </IconText>
+          )
+        }}
+      </ButtonBase>
+    )
+  }
+)
+SideButton.displayName = 'SideButton'
 
 SideButton.propTypes = {
   direction: PropTypes.oneOf(['previous', 'next']),

package/src/Progress/Progress.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
@@ -49,15 +49,16 @@ const selectProgressStyles = ({
  * role.
  *
  */
-const Progress = ({ children, tokens, variant, ...rest }) => {
+const Progress = forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant)
 
   return (
-    <View style={selectProgressStyles(themeTokens)} {...a11yProps.select(rest)}>
+    <View ref={ref} style={selectProgressStyles(themeTokens)} {...a11yProps.select(rest)}>
       {children}
     </View>
   )
-}
+})
+Progress.displayName = 'Progress'
 
 Progress.propTypes = {
   /**

package/src/Progress/ProgressBar.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 
 import ProgressBarBackground from './ProgressBarBackground'
 import { a11yProps } from '../utils/propTypes'
@@ -52,33 +52,37 @@ const selectBarStyles = (
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-const ProgressBar = ({ children = null, percentage = 0, tokens, variant, ...rest }) => {
-  const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
-  if (percentage < 0) {
-    throw new Error('ProgressBar: `percentage` must be a positive number')
-  } else if (percentage > 100) {
-    throw new Error('ProgressBar: `percentage` cannot exceed 100')
-  }
-  const accessibilityProps = {
-    accessibilityRole: 'progressbar',
-    accessibilityValue: {
-      min: 0,
-      max: 100,
-      now: percentage,
-      text: `${percentage}%`
-    },
-    ...a11yProps.select(rest)
-  }
+const ProgressBar = forwardRef(
+  ({ children = null, percentage = 0, tokens, variant, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
+    if (percentage < 0) {
+      throw new Error('ProgressBar: `percentage` must be a positive number')
+    } else if (percentage > 100) {
+      throw new Error('ProgressBar: `percentage` cannot exceed 100')
+    }
+    const accessibilityProps = {
+      accessibilityRole: 'progressbar',
+      accessibilityValue: {
+        min: 0,
+        max: 100,
+        now: percentage,
+        text: `${percentage}%`
+      },
+      ...a11yProps.select(rest)
+    }
 
-  return percentage > 0 ? (
-    <View
-      style={[staticStyles.bar, selectBarStyles(themeTokens, percentage)]}
-      {...accessibilityProps}
-    >
-      {children ?? <ProgressBarBackground variant={variant} />}
-    </View>
-  ) : null
-}
+    return percentage > 0 ? (
+      <View
+        ref={ref}
+        style={[staticStyles.bar, selectBarStyles(themeTokens, percentage)]}
+        {...accessibilityProps}
+      >
+        {children ?? <ProgressBarBackground variant={variant} />}
+      </View>
+    ) : null
+  }
+)
+ProgressBar.displayName = 'ProgressBar'
 
 ProgressBar.propTypes = {
   /**
@@ -106,5 +110,14 @@ ProgressBar.propTypes = {
 export default ProgressBar
 
 const staticStyles = StyleSheet.create({
-  bar: { height: '100%', outlineStyle: 'solid', overflow: 'hidden', position: 'absolute' }
+  bar: {
+    height: '100%',
+    overflow: 'hidden',
+    position: 'absolute',
+    ...Platform.select({
+      web: {
+        outlineStyle: 'solid'
+      }
+    })
+  }
 })

package/src/Progress/ProgressBarBackground.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { ImageBackground, StyleSheet } from 'react-native'
 
 import { variantProp } from '../utils'
 
 const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`
 const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`
-const ProgressBarBackground = ({ variant }) => {
+const ProgressBarBackground = forwardRef(({ variant }, ref) => {
   let source = null
   if (variant?.inactive) {
     source = inactiveBackground
@@ -16,11 +16,13 @@ const ProgressBarBackground = ({ variant }) => {
   }
   return (
     <ImageBackground
+      ref={ref}
       source={{ uri: `data:image/svg+xml,${source}` }}
       style={staticStyles.imageBackground}
     />
   )
-}
+})
+ProgressBarBackground.displayName = 'ProgressBarBackground'
 
 ProgressBarBackground.propTypes = {
   /**

package/src/Radio/Radio.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
@@ -90,89 +90,96 @@ const selectLabelStyles = ({
  * or the internal state in case of uncontrolled radio button.
  *
  */
-const Radio = ({
-  checked,
-  defaultChecked,
-  description,
-  error = false,
-  id,
-  inactive,
-  label,
-  name: inputName,
-  onChange,
-  tokens,
-  value,
-  variant,
-  ...rest
-}) => {
-  const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue(
+const Radio = forwardRef(
+  (
     {
-      value: checked,
-      initialValue: defaultChecked,
-      onChange
+      checked,
+      defaultChecked,
+      description,
+      error = false,
+      id,
+      inactive,
+      label,
+      name: inputName,
+      onChange,
+      tokens,
+      value,
+      variant,
+      ...rest
     },
-    'useRadioValue'
-  )
-  const getTokens = useThemeTokensCallback('Radio', tokens, {
-    checked: isChecked,
-    inactive,
-    error,
-    ...variant
-  })
-  const handleChange = () => {
-    if (!inactive && !isChecked) {
-      setIsChecked(true)
+    ref
+  ) => {
+    const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue(
+      {
+        value: checked,
+        initialValue: defaultChecked,
+        onChange
+      },
+      'useRadioValue'
+    )
+    const getTokens = useThemeTokensCallback('Radio', tokens, {
+      checked: isChecked,
+      inactive,
+      error,
+      ...variant
+    })
+    const handleChange = (event) => {
+      if (!inactive && !isChecked) {
+        setIsChecked(true, event)
+      }
     }
-  }
-  const handleKeyDown = (e) => {
-    // The expected keyboard shortcut for activating a radio is the Space key
-    if (e?.key === ' ') handleChange()
-  }
-  const accessibilityProps = a11yProps.select(rest)
-  const uniqueId = useUniqueId('radio')
-  const inputId = id ?? uniqueId
+    const handleKeyDown = (event) => {
+      // The expected keyboard shortcut for activating a radio is the Space key
+      if (event?.key === ' ') handleChange(event)
+    }
+    const accessibilityProps = a11yProps.select(rest)
+    const uniqueId = useUniqueId('radio')
+    const inputId = id ?? uniqueId
 
-  return (
-    <Pressable
-      disabled={inactive}
-      onKeyDown={handleKeyDown}
-      onPress={handleChange}
-      accessibilityRole="radio"
-      accessibilityState={{ checked: isChecked, disabled: inactive }}
-      {...accessibilityProps}
-    >
-      {({ focused: focus, hovered: hover, pressed }) => {
-        const stateTokens = getTokens({ focus, hover, pressed })
+    return (
+      <Pressable
+        ref={ref}
+        disabled={inactive}
+        onKeyDown={handleKeyDown}
+        onPress={handleChange}
+        accessibilityRole="radio"
+        accessibilityState={{ checked: isChecked, disabled: inactive }}
+        {...accessibilityProps}
+      >
+        {({ focused: focus, hovered: hover, pressed }) => {
+          const stateTokens = getTokens({ focus, hover, pressed })
 
-        return (
-          <StackView space={0}>
-            <View style={[staticStyles.container, selectContainerStyles(stateTokens)]}>
-              <RadioButton
-                tokens={selectRadioButtonTokens(stateTokens)}
-                isControlled={isControlled}
-                isChecked={isChecked}
-                inactive={inactive}
-                defaultChecked={defaultChecked}
-                inputId={inputId}
-                handleChange={handleChange}
-                name={inputName}
-                value={value}
-              />
-              {Boolean(label) && (
-                <Text style={selectLabelStyles(stateTokens)}>
-                  <RadioLabel forId={inputId}>{label}</RadioLabel>
-                </Text>
+          return (
+            <StackView space={0}>
+              <View style={[staticStyles.container, selectContainerStyles(stateTokens)]}>
+                <RadioButton
+                  tokens={selectRadioButtonTokens(stateTokens)}
+                  isControlled={isControlled}
+                  isChecked={isChecked}
+                  inactive={inactive}
+                  defaultChecked={defaultChecked}
+                  inputId={inputId}
+                  handleChange={handleChange}
+                  name={inputName}
+                  value={value}
+                />
+                {Boolean(label) && (
+                  <Text style={selectLabelStyles(stateTokens)}>
+                    <RadioLabel forId={inputId}>{label}</RadioLabel>
+                  </Text>
+                )}
+              </View>
+              {Boolean(description) && (
+                <Text style={selectDescriptionStyles(getTokens())}>{description}</Text>
               )}
-            </View>
-            {Boolean(description) && (
-              <Text style={selectDescriptionStyles(getTokens())}>{description}</Text>
-            )}
-          </StackView>
-        )
-      }}
-    </Pressable>
-  )
-}
+            </StackView>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+Radio.displayName = 'Radio'
 
 Radio.propTypes = {
   ...a11yProps.propTypes,

package/src/Radio/RadioButton.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 
 import RadioInput from './RadioInput'
 import { applyOuterBorder, resolveThemeTokens, validateThemeTokens } from '../ThemeProvider'
@@ -47,11 +47,15 @@ const selectInputStyles = ({
   borderRadius: getBorderRadius(inputSize),
   borderWidth: inputBorderWidth,
   backgroundColor: inputBackgroundColor,
-  outlineStyle: 'solid',
-  outlineColor: inputOutlineColor,
-  outlineWidth: inputOutlineWidth,
   height: inputSize,
-  width: inputSize
+  width: inputSize,
+  ...Platform.select({
+    web: {
+      outlineStyle: 'solid',
+      outlineColor: inputOutlineColor,
+      outlineWidth: inputOutlineWidth
+    }
+  })
 })
 
 const selectOuterBorderStyles = ({
@@ -72,45 +76,52 @@ const selectOuterBorderStyles = ({
  * The visual toggle of a radio input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with.
  */
-const RadioButton = ({
-  isChecked,
-  tokens,
-  inactive,
-  defaultChecked,
-  inputId,
-  isControlled,
-  handleChange,
-  name: inputName,
-  value
-}) => {
-  const themeTokens = validateThemeTokens(
-    resolveThemeTokens(tokens, { checked: isChecked }),
-    getTokensSetPropType(tokenKeys),
-    'RadioButton'
-  )
+const RadioButton = forwardRef(
+  (
+    {
+      isChecked,
+      tokens,
+      inactive,
+      defaultChecked,
+      inputId,
+      isControlled,
+      handleChange,
+      name: inputName,
+      value
+    },
+    ref
+  ) => {
+    const themeTokens = validateThemeTokens(
+      resolveThemeTokens(tokens, { checked: isChecked }),
+      getTokensSetPropType(tokenKeys),
+      'RadioButton'
+    )
 
-  return (
-    <View style={selectOuterBorderStyles(themeTokens)}>
-      <View
-        style={[staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)]}
-        testID="Radio-Input"
-      >
-        {/* Add a real input on Web, skip on native platforms */}
-        <RadioInput
-          checked={isChecked}
-          defaultChecked={defaultChecked}
-          disabled={inactive}
-          id={inputId}
-          isControlled={isControlled}
-          onChange={handleChange}
-          name={inputName}
-          value={value}
-        />
-        {isChecked && <View style={selectCheckedStyles(themeTokens)} testID="Radio-Checked" />}
+    return (
+      <View style={selectOuterBorderStyles(themeTokens)}>
+        <View
+          style={[staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)]}
+          testID="Radio-Input"
+        >
+          {/* Add a real input on Web, skip on native platforms */}
+          <RadioInput
+            ref={ref}
+            checked={isChecked}
+            defaultChecked={defaultChecked}
+            disabled={inactive}
+            id={inputId}
+            isControlled={isControlled}
+            onChange={handleChange}
+            name={inputName}
+            value={value}
+          />
+          {isChecked && <View style={selectCheckedStyles(themeTokens)} testID="Radio-Checked" />}
+        </View>
       </View>
-    </View>
-  )
-}
+    )
+  }
+)
+RadioButton.displayName = 'RadioButton'
 
 RadioButton.propTypes = {
   isChecked: PropTypes.bool,