@telus-uds/components-base 1.84.0 → 1.85.0

package/src/QuickLinksFeature/QuickLinksFeature.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, Children, cloneElement } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StackWrap } from '../StackView'
-
+import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
@@ -17,34 +17,38 @@ const isQuickListItem = (element) => {
  * QuickLinksFeature renders a list of interactive items.
  *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
  */
-const QuickLinksFeature = forwardRef(({ tokens, variant, tag = 'ul', children, ...rest }, ref) => {
-  const { stackGap, stackJustify, stackSpace } = useThemeTokens(
-    'QuickLinksFeature',
-    tokens,
-    variant
-  )
+const QuickLinksFeature = React.forwardRef(
+  ({ tokens, variant, tag = 'ul', children, ...rest }, ref) => {
+    const viewport = useViewport()
+    const { stackGap, stackJustify, stackSpace } = useThemeTokens(
+      'QuickLinksFeature',
+      tokens,
+      variant,
+      { viewport }
+    )
 
-  const items = Children.map(children, (child) => {
-    if (isQuickListItem(child)) {
-      return cloneElement(child, child.props)
-    }
+    const items = React.Children.map(children, (child) => {
+      if (isQuickListItem(child)) {
+        return React.cloneElement(child, child.props)
+      }
 
-    return null
-  })
+      return null
+    })
 
-  return (
-    <StackWrap
-      space={stackSpace}
-      gap={stackGap}
-      tokens={{ justifyContent: stackJustify }}
-      tag={tag}
-      ref={ref}
-      {...selectProps(rest)}
-    >
-      {items}
-    </StackWrap>
-  )
-})
+    return (
+      <StackWrap
+        space={stackSpace}
+        gap={stackGap}
+        tokens={{ justifyContent: stackJustify }}
+        tag={tag}
+        ref={ref}
+        {...selectProps(rest)}
+      >
+        {items}
+      </StackWrap>
+    )
+  }
+)
 
 QuickLinksFeature.displayName = 'QuickLinksFeature'
 

package/src/QuickLinksFeature/QuickLinksFeatureItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { Image, Platform, Text, View } from 'react-native'
@@ -48,7 +48,7 @@ const selectLinkToken = ({ outerBorderColor }) => ({ outerBorderColor })
  *
  * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
  */
-const QuickLinksFeatureItem = forwardRef(
+const QuickLinksFeatureItem = React.forwardRef(
   ({ tokens, variant, children, imageAccessibilityLabel, imageSource, ...rest }, ref) => {
     const viewport = useViewport()
     const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant)
@@ -86,8 +86,8 @@ const QuickLinksFeatureItem = forwardRef(
                     source={imageSource}
                     style={selectImageStyle(imageDimension)}
                   />
+                  <Text style={textStyle}>{children}</Text>
                 </View>
-                <Text style={textStyle}>{children}</Text>
               </StackWrap>
             </View>
           )

package/src/Radio/Radio.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
@@ -111,7 +111,7 @@ const selectLabelStyles = ({
  * or the internal state in case of uncontrolled radio button.
  *
  */
-const Radio = forwardRef(
+const Radio = React.forwardRef(
   (
     {
       checked,

package/src/Radio/RadioButton.jsx

@@ -1,9 +1,15 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import RadioInput from './RadioInput'
-import { applyOuterBorder, resolveThemeTokens, validateThemeTokens } from '../ThemeProvider'
+import {
+  applyOuterBorder,
+  applyShadowToken,
+  resolveThemeTokens,
+  validateThemeTokens,
+  useThemeTokens
+} from '../ThemeProvider'
 import {
   a11yProps,
   getTokensSetPropType,
@@ -43,6 +49,32 @@ const selectCheckedStyles = ({ checkedBackgroundColor, checkedSize }) => ({
   width: checkedSize
 })
 
+const selectIconTokens = ({ icon, iconColor, checkedSize }) => ({
+  icon,
+  color: iconColor,
+  size: checkedSize
+})
+
+const selectInputIconStyles = (
+  {
+    iconBackgroundColor,
+    inputBackgroundColor,
+    inputBorderColor,
+    inputBorderWidth,
+    inputSize,
+    containerShadow
+  },
+  isChecked
+) => ({
+  borderColor: inputBorderColor,
+  borderRadius: getBorderRadius(inputSize),
+  borderWidth: inputBorderWidth,
+  backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
+  height: inputSize,
+  width: inputSize,
+  ...applyShadowToken(containerShadow)
+})
+
 const selectInputStyles = ({
   inputBackgroundColor,
   inputBorderColor,
@@ -84,7 +116,7 @@ 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 = forwardRef(
+const RadioButton = React.forwardRef(
   (
     {
       isChecked,
@@ -96,20 +128,40 @@ const RadioButton = forwardRef(
       handleChange,
       name: inputName,
       value,
+      testID = 'Radio-Checked',
       ...rest
     },
     ref
   ) => {
+    const radioTokens = useThemeTokens('Radio', tokens, {
+      checked: isChecked
+    })
+    const { icon: IconComponent, ...iconTokens } = selectIconTokens(radioTokens)
     const themeTokens = validateThemeTokens(
-      resolveThemeTokens(tokens, { checked: isChecked }),
+      resolveThemeTokens(IconComponent ? radioTokens : tokens, {
+        checked: isChecked
+      }),
       getTokensSetPropType(tokenKeys),
       'RadioButton'
     )
 
+    const getCheckedInput = (checked) => {
+      if (!checked) return null
+      if (!IconComponent) {
+        return <View style={selectCheckedStyles(themeTokens)} testID={testID} />
+      }
+      return <IconComponent {...iconTokens} />
+    }
+
     return (
       <View style={selectOuterBorderStyles(themeTokens)} {...selectProps(rest)}>
         <View
-          style={[staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)]}
+          style={[
+            staticStyles.defaultInputStyles,
+            IconComponent
+              ? selectInputIconStyles(themeTokens, isChecked)
+              : selectInputStyles(themeTokens)
+          ]}
           testID="Radio-Input"
         >
           {/* Add a real input on Web, skip on native platforms */}
@@ -124,7 +176,7 @@ const RadioButton = forwardRef(
             name={inputName}
             value={value}
           />
-          {isChecked && <View style={selectCheckedStyles(themeTokens)} testID="Radio-Checked" />}
+          {getCheckedInput(isChecked)}
         </View>
       </View>
     )

package/src/Radio/RadioGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 
@@ -73,7 +73,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * />
  * ```
  */
-const RadioGroup = forwardRef(
+const RadioGroup = React.forwardRef(
   (
     {
       copy = 'en',

package/src/Radio/RadioInput.jsx

@@ -1,11 +1,23 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 /**
  * On Web we need to include an actual input but hide it.
  */
-const RadioInput = forwardRef(
-  ({ checked, defaultChecked, disabled, id, isControlled, name, onChange, value }, ref) => {
+const RadioInput = React.forwardRef(
+  (
+    {
+      checked,
+      defaultChecked,
+      disabled = false,
+      id = null,
+      isControlled = false,
+      name,
+      onChange = () => {},
+      value
+    },
+    ref
+  ) => {
     const handleClick = (event) => {
       // Cancel the click dispatched via the label tag, since it's already wrapped
       // in <Pressable>
@@ -43,15 +55,4 @@ RadioInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
 }
 
-RadioInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  id: null,
-  isControlled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-}
-
 export default RadioInput

package/src/RadioCard/RadioCard.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 
@@ -59,7 +59,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * 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 = forwardRef(
+const RadioCard = React.forwardRef(
   (
     {
       tokens,

package/src/RadioCard/RadioCardGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useViewport } from '../ViewportProvider'
@@ -74,7 +74,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * />
  * ```
  */
-const RadioCardGroup = forwardRef(
+const RadioCardGroup = React.forwardRef(
   (
     {
       copy = 'en',

package/src/Responsive/Responsive.jsx

@@ -17,13 +17,18 @@ import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleS
  * is used to hide and show children of `Responsive` within a View.
  */
 
-const Responsive = ({ min = 'xs', max, inheritedStyles = [], children }) => {
+const Responsive = React.forwardRef(({ min = 'xs', max, inheritedStyles = [], children }, ref) => {
   const {
     themeOptions: { enableMediaQueryStyleSheet }
   } = useTheme()
   if (enableMediaQueryStyleSheet) {
     return (
-      <ResponsiveWithMediaQueryStyleSheet inheritedStyles={inheritedStyles} min={min} max={max}>
+      <ResponsiveWithMediaQueryStyleSheet
+        inheritedStyles={inheritedStyles}
+        min={min}
+        max={max}
+        ref={ref}
+      >
         {children}
       </ResponsiveWithMediaQueryStyleSheet>
     )
@@ -33,7 +38,7 @@ const Responsive = ({ min = 'xs', max, inheritedStyles = [], children }) => {
       {children}
     </ResponsiveProp>
   )
-}
+})
 
 Responsive.displayName = 'Responsive'
 

package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx

@@ -25,22 +25,29 @@ function generateResponsiveStyles(min, max) {
   })
   return createMediaQueryStyles(styles, false)
 }
-const ResponsiveWithMediaQueryStyleSheet = ({ min, max, inheritedStyles = [], children }) => {
-  const { ids, styles } = StyleSheet.create({
-    responsive: {
-      ...inheritedStyles.reduce((acc, prop) => {
-        acc[prop] = 'inherit'
-        return acc
-      }, {}),
-      ...generateResponsiveStyles(min, max)
-    }
-  })
-  return (
-    <BaseView style={styles.responsive} dataSet={ids.responsive && { media: ids.responsive }}>
-      {children}
-    </BaseView>
-  )
-}
+
+const ResponsiveWithMediaQueryStyleSheet = React.forwardRef(
+  ({ min, max, inheritedStyles = [], children }, ref) => {
+    const { ids, styles } = StyleSheet.create({
+      responsive: {
+        ...inheritedStyles.reduce((acc, prop) => {
+          acc[prop] = 'inherit'
+          return acc
+        }, {}),
+        ...generateResponsiveStyles(min, max)
+      }
+    })
+    return (
+      <BaseView
+        style={styles.responsive}
+        dataSet={ids.responsive && { media: ids.responsive }}
+        ref={ref}
+      >
+        {children}
+      </BaseView>
+    )
+  }
+)
 
 ResponsiveWithMediaQueryStyleSheet.displayName = 'Responsive'
 

package/src/Search/Search.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -56,7 +56,7 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size:
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-const Search = forwardRef(
+const Search = React.forwardRef(
   (
     {
       initialValue,

package/src/Select/Group.jsx

@@ -3,9 +3,15 @@ import PropTypes from 'prop-types'
 
 import { componentPropType } from '../utils'
 
-const Group = ({ children, label }) => {
-  return <optgroup label={label}>{children}</optgroup>
-}
+const Group = React.forwardRef(({ children, label }, ref) => {
+  return (
+    <optgroup label={label} ref={ref}>
+      {children}
+    </optgroup>
+  )
+})
+
+Group.displayName = 'Group'
 
 export default Group
 

package/src/Select/Item.jsx

@@ -1,7 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Item = ({ children, value }) => <option value={value}>{children}</option>
+const Item = React.forwardRef(({ children, value }, ref) => (
+  <option value={value} ref={ref}>
+    {children}
+  </option>
+))
+
+Item.displayName = 'Item'
 
 export default Item
 

package/src/Select/Picker.jsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import PropTypes from 'prop-types'
 import { componentPropType } from '../utils'
 
-const Picker = forwardRef(
+const Picker = React.forwardRef(
   (
     {
       value,

package/src/Select/Picker.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Children } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
 import NativePicker from 'react-native-picker-select'
@@ -40,10 +40,10 @@ const selectAndroidContainerStyles = ({
   height: rest.height + ANDROID_HEIGHT_OFFSET
 })
 
-const Picker = forwardRef(
+const Picker = React.forwardRef(
   ({ value, onChange, onFocus, onBlur, style, inactive, children, placeholder, ...rest }, ref) => {
     // Ungroup items, since there's no way to support groups on native
-    const flatChildren = Children.toArray(children).flatMap((child) => {
+    const flatChildren = React.Children.toArray(children).flatMap((child) => {
       if (child.type === Group) {
         return child.props.children
       }

package/src/Select/Select.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
@@ -179,7 +179,7 @@ const selectCustomFeedbackStyles = ({ feedbackBackgroundColor }) => ({
  * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
  *
  */
-const Select = forwardRef(
+const Select = React.forwardRef(
   (
     {
       value,
@@ -204,11 +204,11 @@ const Select = forwardRef(
       readOnly
     })
 
-    const [isFocused, setIsFocused] = useState(false)
+    const [isFocused, setIsFocused] = React.useState(false)
     const handleFocus = () => setIsFocused(true)
     const handleBlur = () => setIsFocused(false)
 
-    const [isHovered, setIsHovered] = useState(false)
+    const [isHovered, setIsHovered] = React.useState(false)
     const handleMouseOver = () => setIsHovered(true)
     const handleMouseOut = () => setIsHovered(false)
 

package/src/SideNav/Item.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Pressable, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import {
@@ -46,7 +46,7 @@ function selectItemStyles({
 
  This component can only be accessed as a name-spaced component: `SideNav.Item`.
  */
-const Item = forwardRef(
+const Item = React.forwardRef(
   (
     {
       children,

package/src/SideNav/ItemContent.jsx

@@ -19,16 +19,20 @@ export function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = ({ children, tokens }) => {
+const ItemContent = React.forwardRef(({ children, tokens }, ref) => {
   const typographyTokens = selectTokens('Typography', tokens)
 
   return (
     <>
-      <Typography tokens={typographyTokens}>{children}</Typography>
+      <Typography tokens={typographyTokens} ref={ref}>
+        {children}
+      </Typography>
       <View style={[staticStyles.absolute, selectAccentStyles(tokens)]} />
     </>
   )
-}
+})
+
+ItemContent.displayName = 'ItemContent'
 
 ItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),

package/src/SideNav/ItemsGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import ItemContent from './ItemContent'
@@ -16,7 +16,7 @@ import { useThemeTokensCallback } from '../ThemeProvider'
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
-const ItemsGroup = forwardRef(
+const ItemsGroup = React.forwardRef(
   (
     {
       children,

package/src/SideNav/SideNav.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import ExpandCollapse from '../ExpandCollapse'
@@ -29,10 +29,10 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = forwardRef(
+const SideNav = React.forwardRef(
   ({ children, variant = {}, tokens, accordion = true, itemTokens, groupTokens, ...rest }, ref) => {
     const themeTokens = useThemeTokens('SideNav', tokens, variant)
-    const [active, setActive] = useState({ groupId: undefined, itemId: undefined })
+    const [active, setActive] = React.useState({ groupId: undefined, itemId: undefined })
 
     const onItemPress = (itemId, groupId) => {
       setActive({ itemId, groupId })

package/src/Skeleton/Skeleton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Animated, Platform, StyleSheet, View } from 'react-native'
 import propTypes from 'prop-types'
 import StackView from '../StackView'
@@ -40,7 +40,7 @@ const selectSquareStyles = ({ radius }) => ({
   borderRadius: radius
 })
 
-const Skeleton = forwardRef(
+const Skeleton = React.forwardRef(
   (
     {
       tokens,

package/src/SkipLink/SkipLink.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Platform, Pressable, StyleSheet, Text } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -100,7 +100,7 @@ const selectTextStyles = ({ color, textLine, fontName, fontSize, fontWeight, lin
  *
  * Skip link supports all the common a11y and link props.
  */
-const SkipLink = forwardRef(({ tokens, variant, href, children, ...rawRest }, ref) => {
+const SkipLink = React.forwardRef(({ tokens, variant, href, children, ...rawRest }, ref) => {
   const { onPress, ...rest } = clickProps.toPressProps(rawRest)
 
   const getTokens = useThemeTokensCallback('SkipLink', tokens, variant)

package/src/Spacer/Spacer.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils'
@@ -56,7 +56,7 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-const Spacer = forwardRef(({ space = 1, direction = 'column', ...rest }, ref) => {
+const Spacer = React.forwardRef(({ space = 1, direction = 'column', ...rest }, ref) => {
   const size = useSpacingScale(space)
   const sizeStyle = selectSizeStyle(size, direction)
 

package/src/StackView/StackView.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
@@ -64,7 +64,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
  * semantic role but only on web, not within native apps).
  */
-const StackView = forwardRef(
+const StackView = React.forwardRef(
   (
     {
       space = 0,

package/src/StackView/StackWrap.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import { Platform } from 'react-native'
 
 import useSafeLayoutEffect from '../utils/useSafeLayoutEffect'
@@ -23,8 +23,8 @@ const exampleGapValue = '1px'
  * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
-const StackWrap = forwardRef((props, ref) => {
-  const [canUseCSSGap, setCanUseCSSGap] = useState(false)
+const StackWrap = React.forwardRef((props, ref) => {
+  const [canUseCSSGap, setCanUseCSSGap] = React.useState(false)
   const { space } = props
   // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
   const gap = props.gap ?? space