@telus-uds/components-base 1.84.0 → 1.85.0

package/src/StackView/StackWrapBox.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 import {
@@ -47,7 +47,7 @@ const spaceSides = {
  * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
  * between the container and the stacked children, and requires a negative margin on the container.
  */
-const StackWrapBox = forwardRef(
+const StackWrapBox = React.forwardRef(
   (
     {
       space = 1,

package/src/StackView/StackWrapGap.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 
 import StackWrapBox from './StackWrapBox'
@@ -27,7 +27,7 @@ const [selectProps] = selectSystemProps([a11yProps, viewProps])
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-const StackWrapGap = forwardRef(
+const StackWrapGap = React.forwardRef(
   (
     {
       space = 1,

package/src/StackView/getStackedContent.jsx

@@ -1,4 +1,4 @@
-import React, { Children, Fragment } from 'react'
+import React from 'react'
 
 import Box from '../Box'
 import Divider from '../Divider'
@@ -39,7 +39,7 @@ const getStackedContent = (
 
   // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
   const topLevelChildren = preserveFragments ? children : unpackFragment(children)
-  const validChildren = Children.toArray(topLevelChildren).filter(Boolean)
+  const validChildren = React.Children.toArray(topLevelChildren).filter(Boolean)
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`
     const item = box ? (
@@ -109,10 +109,10 @@ const getStackedContent = (
  */
 const unpackFragment = (child) => {
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (Children.count(child) > 1) return Children.map(child, unpackFragment)
+  if (React.Children.count(child) > 1) return React.Children.map(child, unpackFragment)
 
   // When a fragment is found, unpack its children to the top level and check them
-  if (child?.type === Fragment) return unpackFragment(child.props?.children)
+  if (child?.type === React.Fragment) return unpackFragment(child.props?.children)
 
   // Stop unpacking as soon as any non-fragment child is found
   return child

package/src/StepTracker/Step.jsx

@@ -141,79 +141,87 @@ const getStepTestID = (isCompleted, isCurrent) => {
 /**
  * A single step of a StepTracker.
  */
-const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, ...rest }) => {
-  const { completedIcon, showStepLabel, showStepName, textStepTrackerLabel, ...themeTokens } =
-    tokens
-  const isFirst = stepIndex === 0
-  const isLast = stepIndex === stepCount - 1
-  const isCompleted = status > stepIndex
-  const isCurrent = status === stepIndex
-  const isActive = isCompleted || isCurrent
-  const { themeOptions } = useTheme()
+const Step = React.forwardRef(
+  ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, ...rest }, ref) => {
+    const { completedIcon, showStepLabel, showStepName, textStepTrackerLabel, ...themeTokens } =
+      tokens
+    const isFirst = stepIndex === 0
+    const isLast = stepIndex === stepCount - 1
+    const isCompleted = status > stepIndex
+    const isCurrent = status === stepIndex
+    const isActive = isCompleted || isCurrent
+    const { themeOptions } = useTheme()
 
-  return (
-    <StackView
-      space={0}
-      tokens={{ alignItems: 'stretch', flexGrow: 1 }}
-      accessibilityLabel={label}
-      accessibilityLevel={2}
-      accessibilityCurrent={status === stepIndex}
-      {...selectProps(rest)}
-    >
+    return (
       <StackView
-        direction="row"
         space={0}
-        tokens={{ alignItems: 'center', flexGrow: 0, justifyContent: 'center' }}
+        tokens={{ alignItems: 'stretch', flexGrow: 1 }}
+        accessibilityLabel={label}
+        accessibilityLevel={2}
+        accessibilityCurrent={status === stepIndex}
+        ref={ref}
+        {...selectProps(rest)}
       >
-        <View
-          style={[staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]}
-        />
-        <View
-          style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
-          testID={getStepTestID(isCompleted, isCurrent)}
+        <StackView
+          direction="row"
+          space={0}
+          tokens={{ alignItems: 'center', flexGrow: 0, justifyContent: 'center' }}
         >
-          {isCompleted && completedIcon && (
-            <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
-          )}
-          {((isCurrent && completedIcon) || (isCurrent && !completedIcon)) && (
-            <View style={selectCurrentInnerStyles(themeTokens)} />
-          )}
-        </View>
-        <View
-          style={[
-            staticStyles.connector,
-            !isLast && selectConnectorStyles(themeTokens, isCompleted)
-          ]}
-        />
+          <View
+            style={[
+              staticStyles.connector,
+              !isFirst && selectConnectorStyles(themeTokens, isActive)
+            ]}
+          />
+          <View
+            style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
+            testID={getStepTestID(isCompleted, isCurrent)}
+          >
+            {isCompleted && completedIcon && (
+              <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
+            )}
+            {((isCurrent && completedIcon) || (isCurrent && !completedIcon)) && (
+              <View style={selectCurrentInnerStyles(themeTokens)} />
+            )}
+          </View>
+          <View
+            style={[
+              staticStyles.connector,
+              !isLast && selectConnectorStyles(themeTokens, isCompleted)
+            ]}
+          />
+        </StackView>
+        {showStepLabel && (
+          <View style={[staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)]}>
+            {showStepName && (
+              <Text
+                style={[
+                  staticStyles.centeredText,
+                  selectStepLabelStyles(tokens, themeOptions, isCurrent)
+                ]}
+              >
+                {name}
+              </Text>
+            )}
+            <StackView direction="row">
+              <Text
+                style={[
+                  staticStyles.centeredText,
+                  tokens.labelDirection === 'column' && staticStyles.wrappingLabel,
+                  selectLabelStyles(tokens, themeOptions, isCurrent)
+                ]}
+              >
+                {label}
+              </Text>
+            </StackView>
+          </View>
+        )}
       </StackView>
-      {showStepLabel && (
-        <View style={[staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)]}>
-          {showStepName && (
-            <Text
-              style={[
-                staticStyles.centeredText,
-                selectStepLabelStyles(tokens, themeOptions, isCurrent)
-              ]}
-            >
-              {name}
-            </Text>
-          )}
-          <StackView direction="row">
-            <Text
-              style={[
-                staticStyles.centeredText,
-                tokens.labelDirection === 'column' && staticStyles.wrappingLabel,
-                selectLabelStyles(tokens, themeOptions, isCurrent)
-              ]}
-            >
-              {label}
-            </Text>
-          </StackView>
-        </View>
-      )}
-    </StackView>
-  )
-}
+    )
+  }
+)
+
+Step.displayName = 'Step'
 
 Step.propTypes = {
   ...selectedSystemPropTypes,

package/src/StepTracker/StepTracker.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'
 import StackView from '../StackView'
@@ -70,7 +70,7 @@ const selectStepTrackerLabelStyles = (
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = forwardRef(
+const StepTracker = React.forwardRef(
   (
     {
       current = 0,

package/src/Tabs/Tabs.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react'
+import React from 'react'
 import { Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
@@ -62,7 +62,7 @@ const getStackViewTokens = (variant) => {
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
  */
-const Tabs = forwardRef(
+const Tabs = React.forwardRef(
   (
     {
       tokens,
@@ -85,7 +85,7 @@ const Tabs = forwardRef(
     const [itemPositions, isPositioningReady] = useItemPositions()
 
     useHash(
-      useCallback(
+      React.useCallback(
         (hash, event) => {
           const hashItem = hash && items.find(({ href }) => hash === href)
           const hashId = hashItem && (hashItem.id || hashItem.label)

package/src/Tabs/TabsItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
@@ -76,7 +76,7 @@ const selectContainerStyles = ({
  *
  * This is rendered automatically by `Tabs` and isn't intended be used directly.
  */
-const TabsItem = forwardRef(
+const TabsItem = React.forwardRef(
   (
     {
       href,
@@ -127,7 +127,7 @@ const TabsItem = forwardRef(
       ...rest
     })
 
-    useEffect(() => {
+    React.useEffect(() => {
       // If this is selected while off-screen, scroll it into view
       if (selected) {
         const position = itemPositions.positions[index]

package/src/Tags/Tags.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'
 import { Platform, Text, View } from 'react-native'
@@ -74,7 +74,7 @@ const separateIconTextTokens = (
 const selectIconTextTokens = (tokens) => separateIconTextTokens(tokens, false)
 const selectNonIconTextTokens = (tokens) => separateIconTextTokens(tokens, true)
 
-const Tags = forwardRef(
+const Tags = React.forwardRef(
   (
     {
       variant,

package/src/TextInput/TextArea.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 
 import { Platform } from 'react-native'
 import {
@@ -50,9 +50,9 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-const TextArea = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
+const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   const themeTokens = useThemeTokens('TextArea', tokens, variant)
-  const [inputHeight, setInputHeight] = useState()
+  const [inputHeight, setInputHeight] = React.useState()
 
   // adjust the text area's height as new lines are added to the content
   const onHeightChange = ({

package/src/TextInput/TextInput.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import {
   a11yProps,
@@ -42,7 +42,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref) => {
+const TextInput = React.forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref) => {
   const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {

package/src/TextInput/TextInputBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
@@ -161,7 +161,7 @@ const getIcon = (cardNumber = '', { defaultCreditIcon, amexIcon, visaIcon, maste
   return <Icon icon={selectedIcon.icon} variant={{ size: 'large' }} testID={selectedIcon.testID} />
 }
 
-const TextInputBase = forwardRef(
+const TextInputBase = React.forwardRef(
   (
     {
       buttons = [],
@@ -187,8 +187,8 @@ const TextInputBase = forwardRef(
     },
     ref
   ) => {
-    const [isFocused, setIsFocused] = useState(false)
-    const [showPassword, setShowPassword] = useState(false)
+    const [isFocused, setIsFocused] = React.useState(false)
+    const [showPassword, setShowPassword] = React.useState(false)
     const handleFocus = (event) => {
       setIsFocused(true)
       if (typeof onFocus === 'function') onFocus(event)
@@ -198,7 +198,7 @@ const TextInputBase = forwardRef(
       if (typeof onBlur === 'function') onBlur(event)
     }
 
-    const [isHovered, setIsHovered] = useState(false)
+    const [isHovered, setIsHovered] = React.useState(false)
     const handleMouseOver = (event) => {
       setIsHovered(true)
       if (typeof onMouseOver === 'function') onMouseOver(event)
@@ -208,7 +208,7 @@ const TextInputBase = forwardRef(
       if (typeof onMouseOut === 'function') onMouseOut(event)
     }
 
-    const defaultRef = useRef()
+    const defaultRef = React.useRef()
     const inputRef = ref ?? defaultRef
 
     const { currentValue, resetValue, setValue, isControlled, isDirty } = useInputValue({
@@ -223,7 +223,7 @@ const TextInputBase = forwardRef(
     const isPassword = password || type === 'password'
 
     const element = inputRef?.current
-    useEffect(() => {
+    React.useEffect(() => {
       if (Platform.OS === 'web' && pattern && element) {
         // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
         // which a `pattern` user must provide anyway to call .checkValidity() on the element.

package/src/ThemeProvider/ThemeProvider.jsx

@@ -1,12 +1,12 @@
-import React, { createContext, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { validateThemeTokensVersion } from './utils'
 import responsiveProps from '../utils/props/responsiveProps'
 
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider')
 
-export const ThemeContext = createContext(uninitialisedError)
-export const ThemeSetterContext = createContext(uninitialisedError)
+export const ThemeContext = React.createContext(uninitialisedError)
+export const ThemeSetterContext = React.createContext(uninitialisedError)
 
 // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
 // This should change in future major releases to become "opt-in" legacy support.
@@ -21,9 +21,9 @@ const defaultThemeOptions = {
 }
 
 const ThemeProvider = ({ children, defaultTheme, themeOptions = {} }) => {
-  const [theme, setTheme] = useState(defaultTheme)
+  const [theme, setTheme] = React.useState(defaultTheme)
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (theme.metadata.name !== defaultTheme.metadata.name) {
       setTheme(defaultTheme)
     }

package/src/Timeline/Timeline.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 
 import { useThemeTokens } from '../ThemeProvider'
@@ -76,7 +76,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## A11y guidelines
  * Timeline link supports all the common a11y props.
  */
-const Timeline = forwardRef(
+const Timeline = React.forwardRef(
   (
     { tokens, variant = {}, children, accessibilityLabel, tag = 'ul', childrenTag = 'li', ...rest },
     ref

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
@@ -92,7 +92,7 @@ const selectLabelTokens = ({
   lineHeight: labelLineHeight
 })
 
-const ToggleSwitch = forwardRef(
+const ToggleSwitch = React.forwardRef(
   (
     {
       copy = 'en',

package/src/ToggleSwitch/ToggleSwitchGroup.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'
 import { Platform } from 'react-native'
@@ -25,7 +25,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   focusHandlerProps,
   viewProps
 ])
-const ToggleSwitchGroup = forwardRef(
+const ToggleSwitchGroup = React.forwardRef(
   (
     {
       copy = 'en',

package/src/Tooltip/Tooltip.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import propTypes from './shared'
 import { useFloating, arrow, offset, shift, flip, autoPlacement } from '../utils/floating-ui'
@@ -81,7 +81,7 @@ const defaultControl = (pressableState, variant) => (
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = forwardRef(
+const Tooltip = React.forwardRef(
   (
     {
       children,
@@ -97,10 +97,10 @@ const Tooltip = forwardRef(
     },
     ref
   ) => {
-    const [isOpen, setIsOpen] = useState(false)
-    const arrowRef = useRef()
+    const [isOpen, setIsOpen] = React.useState(false)
+    const arrowRef = React.useRef()
 
-    const [tooltipDimensions, setTooltipDimensions] = useState(null)
+    const [tooltipDimensions, setTooltipDimensions] = React.useState(null)
 
     const positions = {
       auto: undefined, // Auto needs to specifically bet set to undefined
@@ -161,7 +161,7 @@ const Tooltip = forwardRef(
       }
     }
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (!isOpen) {
         setTooltipDimensions(null)
       }

package/src/Tooltip/Tooltip.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import { Dimensions, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import propTypes from './shared'
 
@@ -107,7 +107,7 @@ const defaultControl = (pressableState, variant) => (
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = forwardRef(
+const Tooltip = React.forwardRef(
   (
     {
       children,
@@ -123,20 +123,20 @@ const Tooltip = forwardRef(
     },
     ref
   ) => {
-    const [isOpen, setIsOpen] = useState(false)
+    const [isOpen, setIsOpen] = React.useState(false)
 
-    const controlRef = useRef()
-    const [controlLayout, setControlLayout] = useState(null)
-    const [tooltipDimensions, setTooltipDimensions] = useState(null)
-    const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'))
-    const [tooltipPosition, setTooltipPosition] = useState(null)
+    const controlRef = React.useRef()
+    const [controlLayout, setControlLayout] = React.useState(null)
+    const [tooltipDimensions, setTooltipDimensions] = React.useState(null)
+    const [windowDimensions, setWindowDimensions] = React.useState(Dimensions.get('window'))
+    const [tooltipPosition, setTooltipPosition] = React.useState(null)
 
     const getCopy = useCopy({ dictionary, copy })
     const themeTokens = useThemeTokens('Tooltip', tokens, variant)
 
     const { arrowWidth, arrowOffset } = themeTokens
 
-    useEffect(() => {
+    React.useEffect(() => {
       const subscription = Dimensions.addEventListener('change', ({ window }) => {
         setWindowDimensions(window)
       })
@@ -176,7 +176,7 @@ const Tooltip = forwardRef(
       }
     }
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (isOpen) {
         controlRef.current.measureInWindow((x, y, width, height) => {
           setControlLayout({ x, y, width, height })
@@ -188,11 +188,11 @@ const Tooltip = forwardRef(
       }
     }, [isOpen])
 
-    useEffect(() => {
+    React.useEffect(() => {
       setIsOpen(false)
     }, [windowDimensions])
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (
         (tooltipPosition !== null && !tooltipPosition?.isNormalized) ||
         !isOpen ||

package/src/TooltipButton/TooltipButton.jsx

@@ -24,7 +24,7 @@ const selectIconTokens = ({ iconSize, iconColor, iconScale = 1 }) => ({
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
+const TooltipButton = React.forwardRef(({ pressableState, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState)
 
   const { icon: IconComponent } = themeTokens
@@ -39,13 +39,16 @@ const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
         staticStyles.bubblePointerEvents
       ]}
       {...selectProps(rest)}
+      ref={ref}
     >
       <View style={selectInnerContainerStyles(themeTokens)}>
         {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
       </View>
     </View>
   )
-}
+})
+
+TooltipButton.displayName = 'TooltipButton'
 
 const staticStyles = StyleSheet.create({
   bubblePointerEvents: {

package/src/Typography/Typography.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Text, View } from 'react-native'
 
@@ -55,7 +55,7 @@ const selectTextStyles = (
   })
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = forwardRef(
+const Typography = React.forwardRef(
   (
     {
       children,