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

package/src/Radio/RadioGroup.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
 
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
@@ -56,72 +57,81 @@ import Fieldset from '../Fieldset'
  * />
  * ```
  */
-const RadioGroup = ({
-  tokens,
-  radioTokens,
-  variant,
-  items = [],
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  initialCheckedId,
-  checkedId,
-  onChange,
-  readOnly,
-  name: inputGroupName,
-  inactive
-}) => {
-  const viewport = useViewport()
+const RadioGroup = forwardRef(
+  (
+    {
+      tokens,
+      radioTokens,
+      variant,
+      items = [],
+      legend,
+      tooltip,
+      hint,
+      validation,
+      feedback,
+      initialCheckedId,
+      checkedId,
+      onChange,
+      readOnly,
+      name: inputGroupName,
+      inactive
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
 
-  const { space, fieldSpace } = useThemeTokens('RadioGroup', tokens, variant, {
-    viewport
-  })
+    const { space, fieldSpace } = useThemeTokens('RadioGroup', tokens, variant, {
+      viewport
+    })
+
+    const { currentValue, setValue } = useInputValue({
+      value: checkedId,
+      initialValue: initialCheckedId,
+      onChange,
+      readOnly: readOnly || inactive
+    })
+    const radios = items.map(({ label, id, onChange: itemOnChange, ref: itemRef }, index) => {
+      const radioId = id || `Radio[${index}]`
+      const isChecked = currentValue === radioId
+      const handleChange = (newCheckedState, event) => {
+        if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
+        if (newCheckedState) setValue(radioId, event)
+      }
+      return (
+        <Radio
+          ref={itemRef}
+          key={radioId}
+          id={radioId}
+          checked={isChecked}
+          onChange={handleChange}
+          inactive={inactive}
+          label={label}
+          name={inputGroupName}
+          tokens={radioTokens}
+          variant={variant}
+        />
+      )
+    })
 
-  const { currentValue, setValue } = useInputValue({
-    value: checkedId,
-    initialValue: initialCheckedId,
-    onChange,
-    readOnly: readOnly || inactive
-  })
-  const radios = items.map(({ label, id, onChange: itemOnChange }, index) => {
-    const radioId = id || `Radio[${index}]`
-    const handleChange = (...args) => {
-      if (typeof itemOnChange === 'function') itemOnChange(...args)
-      setValue(radioId)
-    }
     return (
-      <Radio
-        key={radioId}
-        id={radioId}
-        checked={currentValue === radioId}
-        onChange={handleChange}
-        inactive={inactive}
-        label={label}
+      <Fieldset
+        ref={ref}
         name={inputGroupName}
-        tokens={radioTokens}
-        variant={variant}
-      />
+        legend={legend}
+        tooltip={tooltip}
+        hint={hint}
+        space={fieldSpace}
+        feedback={feedback}
+        inactive={inactive}
+        validation={validation}
+        accessibilityRole="radiogroup"
+      >
+        {getStackedContent(radios, { space, direction: 'column' })}
+      </Fieldset>
     )
-  })
-
-  return (
-    <Fieldset
-      name={inputGroupName}
-      legend={legend}
-      tooltip={tooltip}
-      hint={hint}
-      space={fieldSpace}
-      feedback={feedback}
-      inactive={inactive}
-      status={validation}
-      accessibilityRole="radiogroup"
-    >
-      {getStackedContent(radios, { space, direction: 'column' })}
-    </Fieldset>
-  )
-}
+  }
+)
+RadioGroup.displayName = 'RadioGroup'
 
 RadioGroup.propTypes = {
   /**
@@ -143,7 +153,8 @@ RadioGroup.propTypes = {
     PropTypes.exact({
       label: PropTypes.string,
       id: PropTypes.string,
-      onChange: PropTypes.func
+      onChange: PropTypes.func,
+      ref: ABBPropTypes.ref()
     })
   ),
   /**

package/src/RadioCard/RadioCard.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 
@@ -50,77 +50,84 @@ import RadioButton, { selectRadioButtonTokens } from '../Radio/RadioButton'
  * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
  * or the internal state in case of uncontrolled radio button.
  */
-const RadioCard = ({
-  tokens,
-  variant,
-  title,
-  children,
-  inactive,
-  defaultChecked,
-  checked,
-  name: inputName,
-  value,
-  id,
-  onChange,
-  ...rest
-}) => {
-  const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue({
-    value: checked,
-    initialValue: defaultChecked,
-    onChange
-  })
-  const handleChange = () => {
-    if (!inactive && !isChecked) {
-      setIsChecked(true)
+const RadioCard = forwardRef(
+  (
+    {
+      tokens,
+      variant,
+      title,
+      children,
+      inactive,
+      defaultChecked,
+      checked,
+      name: inputName,
+      value,
+      id,
+      onChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue({
+      value: checked,
+      initialValue: defaultChecked,
+      onChange
+    })
+    const handleChange = (event) => {
+      if (!inactive && !isChecked) {
+        setIsChecked(true, event)
+      }
     }
-  }
-  const a11y = a11yProps.select(rest)
-  const uniqueId = useUniqueId('RadioCard')
-  const inputId = id ?? uniqueId
+    const a11y = a11yProps.select(rest)
+    const uniqueId = useUniqueId('RadioCard')
+    const inputId = id ?? uniqueId
 
-  const getTokens = useThemeTokensCallback('RadioCard', tokens, variant)
-  const getCardTokens = (cardState) => selectPressableCardTokens(getTokens(cardState))
+    const getTokens = useThemeTokensCallback('RadioCard', tokens, variant)
+    const getCardTokens = (cardState) => selectPressableCardTokens(getTokens(cardState))
 
-  return (
-    <PressableCardBase
-      inactive={inactive}
-      checked={isChecked}
-      tokens={getCardTokens}
-      onPress={handleChange}
-      accessibilityRole="radio"
-      accessibilityState={{ checked: isChecked, disabled: inactive }}
-      {...a11y}
-    >
-      {(cardState) => {
-        const { radioSpace, contentSpace, ...themeTokens } = getTokens(cardState)
-        const radioTokens = selectRadioButtonTokens(themeTokens, 'radio')
-        const titleTokens = selectTokens('Typography', themeTokens)
-        const textStyle = applyTextStyles(titleTokens)
-        return (
-          <StackView direction="row" space={radioSpace}>
-            <View style={[staticStyles.alignWithText, { height: textStyle.lineHeight }]}>
-              <RadioButton
-                tokens={radioTokens}
-                isControlled={isControlled}
-                isChecked={isChecked}
-                inactive={inactive}
-                defaultChecked={defaultChecked}
-                inputId={inputId}
-                handleChange={handleChange}
-                name={inputName}
-                value={value}
-              />
-            </View>
-            <StackView direction="column" space={contentSpace}>
-              {title && <Text style={textStyle}>{title}</Text>}
-              {typeof children === 'function' ? children(cardState, textStyle) : children}
+    return (
+      <PressableCardBase
+        ref={ref}
+        inactive={inactive}
+        checked={isChecked}
+        tokens={getCardTokens}
+        onPress={handleChange}
+        accessibilityRole="radio"
+        accessibilityState={{ checked: isChecked, disabled: inactive }}
+        {...a11y}
+      >
+        {(cardState) => {
+          const { radioSpace, contentSpace, ...themeTokens } = getTokens(cardState)
+          const radioTokens = selectRadioButtonTokens(themeTokens, 'radio')
+          const titleTokens = selectTokens('Typography', themeTokens)
+          const textStyle = applyTextStyles(titleTokens)
+          return (
+            <StackView direction="row" space={radioSpace}>
+              <View style={[staticStyles.alignWithText, { height: textStyle.lineHeight }]}>
+                <RadioButton
+                  tokens={radioTokens}
+                  isControlled={isControlled}
+                  isChecked={isChecked}
+                  inactive={inactive}
+                  defaultChecked={defaultChecked}
+                  inputId={inputId}
+                  handleChange={handleChange}
+                  name={inputName}
+                  value={value}
+                />
+              </View>
+              <StackView direction="column" space={contentSpace} tokens={{ flexShrink: 1 }}>
+                {title && <Text style={textStyle}>{title}</Text>}
+                {typeof children === 'function' ? children(cardState, textStyle) : children}
+              </StackView>
             </StackView>
-          </StackView>
-        )
-      }}
-    </PressableCardBase>
-  )
-}
+          )
+        }}
+      </PressableCardBase>
+    )
+  }
+)
+RadioCard.displayName = 'RadioCard'
 
 RadioCard.propTypes = {
   ...a11yProps.propTypes,

package/src/RadioCard/RadioCardGroup.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { useViewport } from '../ViewportProvider'
@@ -58,82 +58,89 @@ import Fieldset from '../Fieldset'
  * />
  * ```
  */
-const RadioCardGroup = ({
-  tokens,
-  radioCardTokens,
-  variant,
-  items = [],
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  initialCheckedId,
-  checkedId,
-  onChange,
-  readOnly,
-  name: inputGroupName,
-  inactive
-}) => {
-  const viewport = useViewport()
-  const { space, fieldSpace, direction } = useThemeTokens('RadioCardGroup', tokens, variant, {
-    viewport
-  })
+const RadioCardGroup = forwardRef(
+  (
+    {
+      tokens,
+      radioCardTokens,
+      variant,
+      items = [],
+      legend,
+      tooltip,
+      hint,
+      validation,
+      feedback,
+      initialCheckedId,
+      checkedId,
+      onChange,
+      readOnly,
+      name: inputGroupName,
+      inactive
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const { space, fieldSpace, direction } = useThemeTokens('RadioCardGroup', tokens, variant, {
+      viewport
+    })
 
-  const { currentValue, setValue } = useInputValue({
-    value: checkedId,
-    initialValue: initialCheckedId,
-    onChange,
-    readOnly: readOnly || inactive
-  })
+    const { currentValue, setValue } = useInputValue({
+      value: checkedId,
+      initialValue: initialCheckedId,
+      onChange,
+      readOnly: readOnly || inactive
+    })
 
-  const StackContainer = direction === 'row' ? StackWrap : StackView
-  // Needs 'radiogroup' role on direct parent of radios for MacOS Voiceover's numbering to work,
-  // and also needs 'radiogroup' role on fieldset for correct description on focusing the set.
-  // TODO: test this on more web screen readers.
-  return (
-    <Fieldset
-      name={inputGroupName}
-      legend={legend}
-      tooltip={tooltip}
-      hint={hint}
-      space={fieldSpace}
-      feedback={feedback}
-      inactive={inactive || readOnly}
-      status={validation}
-      accessibilityRole="radiogroup"
-    >
-      {({ a11yProps }) => (
-        <StackContainer space={space} accessibilityRole="radiogroup">
-          {items.map(({ title, content, id, onChange: itemOnChange }, index) => {
-            const cardId = id || `RadioCard[${index}]`
-            const handleChange = (...args) => {
-              if (typeof itemOnChange === 'function') itemOnChange(...args)
-              setValue(cardId)
-            }
-            return (
-              <RadioCard
-                key={cardId}
-                id={cardId}
-                checked={currentValue === cardId}
-                onChange={handleChange}
-                inactive={inactive}
-                title={title}
-                name={inputGroupName}
-                tokens={radioCardTokens}
-                variant={variant}
-                readOnly={readOnly}
-                {...a11yProps}
-              >
-                {content}
-              </RadioCard>
-            )
-          })}
-        </StackContainer>
-      )}
-    </Fieldset>
-  )
-}
+    const StackContainer = direction === 'row' ? StackWrap : StackView
+    // Needs 'radiogroup' role on direct parent of radios for MacOS Voiceover's numbering to work,
+    // and also needs 'radiogroup' role on fieldset for correct description on focusing the set.
+    // TODO: test this on more web screen readers.
+    return (
+      <Fieldset
+        ref={ref}
+        name={inputGroupName}
+        legend={legend}
+        tooltip={tooltip}
+        hint={hint}
+        space={fieldSpace}
+        feedback={feedback}
+        inactive={inactive || readOnly}
+        validation={validation}
+        accessibilityRole="radiogroup"
+      >
+        {({ a11yProps }) => (
+          <StackContainer space={space} accessibilityRole="radiogroup">
+            {items.map(({ title, content, id, onChange: itemOnChange }, index) => {
+              const cardId = id || `RadioCard[${index}]`
+              const handleChange = (newCheckedState, event) => {
+                if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
+                if (newCheckedState) setValue(cardId, event)
+              }
+              return (
+                <RadioCard
+                  key={cardId}
+                  id={cardId}
+                  checked={currentValue === cardId}
+                  onChange={handleChange}
+                  inactive={inactive}
+                  title={title}
+                  name={inputGroupName}
+                  tokens={radioCardTokens}
+                  variant={variant}
+                  readOnly={readOnly}
+                  {...a11yProps}
+                >
+                  {content}
+                </RadioCard>
+              )
+            })}
+          </StackContainer>
+        )}
+      </Fieldset>
+    )
+  }
+)
+RadioCardGroup.displayName = 'RadioCardGroup'
 
 RadioCardGroup.propTypes = {
   /**