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

package/src/Card/PressableCardBase.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform } from 'react-native'
 
@@ -33,74 +33,81 @@ export const selectPressableCardTokens = (tokens) =>
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const PressableCardBase = ({
-  children,
-  tokens,
-  checked,
-  validation,
-  inactive,
-  href,
-  hrefAttrs,
-  onPress,
-  accessibilityRole = href ? 'link' : undefined,
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const a11y = a11yProps.select({
-    ...rest,
-    accessibilityRole
-  })
-  const additionalState = { checked, validation, inactive, viewport }
+const PressableCardBase = forwardRef(
+  (
+    {
+      children,
+      tokens,
+      checked,
+      validation,
+      inactive,
+      href,
+      hrefAttrs,
+      onPress,
+      accessibilityRole = href ? 'link' : undefined,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const a11y = a11yProps.select({
+      ...rest,
+      accessibilityRole
+    })
+    const additionalState = { checked, validation, inactive, viewport }
 
-  const getCardState = (pressableState) => resolvePressableState(pressableState, additionalState)
-  const getTokens = (pressableState) =>
-    validateThemeTokens(
-      resolvePressableTokens(tokens, pressableState, additionalState),
-      getTokensSetPropType(tokenKeys, { requireAll: true }),
-      'PressableCard'
-    )
+    const getCardState = (pressableState) => resolvePressableState(pressableState, additionalState)
+    const getTokens = (pressableState) =>
+      validateThemeTokens(
+        resolvePressableTokens(tokens, pressableState, additionalState),
+        getTokensSetPropType(tokenKeys, { requireAll: true }),
+        'PressableCard'
+      )
 
-  const getCardTokens = (pressableState) => selectTokens('Card', getTokens(pressableState))
-  const getOuterBorderStyle = (pressableState) => {
-    const {
-      flex,
-      minWidth,
-      outerBorderColor,
-      outerBorderGap = 0,
-      outerBorderWidth = 0,
-      borderRadius
-    } = getTokens(pressableState)
-    return {
-      flex,
-      minWidth: minWidth + outerBorderGap + outerBorderWidth,
-      ...applyOuterBorder({ outerBorderColor, outerBorderGap, outerBorderWidth, borderRadius }),
-      ...Platform.select({ web: { outline: 'none' } })
+    const getCardTokens = (pressableState) => selectTokens('Card', getTokens(pressableState))
+    const getOuterBorderStyle = (pressableState) => {
+      const {
+        flex,
+        minWidth,
+        outerBorderColor,
+        outerBorderGap = 0,
+        outerBorderWidth = 0,
+        borderRadius
+      } = getTokens(pressableState)
+      return {
+        flex,
+        minWidth: minWidth + outerBorderGap + outerBorderWidth,
+        ...applyOuterBorder({ outerBorderColor, outerBorderGap, outerBorderWidth, borderRadius }),
+        ...Platform.select({ web: { outline: 'none' } })
+      }
     }
-  }
 
-  const handleChange = linkProps.handleHref({ href, onPress })
-  const handleKeyDown = (e) => {
-    // The expected keyboard shortcut for selecting a focused item is the Space key
-    if (e?.key === ' ') handleChange()
-  }
+    const handleChange = linkProps.handleHref({ href, onPress })
+    const handleKeyDown = (event) => {
+      // The expected keyboard shortcut for selecting a focused item is the Space key
+      if (event?.key === ' ') handleChange(event)
+    }
 
-  return (
-    <Pressable
-      href={href}
-      onPress={handleChange}
-      onKeyDown={handleKeyDown}
-      hrefAttrs={hrefAttrs}
-      style={getOuterBorderStyle}
-      {...a11y}
-    >
-      {(pressableState) => (
-        <CardBase tokens={getCardTokens(pressableState)}>
-          {typeof children === 'function' ? children(getCardState(pressableState)) : children}
-        </CardBase>
-      )}
-    </Pressable>
-  )
-}
+    return (
+      <Pressable
+        ref={ref}
+        href={href}
+        onPress={handleChange}
+        onKeyDown={handleKeyDown}
+        hrefAttrs={hrefAttrs}
+        style={getOuterBorderStyle}
+        {...a11y}
+      >
+        {(pressableState) => (
+          <CardBase tokens={getCardTokens(pressableState)}>
+            {typeof children === 'function' ? children(getCardState(pressableState)) : children}
+          </CardBase>
+        )}
+      </Pressable>
+    )
+  }
+)
+PressableCardBase.displayName = 'PressableCardBase'
 
 PressableCardBase.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

package/src/Checkbox/Checkbox.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import CheckboxInput from './CheckboxInput'
 // @todo move `LabelContent` outside of the `InputLabel` and fix
@@ -32,12 +32,16 @@ const selectInputStyles = (
   borderWidth: inputBorderWidth,
   borderRadius: inputBorderRadius,
   backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
-  outlineStyle: 'solid',
-  outlineColor: inputOutlineColor,
-  outlineWidth: inputOutlineWidth,
   height: inputHeight,
   width: inputWidth,
-  ...applyShadowToken(inputShadow)
+  ...applyShadowToken(inputShadow),
+  ...Platform.select({
+    web: {
+      outlineStyle: 'solid',
+      outlineColor: inputOutlineColor,
+      outlineWidth: inputOutlineWidth
+    }
+  })
 })
 const selectLabelStyles = ({
   labelColor,
@@ -103,115 +107,121 @@ const selectFeedbackTokens = ({ feedbackMarginBottom, feedbackMarginTop, feedbac
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = ({
-  checked,
-  defaultChecked,
-  error = false,
-  feedback,
-  id,
-  inactive,
-  label,
-  name,
-  onChange,
-  tokens,
-  value,
-  variant,
-  ...rest
-}) => {
-  const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue(
+const Checkbox = forwardRef(
+  (
     {
-      value: checked,
-      initialValue: defaultChecked,
-      onChange
+      checked,
+      defaultChecked,
+      error = false,
+      feedback,
+      id,
+      inactive,
+      label,
+      name,
+      onChange,
+      tokens,
+      value,
+      variant,
+      ...rest
     },
-    'useCheckboxValue'
-  )
-  const getTokens = useThemeTokensCallback('Checkbox', tokens, {
-    checked: isChecked,
-    inactive,
-    error,
-    ...variant
-  })
-  const defaultTokens = getTokens()
-  const { feedbackMarginBottom, feedbackMarginTop, feedbackPosition } = selectFeedbackTokens(
-    defaultTokens
-  )
-  const styles = StyleSheet.create({
-    feedbackContainer: { marginTop: feedbackMarginTop, marginBottom: feedbackMarginBottom }
-  })
-  const handleChange = () => {
-    if (!inactive) {
-      setIsChecked(!isChecked)
+    ref
+  ) => {
+    const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue(
+      {
+        value: checked,
+        initialValue: defaultChecked,
+        onChange
+      },
+      'useCheckboxValue'
+    )
+    const getTokens = useThemeTokensCallback('Checkbox', tokens, {
+      checked: isChecked,
+      inactive,
+      error,
+      ...variant
+    })
+    const defaultTokens = getTokens()
+    const { feedbackMarginBottom, feedbackMarginTop, feedbackPosition } = selectFeedbackTokens(
+      defaultTokens
+    )
+    const styles = StyleSheet.create({
+      feedbackContainer: { marginTop: feedbackMarginTop, marginBottom: feedbackMarginBottom }
+    })
+    const handleChange = (event) => {
+      if (!inactive) {
+        setIsChecked(!isChecked, event)
+      }
     }
-  }
-  const handleKeyDown = (e) => {
-    // The expected keyboard shortcut for activating a checkbox is the Space key
-    if (e?.key === ' ') handleChange()
-  }
-  const accessibilityProps = a11yProps.select(rest)
-  const uniqueId = useUniqueId('checkbox')
-  const inputId = id ?? uniqueId
+    const handleKeyDown = (event) => {
+      // The expected keyboard shortcut for activating a checkbox is the Space key
+      if (event?.key === ' ') handleChange(event)
+    }
+    const accessibilityProps = a11yProps.select(rest)
+    const uniqueId = useUniqueId('checkbox')
+    const inputId = id ?? uniqueId
 
-  return (
-    <View style={staticStyles.wrapper}>
-      <StackView direction={feedbackPosition === 'top' ? 'column-reverse' : 'column'} space={0}>
-        <Pressable
-          disabled={inactive}
-          onKeyDown={handleKeyDown}
-          onPress={handleChange}
-          accessibilityRole="checkbox"
-          accessibilityState={{ checked: isChecked, disabled: inactive }}
-          {...accessibilityProps}
-        >
-          {({ focused: focus, hovered: hover, pressed }) => {
-            const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
-            const iconTokens = selectIconTokens(stateTokens)
+    return (
+      <View style={staticStyles.wrapper} ref={ref}>
+        <StackView direction={feedbackPosition === 'top' ? 'column-reverse' : 'column'} space={0}>
+          <Pressable
+            disabled={inactive}
+            onKeyDown={handleKeyDown}
+            onPress={handleChange}
+            accessibilityRole="checkbox"
+            accessibilityState={{ checked: isChecked, disabled: inactive }}
+            {...accessibilityProps}
+          >
+            {({ focused: focus, hovered: hover, pressed }) => {
+              const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
+              const iconTokens = selectIconTokens(stateTokens)
 
-            return (
-              <View style={staticStyles.container}>
-                <View
-                  style={StyleSheet.flatten([
-                    staticStyles.defaultInputStyles,
-                    selectInputStyles(stateTokens, isChecked)
-                  ])}
-                  testID="Checkbox-Input"
-                >
-                  {/* Add a real input on Web, skip on native platforms */}
-                  <CheckboxInput
-                    checked={isChecked}
-                    defaultChecked={defaultChecked}
-                    disabled={inactive}
-                    id={inputId}
-                    isControlled={isControlled}
-                    name={name}
-                    value={value}
-                  />
-                  {isChecked && IconComponent && (
-                    <IconComponent {...iconTokens} testID="Checkbox-Icon" />
+              return (
+                <View style={staticStyles.container}>
+                  <View
+                    style={StyleSheet.flatten([
+                      staticStyles.defaultInputStyles,
+                      selectInputStyles(stateTokens, isChecked)
+                    ])}
+                    testID="Checkbox-Input"
+                  >
+                    {/* Add a real input on Web, skip on native platforms */}
+                    <CheckboxInput
+                      checked={isChecked}
+                      defaultChecked={defaultChecked}
+                      disabled={inactive}
+                      id={inputId}
+                      isControlled={isControlled}
+                      name={name}
+                      value={value}
+                    />
+                    {isChecked && IconComponent && (
+                      <IconComponent {...iconTokens} testID="Checkbox-Icon" />
+                    )}
+                  </View>
+                  {Boolean(label) && (
+                    <Text style={selectLabelStyles(stateTokens)}>
+                      <CheckboxLabel forId={inputId}>{label}</CheckboxLabel>
+                    </Text>
                   )}
                 </View>
-                {Boolean(label) && (
-                  <Text style={selectLabelStyles(stateTokens)}>
-                    <CheckboxLabel forId={inputId}>{label}</CheckboxLabel>
-                  </Text>
-                )}
-              </View>
-            )
-          }}
-        </Pressable>
-        {Boolean(feedback) && (
-          <View style={styles.feedbackContainer}>
-            <Feedback
-              title={feedback}
-              variant={{ icon: error === true }}
-              validation={error === true ? 'error' : undefined}
-            />
-          </View>
-        )}
-      </StackView>
-    </View>
-  )
-}
+              )
+            }}
+          </Pressable>
+          {Boolean(feedback) && (
+            <View style={styles.feedbackContainer}>
+              <Feedback
+                title={feedback}
+                variant={{ icon: error === true }}
+                validation={error === true ? 'error' : undefined}
+              />
+            </View>
+          )}
+        </StackView>
+      </View>
+    )
+  }
+)
+Checkbox.displayName = 'Checkbox'
 
 Checkbox.propTypes = {
   ...a11yProps.propTypes,

package/src/Checkbox/CheckboxGroup.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'
@@ -55,71 +56,79 @@ import Fieldset from '../Fieldset'
  * />
  * ```
  */
-const CheckboxGroup = ({
-  tokens,
-  radioTokens,
-  variant,
-  items = [],
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  initialCheckedIds,
-  checkedIds,
-  onChange,
-  readOnly,
-  name: inputGroupName,
-  inactive
-}) => {
-  const viewport = useViewport()
+const CheckboxGroup = forwardRef(
+  (
+    {
+      tokens,
+      radioTokens,
+      variant,
+      items = [],
+      legend,
+      tooltip,
+      hint,
+      validation,
+      feedback,
+      initialCheckedIds,
+      checkedIds,
+      onChange,
+      readOnly,
+      name: inputGroupName,
+      inactive
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
 
-  const { space, fieldSpace } = useThemeTokens('CheckboxGroup', tokens, variant, {
-    viewport
-  })
+    const { space, fieldSpace } = useThemeTokens('CheckboxGroup', tokens, variant, {
+      viewport
+    })
+
+    const { currentValues, toggleOneValue } = useMultipleInputValues({
+      values: checkedIds,
+      initialValues: initialCheckedIds,
+      onChange,
+      readOnly: readOnly || inactive
+    })
+    const checkboxes = items.map(({ label, id, onChange: itemOnChange, ref: itemRef }, index) => {
+      const checkboxId = id || `Checkbox[${index}]`
+      const handleChange = (newCheckedState, event) => {
+        if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
+        toggleOneValue(checkboxId, event)
+      }
+      return (
+        <Checkbox
+          ref={itemRef}
+          key={checkboxId}
+          id={checkboxId}
+          checked={currentValues.includes(checkboxId)}
+          onChange={handleChange}
+          inactive={inactive}
+          label={label}
+          name={inputGroupName}
+          tokens={radioTokens}
+          variant={variant}
+        />
+      )
+    })
 
-  const { currentValues, toggleOneValue } = useMultipleInputValues({
-    values: checkedIds,
-    initialValues: initialCheckedIds,
-    onChange,
-    readOnly: readOnly || inactive
-  })
-  const checkboxes = items.map(({ label, id, onChange: itemOnChange }, index) => {
-    const checkboxId = id || `Checkbox[${index}]`
-    const handleChange = (...args) => {
-      if (typeof itemOnChange === 'function') itemOnChange(...args)
-      toggleOneValue(checkboxId)
-    }
     return (
-      <Checkbox
-        key={checkboxId}
-        id={checkboxId}
-        checked={currentValues.includes(checkboxId)}
-        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}
+      >
+        {getStackedContent(checkboxes, { space, direction: 'column' })}
+      </Fieldset>
     )
-  })
-
-  return (
-    <Fieldset
-      name={inputGroupName}
-      legend={legend}
-      tooltip={tooltip}
-      hint={hint}
-      space={fieldSpace}
-      feedback={feedback}
-      inactive={inactive}
-      status={validation}
-    >
-      {getStackedContent(checkboxes, { space, direction: 'column' })}
-    </Fieldset>
-  )
-}
+  }
+)
+CheckboxGroup.displayName = 'CheckboxGroup'
 
 CheckboxGroup.propTypes = {
   /**
@@ -141,7 +150,8 @@ CheckboxGroup.propTypes = {
     PropTypes.exact({
       label: PropTypes.string,
       id: PropTypes.string,
-      onChange: PropTypes.func
+      onChange: PropTypes.func,
+      ref: ABBPropTypes.ref()
     })
   ),
   /**

package/src/Divider/Divider.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -45,7 +45,7 @@ import { getTokensPropType, variantProp, spacingProps } from '../utils'
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = ({ variant, vertical = false, space, tokens, testID }) => {
+const Divider = forwardRef(({ variant, vertical = false, space, tokens, testID }, ref) => {
   const { color, width } = useThemeTokens('Divider', tokens, variant)
 
   const borderStyles = vertical
@@ -68,7 +68,9 @@ const Divider = ({ variant, vertical = false, space, tokens, testID }) => {
       : // There are no such equivalent attributes for native
         {}
 
-  const divider = <View style={[styles.divider, borderStyles]} testID={testID} {...a11y} />
+  const divider = (
+    <View ref={ref} style={[styles.divider, borderStyles]} testID={testID} {...a11y} />
+  )
   if (!space) return divider
   const spacerProps = { space, direction: vertical ? 'row' : 'column' }
   return (
@@ -78,7 +80,8 @@ const Divider = ({ variant, vertical = false, space, tokens, testID }) => {
       <Spacer {...spacerProps} testID={testID ? `${testID}-Spacer-after` : undefined} />
     </>
   )
-}
+})
+Divider.displayName = 'Divider'
 
 Divider.propTypes = {
   tokens: getTokensPropType('Divider'),

package/src/ExpandCollapse/Accordion.jsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import ExpandCollapse from './ExpandCollapse'
 
 /**
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
  */
-const Accordion = (props) => <ExpandCollapse {...props} maxOpen={1} />
+const Accordion = forwardRef((props, ref) => <ExpandCollapse ref={ref} {...props} maxOpen={1} />)
+Accordion.displayName = 'Accordion'
 Accordion.propTypes = ExpandCollapse.propTypes
 
 export default Accordion