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

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

package/src/ExpandCollapse/Control.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Pressable, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -47,51 +47,48 @@ function selectIconTokens(tokens) {
   }
 }
 
-const ExpandCollapseControl = ({
-  onPress,
-  isExpanded,
-  children,
-  tokens,
-  accessibilityRole = 'button',
-  variant,
-  rest
-}) => {
-  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
+const ExpandCollapseControl = forwardRef(
+  ({ onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, rest }, ref) => {
+    const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
 
-  const a11y = a11yProps.select({ ...rest, accessibilityRole })
-  a11y.accessibilityState = {
-    ...(a11y.accessibilityState || {}),
-    expanded: isExpanded
-  }
+    const a11y = a11yProps.select({ ...rest, accessibilityRole })
+    a11y.accessibilityState = {
+      ...(a11y.accessibilityState || {}),
+      expanded: isExpanded
+    }
 
-  const getControlState = ({ pressed, hovered, focused }) => ({
-    pressed,
-    hover: hovered,
-    focus: focused,
-    expanded: isExpanded
-  })
-  const getControlTokens = (pressableState) => getTokens(getControlState(pressableState))
-  const getPressableStyle = (pressableState) =>
-    selectContainerStyles(getControlTokens(pressableState))
+    const getControlState = ({ pressed, hovered, focused }) => ({
+      pressed,
+      hover: hovered,
+      focus: focused,
+      expanded: isExpanded
+    })
+    const getControlTokens = (pressableState) => getTokens(getControlState(pressableState))
+    const getPressableStyle = (pressableState) =>
+      selectContainerStyles(getControlTokens(pressableState))
 
-  return (
-    <Pressable {...a11y} onPress={onPress} style={getPressableStyle}>
-      {(pressableState) => {
-        const { icon: IconComponent, ...themeTokens } = getControlTokens(pressableState)
-        return (
-          <>
-            {IconComponent && (
-              <View style={selectIconContainerStyles(themeTokens)}>
-                <IconComponent {...selectIconTokens(themeTokens)} />
-              </View>
-            )}
-            {typeof children === 'function' ? children(getControlState(pressableState)) : children}
-          </>
-        )
-      }}
-    </Pressable>
-  )
-}
+    return (
+      <Pressable ref={ref} {...a11y} onPress={onPress} style={getPressableStyle}>
+        {(pressableState) => {
+          const { icon: IconComponent, ...themeTokens } = getControlTokens(pressableState)
+          return (
+            <>
+              {IconComponent && (
+                <View style={selectIconContainerStyles(themeTokens)}>
+                  <IconComponent {...selectIconTokens(themeTokens)} />
+                </View>
+              )}
+              {typeof children === 'function'
+                ? children(getControlState(pressableState))
+                : children}
+            </>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+ExpandCollapseControl.displayName = 'ExpandCollapseControl'
 
 ExpandCollapseControl.propTypes = {
   ...a11yProps.propTypes,

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -20,29 +20,32 @@ function selectBorderStyles(tokens) {
  * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-const ExpandCollapse = ({ children, tokens, variant, maxOpen, open, initialOpen, onChange }) => {
-  const {
-    currentValues: openIds,
-    toggleOneValue: onToggle,
-    resetValues,
-    setValues,
-    unsetValues
-  } = useMultipleInputValues({
-    maxValues: maxOpen,
-    values: open,
-    initialValues: initialOpen,
-    onChange
-  })
-  const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant)
+const ExpandCollapse = forwardRef(
+  ({ children, tokens, variant, maxOpen, open, initialOpen, onChange }, ref) => {
+    const {
+      currentValues: openIds,
+      toggleOneValue: onToggle,
+      resetValues,
+      setValues,
+      unsetValues
+    } = useMultipleInputValues({
+      maxValues: maxOpen,
+      values: open,
+      initialValues: initialOpen,
+      onChange
+    })
+    const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant)
 
-  return (
-    <View style={selectBorderStyles(themeTokens)}>
-      {typeof children === 'function'
-        ? children({ openIds, onToggle, resetValues, setValues, unsetValues })
-        : children}
-    </View>
-  )
-}
+    return (
+      <View ref={ref} style={selectBorderStyles(themeTokens)}>
+        {typeof children === 'function'
+          ? children({ openIds, onToggle, resetValues, setValues, unsetValues })
+          : children}
+      </View>
+    )
+  }
+)
+ExpandCollapse.displayName = 'ExpandCollapse'
 
 ExpandCollapse.propTypes = {
   variant: variantProp.propType,