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

package/src/Button/ButtonGroup.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 { Platform } from 'react-native'
 
 import ButtonBase from './ButtonBase'
@@ -16,81 +17,88 @@ import {
 import { useMultipleInputValues } from '../utils/input'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
-const ButtonGroup = ({
-  variant,
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues = 1,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  accessibilityRole = maxValues === 1
-    ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
-    : Platform.select({ web: 'group', default: 'none' }),
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
-  const stackTokens = selectTokens('StackView', themeTokens)
-  const { direction, space } = themeTokens
+const ButtonGroup = forwardRef(
+  (
+    {
+      variant,
+      tokens,
+      items = [],
+      values,
+      initialValues,
+      maxValues = 1,
+      onChange,
+      readOnly = false,
+      inactive = false,
+      accessibilityRole = maxValues === 1
+        ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+        : Platform.select({ web: 'group', default: 'none' }),
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
+    const stackTokens = selectTokens('StackView', themeTokens)
+    const { direction, space } = themeTokens
 
-  const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
+    const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
 
-  const { currentValues, toggleOneValue } = useMultipleInputValues({
-    initialValues,
-    values,
-    maxValues,
-    onChange,
-    readOnly
-  })
+    const { currentValues, toggleOneValue } = useMultipleInputValues({
+      initialValues,
+      values,
+      maxValues,
+      onChange,
+      readOnly
+    })
 
-  const a11y = a11yProps.select({
-    accessibilityRole,
-    ...rest
-  })
-  const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
+    const a11y = a11yProps.select({
+      accessibilityRole,
+      ...rest
+    })
+    const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
 
-  return (
-    <StackWrap {...a11y} space={space} direction={direction} tokens={stackTokens}>
-      {items.map(({ label, id = label, accessibilityLabel }, index) => {
-        const isSelected = currentValues.includes(id)
+    return (
+      <StackWrap {...a11y} space={space} direction={direction} tokens={stackTokens} ref={ref}>
+        {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
+          const isSelected = currentValues.includes(id)
 
-        // Pass an object of relevant component state as first argument for any passed-in press handlers
-        const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
+          // Pass an object of relevant component state as first argument for any passed-in press handlers
+          const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
-        const handlePress = () => {
-          if (pressHandlers.onPress) pressHandlers.onPress()
-          toggleOneValue(id)
-        }
+          const handlePress = (event) => {
+            if (pressHandlers.onPress) pressHandlers.onPress()
+            toggleOneValue(id, event)
+          }
 
-        const itemA11y = {
-          accessibilityState: { checked: isSelected },
-          accessibilityRole: itemA11yRole,
-          accessibilityLabel,
-          ...a11yProps.getPositionInSet(items.length, index)
-        }
+          const itemA11y = {
+            accessibilityState: { checked: isSelected },
+            accessibilityRole: itemA11yRole,
+            accessibilityLabel,
+            ...a11yProps.getPositionInSet(items.length, index)
+          }
 
-        // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
-        // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-        return (
-          <ButtonBase
-            key={id}
-            {...pressHandlers}
-            onPress={handlePress}
-            tokens={getButtonTokens}
-            selected={isSelected}
-            inactive={inactive}
-            {...itemA11y}
-          >
-            {label}
-          </ButtonBase>
-        )
-      })}
-    </StackWrap>
-  )
-}
+          // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
+          // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
+          return (
+            <ButtonBase
+              ref={itemRef}
+              key={id}
+              {...pressHandlers}
+              onPress={handlePress}
+              tokens={getButtonTokens}
+              selected={isSelected}
+              inactive={inactive}
+              {...itemA11y}
+            >
+              {label}
+            </ButtonBase>
+          )
+        })}
+      </StackWrap>
+    )
+  }
+)
+ButtonGroup.displayName = 'ButtonGroup'
 
 ButtonGroup.propTypes = {
   ...a11yProps.propTypes,
@@ -122,7 +130,11 @@ ButtonGroup.propTypes = {
        * which will be used in code and passed to any onChange function.
        * If not provided, the label is used.
        */
-      id: PropTypes.string
+      id: PropTypes.string,
+      /**
+       * An optional ref for one individual button in the ButtonGroup
+       */
+      ref: ABBPropTypes.ref()
     })
   ),
   /**

package/src/Button/ButtonLink.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
@@ -8,18 +8,23 @@ import { useThemeTokensCallback } from '../ThemeProvider'
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-const ButtonLink = ({ accessibilityRole = 'link', tokens, variant, ...props }) => {
-  const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-  const getTokens = useThemeTokensCallback('Button', tokens, variant)
-  return (
-    <ButtonBase
-      accessibilityRole={accessibilityRole}
-      tokens={getTokens}
-      hrefAttrs={hrefAttrs}
-      {...rest}
-    />
-  )
-}
+const ButtonLink = forwardRef(
+  ({ accessibilityRole = 'link', tokens, variant, dataSet, ...props }, ref) => {
+    const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+    const getTokens = useThemeTokensCallback('Button', tokens, variant)
+    return (
+      <ButtonBase
+        ref={ref}
+        accessibilityRole={accessibilityRole}
+        tokens={getTokens}
+        hrefAttrs={hrefAttrs}
+        dataSet={dataSet}
+        {...rest}
+      />
+    )
+  }
+)
+ButtonLink.displayName = 'ButtonLink'
 
 ButtonLink.propTypes = {
   ...a11yProps.types,

package/src/Card/Card.jsx

@@ -55,11 +55,11 @@ import CardBase from './CardBase'
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = ({ children, tokens, variant, ...rest }) => {
+const Card = ({ children, tokens, variant, dataSet, ...rest }) => {
   const viewport = useViewport()
   const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
   return (
-    <CardBase tokens={themeTokens} {...rest}>
+    <CardBase tokens={themeTokens} dataSet={dataSet} {...rest}>
       {children}
     </CardBase>
   )

package/src/Card/CardBase.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
@@ -37,16 +37,17 @@ const selectStyles = ({
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = ({ children, tokens, ...rest }) => {
+const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
   const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
 
   return (
-    <View style={cardStyle} {...props}>
+    <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
       {children}
     </View>
   )
-}
+})
+CardBase.displayName = 'CardBase'
 
 CardBase.propTypes = {
   children: PropTypes.node,

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]),