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

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,

package/src/ExpandCollapse/Panel.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { forwardRef, useState } from 'react'
 import { Animated, Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -30,78 +30,84 @@ const selectContainerStyles = ({
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-const ExpandCollapsePanel = ({
-  openIds = [],
-  panelId,
-  onToggle,
-  onPress,
-  control,
-  controlTokens,
-  children,
-  tokens,
-  variant,
-  ...rest
-}) => {
-  const [containerHeight, setContainerHeight] = useState(null)
-  const isExpanded = openIds.includes(panelId)
+const ExpandCollapsePanel = forwardRef(
+  (
+    {
+      openIds = [],
+      panelId,
+      onToggle,
+      onPress,
+      control,
+      controlTokens,
+      children,
+      tokens,
+      variant,
+      ...rest
+    },
+    ref
+  ) => {
+    const [containerHeight, setContainerHeight] = useState(null)
+    const isExpanded = openIds.includes(panelId)
 
-  const a11y = a11yProps.select(rest)
-  a11y.accessibilityState = {
-    ...(a11y.accessibilityState || {}),
-    expanded: isExpanded
-  }
+    const a11y = a11yProps.select(rest)
+    a11y.accessibilityState = {
+      ...(a11y.accessibilityState || {}),
+      expanded: isExpanded
+    }
 
-  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
-    expanded: isExpanded
-  })
+    const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
+      expanded: isExpanded
+    })
 
-  const handleControlPress = () => {
-    onToggle(panelId)
-    if (onPress) onPress(panelId)
-  }
+    const handleControlPress = (event) => {
+      onToggle(panelId, event)
+      if (onPress) onPress(panelId, event)
+    }
 
-  const onContainerLayout = (event) => {
-    if (containerHeight === null) {
-      const { layout: { height = 0 } = {} } = event.nativeEvent
-      setContainerHeight(height)
+    const onContainerLayout = (event) => {
+      if (containerHeight === null) {
+        const { layout: { height = 0 } = {} } = event.nativeEvent
+        setContainerHeight(height)
+      }
     }
-  }
-  const animatedStyles = useVerticalExpandAnimation({
-    containerHeight,
-    isExpanded,
-    tokens: themeTokens
-  })
+    const animatedStyles = useVerticalExpandAnimation({
+      containerHeight,
+      isExpanded,
+      tokens: themeTokens
+    })
 
-  // on web we can hide the contents until we have the container measured and avoid occasional jitter
-  // this won't work on native platforms
-  const overflowContainerStyles =
-    containerHeight === null && Platform.OS === 'web'
-      ? { height: 0, visibility: 'hidden' }
-      : undefined
+    // on web we can hide the contents until we have the container measured and avoid occasional jitter
+    // this won't work on native platforms
+    const overflowContainerStyles =
+      containerHeight === null && Platform.OS === 'web'
+        ? { height: 0, visibility: 'hidden' }
+        : undefined
 
-  const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps
+    const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps
 
-  return (
-    <View style={selectGroupStyles(themeTokens)}>
-      <ExpandCollapseControl
-        {...a11y}
-        isExpanded={isExpanded}
-        tokens={controlTokens}
-        onPress={handleControlPress}
-      >
-        {control}
-      </ExpandCollapseControl>
-      <View style={overflowContainerStyles} {...focusabilityProps}>
-        <Animated.View
-          onLayout={onContainerLayout}
-          style={[staticStyles.itemsContainer, animatedStyles]}
+    return (
+      <View ref={ref} style={selectGroupStyles(themeTokens)}>
+        <ExpandCollapseControl
+          {...a11y}
+          isExpanded={isExpanded}
+          tokens={controlTokens}
+          onPress={handleControlPress}
         >
-          <View style={selectContainerStyles(themeTokens)}>{children}</View>
-        </Animated.View>
+          {control}
+        </ExpandCollapseControl>
+        <View style={overflowContainerStyles} {...focusabilityProps}>
+          <Animated.View
+            onLayout={onContainerLayout}
+            style={[staticStyles.itemsContainer, animatedStyles]}
+          >
+            <View style={selectContainerStyles(themeTokens)}>{children}</View>
+          </Animated.View>
+        </View>
       </View>
-    </View>
-  )
-}
+    )
+  }
+)
+ExpandCollapsePanel.displayName = 'ExpandCollapsePanel'
 
 ExpandCollapsePanel.propTypes = {
   variant: variantProp.propType,

package/src/Feedback/Feedback.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -40,43 +40,46 @@ const selectIconContainerStyles = ({ iconGap }) => ({
  * ### Accessibility
  * All accessibility props set on this component will be applied to the outer container.
  */
-const Feedback = ({ title, children, id, validation, tokens, variant, ...rest }) => {
-  const themeTokens = useThemeTokens('Feedback', tokens, { ...variant, validation })
-  const { space } = themeTokens
+const Feedback = forwardRef(
+  ({ title, children, id, validation, tokens, variant, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('Feedback', tokens, { ...variant, validation })
+    const { space } = themeTokens
 
-  const { icon: IconComponent } = themeTokens
+    const { icon: IconComponent } = themeTokens
 
-  const titleTextStyles = selectTitleTextStyles(themeTokens)
-  const contentTextStyles = selectContentTextStyles(themeTokens)
+    const titleTextStyles = selectTitleTextStyles(themeTokens)
+    const contentTextStyles = selectContentTextStyles(themeTokens)
 
-  const content =
-    typeof children === 'string' ? <Text style={contentTextStyles}>{children}</Text> : children
+    const content =
+      typeof children === 'string' ? <Text style={contentTextStyles}>{children}</Text> : children
 
-  const accessibilityProps = a11yProps.select({
-    accessibilityRole: validation === 'error' ? 'alert' : undefined,
-    ...rest
-  })
+    const accessibilityProps = a11yProps.select({
+      accessibilityRole: validation === 'error' ? 'alert' : undefined,
+      ...rest
+    })
 
-  return (
-    <View style={selectStyles(themeTokens)} {...accessibilityProps} nativeID={id}>
-      <StackView space={space}>
-        {title !== undefined && (
-          <View style={staticStyles.title}>
-            {IconComponent && (
-              <View style={selectIconContainerStyles(themeTokens)}>
-                <IconComponent {...selectIconTokens(themeTokens)} />
-              </View>
-            )}
-            <Text style={titleTextStyles}>{title}</Text>
-          </View>
-        )}
-        {content && typeof content === 'function'
-          ? content({ textStyles: contentTextStyles, variant })
-          : content}
-      </StackView>
-    </View>
-  )
-}
+    return (
+      <View ref={ref} style={selectStyles(themeTokens)} {...accessibilityProps} nativeID={id}>
+        <StackView space={space}>
+          {title !== undefined && (
+            <View style={staticStyles.title}>
+              {IconComponent && (
+                <View style={selectIconContainerStyles(themeTokens)}>
+                  <IconComponent {...selectIconTokens(themeTokens)} />
+                </View>
+              )}
+              <Text style={titleTextStyles}>{title}</Text>
+            </View>
+          )}
+          {content && typeof content === 'function'
+            ? content({ textStyles: contentTextStyles, variant })
+            : content}
+        </StackView>
+      </View>
+    )
+  }
+)
+Feedback.displayName = 'Feedback'
 
 Feedback.propTypes = {
   /**

package/src/Fieldset/Fieldset.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import Feedback from '../Feedback'
@@ -15,64 +15,71 @@ import Legend from './Legend'
  *
  * Follows the same theming and most of the same props as InputSupports.
  */
-const Fieldset = ({
-  space,
-  feedback,
-  feedbackPosition = 'top',
-  validation,
-  legend,
-  hint,
-  hintPosition,
-  tooltip,
-  inactive,
-  accessibilityRole,
-  name: fieldsetName,
-  children
-}) => {
-  // Skips `inputId` because a fieldset' legend describes multiple inputs
-  const { hintId, feedbackId, a11yProps } = useInputSupports({
-    feedback,
-    hint,
-    label: legend,
-    validation
-  })
+const Fieldset = forwardRef(
+  (
+    {
+      space,
+      feedback,
+      feedbackPosition = 'top',
+      validation,
+      legend,
+      hint,
+      hintPosition,
+      tooltip,
+      inactive,
+      accessibilityRole,
+      name: fieldsetName,
+      children
+    },
+    ref
+  ) => {
+    // Skips `inputId` because a fieldset' legend describes multiple inputs
+    const { hintId, feedbackId, a11yProps } = useInputSupports({
+      feedback,
+      hint,
+      label: legend,
+      validation
+    })
 
-  const legendContent = legend && (
-    <Legend>
-      <InputLabel
-        label={legend}
-        hint={hint}
-        hintPosition={hintPosition}
-        hintId={hintId}
-        tooltip={tooltip}
-      />
-    </Legend>
-  )
-  const feedbackContent = feedback && (
-    <Feedback id={feedbackId} title={feedback} validation={validation} />
-  )
+    const legendContent = legend && (
+      <Legend>
+        <InputLabel
+          label={legend}
+          hint={hint}
+          hintPosition={hintPosition}
+          hintId={hintId}
+          tooltip={tooltip}
+        />
+      </Legend>
+    )
+    const feedbackContent = feedback && (
+      <Feedback id={feedbackId} title={feedback} validation={validation} />
+    )
 
-  // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
-  // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
-  // fieldset as much as possible, but also allow different spacing within content and between
-  // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
-  const childContent = <>{typeof children === 'function' ? children({ a11yProps }) : children}</>
-  const orderedContent =
-    feedbackPosition === 'bottom'
-      ? [legendContent, feedbackContent, childContent]
-      : [legendContent, childContent, feedbackContent]
-  const stackedContent = getStackedContent(orderedContent, { space, preserveFragments: true })
+    // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
+    // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
+    // fieldset as much as possible, but also allow different spacing within content and between
+    // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
+    const childContent = <>{typeof children === 'function' ? children({ a11yProps }) : children}</>
+    const orderedContent =
+      feedbackPosition === 'bottom'
+        ? [legendContent, feedbackContent, childContent]
+        : [legendContent, childContent, feedbackContent]
+    const stackedContent = getStackedContent(orderedContent, { space, preserveFragments: true })
 
-  return (
-    <FieldsetContainer
-      inactive={inactive}
-      accessibilityRole={accessibilityRole}
-      name={fieldsetName}
-    >
-      {stackedContent}
-    </FieldsetContainer>
-  )
-}
+    return (
+      <FieldsetContainer
+        ref={ref}
+        inactive={inactive}
+        accessibilityRole={accessibilityRole}
+        name={fieldsetName}
+      >
+        {stackedContent}
+      </FieldsetContainer>
+    )
+  }
+)
+Fieldset.displayName = 'Fieldset'
 
 Fieldset.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

package/src/Fieldset/FieldsetContainer.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import cssReset from './cssReset'
@@ -6,11 +6,20 @@ import cssReset from './cssReset'
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-const FieldsetContainer = ({ children, inactive, accessibilityRole, name: fieldsetName }) => (
-  <fieldset disabled={inactive} style={cssReset} role={accessibilityRole} name={fieldsetName}>
-    {children}
-  </fieldset>
+const FieldsetContainer = forwardRef(
+  ({ children, inactive, accessibilityRole, name: fieldsetName }, ref) => (
+    <fieldset
+      ref={ref}
+      disabled={inactive}
+      style={cssReset}
+      role={accessibilityRole}
+      name={fieldsetName}
+    >
+      {children}
+    </fieldset>
+  )
 )
+FieldsetContainer.displayName = 'FieldsetContainer'
 
 FieldsetContainer.propTypes = {
   accessibilityRole: PropTypes.string,

package/src/Fieldset/FieldsetContainer.native.jsx

@@ -1,12 +1,15 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = ({ children, accessibilityRole }) => (
-  <View accessibilityRole={accessibilityRole}>{children}</View>
-)
+const FieldsetContainer = forwardRef(({ children, accessibilityRole }, ref) => (
+  <View ref={ref} accessibilityRole={accessibilityRole}>
+    {children}
+  </View>
+))
+FieldsetContainer.displayName = 'FieldsetContainer'
 
 FieldsetContainer.propTypes = {
   children: PropTypes.node,

package/src/Fieldset/Legend.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import cssReset from './cssReset'
@@ -7,7 +7,12 @@ import cssReset from './cssReset'
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
-const Legend = ({ children }) => <legend style={cssReset}>{children}</legend>
+const Legend = forwardRef(({ children }, ref) => (
+  <legend ref={ref} style={cssReset}>
+    {children}
+  </legend>
+))
+Legend.displayName = 'Legend'
 
 Legend.propTypes = {
   children: PropTypes.node

package/src/Fieldset/Legend.native.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -6,7 +6,12 @@ import PropTypes from 'prop-types'
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
-const Legend = ({ children }) => <View style={staticStyles.stretch}>{children}</View>
+const Legend = forwardRef(({ children }, ref) => (
+  <View ref={ref} style={staticStyles.stretch}>
+    {children}
+  </View>
+))
+Legend.displayName = 'Legend'
 
 Legend.propTypes = {
   children: PropTypes.node