@telus-uds/components-base 1.83.0 → 1.85.0

package/src/FlexGrid/Col/Col.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useContext } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
 
@@ -8,7 +8,7 @@ import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '.
 import { useViewport } from '../../ViewportProvider'
 import { useTheme } from '../../ThemeProvider'
 
-const Col = forwardRef(
+const Col = React.forwardRef(
   (
     {
       horizontalAlign,
@@ -28,7 +28,7 @@ const Col = forwardRef(
     },
     ref
   ) => {
-    const gutter = useContext(GutterContext)
+    const gutter = React.useContext(GutterContext)
     const viewport = useViewport()
     const {
       themeOptions: { enableMediaQueryStyleSheet }

package/src/FlexGrid/FlexGrid.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { viewports } from '@telus-uds/system-constants'
@@ -25,7 +25,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = forwardRef(
+const FlexGrid = React.forwardRef(
   (
     {
       limitWidth = true,

package/src/FlexGrid/Row/Row.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import applyInheritance from '../helpers'
@@ -52,7 +52,7 @@ const distributeStyles = (distribute) => {
   }
 }
 
-const Row = forwardRef(
+const Row = React.forwardRef(
   (
     {
       horizontalAlign,

package/src/Footnote/Footnote.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import {
   StyleSheet,
@@ -123,117 +123,130 @@ const selectCustomContentFontStyle = ({
  * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
  * - When `Footnote` is closed, focus must return to the initiating element
  */
-const Footnote = ({
-  copy = 'en',
-  number = undefined,
-  content = undefined,
-  onClose,
-  isOpen = false,
-  tokens,
-  variant = {},
-  dictionary = defaultDictionary,
-  ...rest
-}) => {
-  const viewport = useViewport()
+const Footnote = React.forwardRef(
+  (
+    {
+      copy = 'en',
+      number = undefined,
+      content = undefined,
+      onClose,
+      isOpen = false,
+      tokens,
+      variant = {},
+      dictionary = defaultDictionary,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
 
-  const themeTokens = useThemeTokens('Footnote', tokens, variant, { viewport })
-  const themeOptions = useTheme()
+    const themeTokens = useThemeTokens('Footnote', tokens, variant, { viewport })
+    const themeOptions = useTheme()
 
-  const getCopy = useCopy({ dictionary, copy })
+    const getCopy = useCopy({ dictionary, copy })
 
-  const [isVisible, setIsVisible] = useState(false)
+    const [isVisible, setIsVisible] = React.useState(false)
 
-  const screenHeight = Dimensions.get('screen').height
-  const screenWidth = Dimensions.get('screen').width
+    const screenHeight = Dimensions.get('screen').height
+    const screenWidth = Dimensions.get('screen').width
 
-  const getFootnoteBodyContent = useCallback(() => {
-    if (!number || !content) {
-      return null
-    }
+    const getFootnoteBodyContent = React.useCallback(() => {
+      if (!number || !content) {
+        return null
+      }
 
-    if (React.isValidElement(content)) {
-      return <View style={selectCustomContentFontStyle(themeTokens)}>{content}</View>
-    }
+      if (React.isValidElement(content)) {
+        return <View style={selectCustomContentFontStyle(themeTokens)}>{content}</View>
+      }
 
-    return (
-      <OrderedList start={number}>
-        <OrderedList.Item key={number}>
-          <Text style={selectCustomContentFontStyle(themeTokens)}>{content}</Text>
-        </OrderedList.Item>
-      </OrderedList>
-    )
-  }, [content, number, themeTokens])
+      return (
+        <OrderedList start={number}>
+          <OrderedList.Item key={number}>
+            <Text style={selectCustomContentFontStyle(themeTokens)}>{content}</Text>
+          </OrderedList.Item>
+        </OrderedList>
+      )
+    }, [content, number, themeTokens])
 
-  useEffect(() => {
-    if (isOpen) {
-      setIsVisible(true)
-    }
-  }, [isOpen])
+    React.useEffect(() => {
+      if (isOpen) {
+        setIsVisible(true)
+      }
+    }, [isOpen])
 
-  const closeFootnote = useCallback(
-    (event, options) => {
-      onClose(event, options)
-      setIsVisible(false)
-    },
-    [onClose]
-  )
+    const closeFootnote = React.useCallback(
+      (event, options) => {
+        onClose(event, options)
+        setIsVisible(false)
+      },
+      [onClose]
+    )
 
-  const handleClose = (event) => closeFootnote(event, { returnFocus: true })
+    const handleClose = (event) => closeFootnote(event, { returnFocus: true })
 
-  return (
-    <View {...selectProps(rest)}>
-      <Modal visible={isVisible} animationType="slide">
-        <SafeAreaView style={staticStyles.container}>
-          <ScrollView
-            style={selectFootnoteStyle({
-              screenHeight,
-              isVisible,
-              ...themeTokens
-            })}
-          >
-            <View style={staticStyles.content}>
-              <View
-                style={[selectFootnoteHeaderContentStyle(themeTokens), staticStyles.headerContent]}
-              >
-                <Typography
-                  tokens={{
-                    fontSize: themeTokens?.headerFontSize,
-                    lineHeight: themeTokens?.headerLineHeight
-                  }}
-                  variant={{ size: 'h4' }}
-                >
-                  {getCopy('heading')}
-                </Typography>
-                <TouchableWithoutFeedback
-                  onPress={handleClose}
-                  accessibilityLabel={getCopy('close')}
+    return (
+      <View {...selectProps(rest)} ref={ref}>
+        <Modal visible={isVisible} animationType="slide">
+          <SafeAreaView style={staticStyles.container}>
+            <ScrollView
+              style={selectFootnoteStyle({
+                screenHeight,
+                isVisible,
+                ...themeTokens
+              })}
+            >
+              <View style={staticStyles.content}>
+                <View
+                  style={[
+                    selectFootnoteHeaderContentStyle(themeTokens),
+                    staticStyles.headerContent
+                  ]}
                 >
-                  <View
-                    style={[selectFootnoteCloseButtonStyle(themeTokens), staticStyles.closeButton]}
+                  <Typography
+                    tokens={{
+                      fontSize: themeTokens?.headerFontSize,
+                      lineHeight: themeTokens?.headerLineHeight
+                    }}
+                    variant={{ size: 'h4' }}
                   >
-                    <Icon
-                      icon={themeTokens?.closeIcon}
-                      tokens={{ size: themeTokens?.closeButtonIconSize }}
-                    />
-                  </View>
-                </TouchableWithoutFeedback>
-              </View>
-              <View
-                style={selectFootnoteBodyStyle({
-                  maxWidth: themeOptions.contentMaxWidth,
-                  screenWidth,
-                  ...themeTokens
-                })}
-              >
-                {getFootnoteBodyContent()}
+                    {getCopy('heading')}
+                  </Typography>
+                  <TouchableWithoutFeedback
+                    onPress={handleClose}
+                    accessibilityLabel={getCopy('close')}
+                  >
+                    <View
+                      style={[
+                        selectFootnoteCloseButtonStyle(themeTokens),
+                        staticStyles.closeButton
+                      ]}
+                    >
+                      <Icon
+                        icon={themeTokens?.closeIcon}
+                        tokens={{ size: themeTokens?.closeButtonIconSize }}
+                      />
+                    </View>
+                  </TouchableWithoutFeedback>
+                </View>
+                <View
+                  style={selectFootnoteBodyStyle({
+                    maxWidth: themeOptions.contentMaxWidth,
+                    screenWidth,
+                    ...themeTokens
+                  })}
+                >
+                  {getFootnoteBodyContent()}
+                </View>
               </View>
-            </View>
-          </ScrollView>
-        </SafeAreaView>
-      </Modal>
-    </View>
-  )
-}
+            </ScrollView>
+          </SafeAreaView>
+        </Modal>
+      </View>
+    )
+  }
+)
+
+Footnote.displayName = 'Footnote'
 
 const copyShape = PropTypes.shape({
   close: PropTypes.string.isRequired,

package/src/Footnote/FootnoteLink.jsx

@@ -31,41 +31,45 @@ const selectTextStyle = ({ fontSize, lineHeight }) => ({
   })
 })
 
-const FootnoteLink = ({ copy = 'en', content = [], onClick, tokens, variant = {}, ...rest }) => {
-  const themeTokens = useThemeTokens('FootnoteLink', tokens, variant)
-  const textStyles = applyTextStyles(themeTokens)
+const FootnoteLink = React.forwardRef(
+  ({ copy = 'en', content = [], onClick, tokens, variant = {}, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('FootnoteLink', tokens, variant)
+    const textStyles = applyTextStyles(themeTokens)
 
-  const numbers = Array.isArray(content) ? content : [content]
-  const refs = numbers.map(() => React.createRef())
+    const numbers = Array.isArray(content) ? content : [content]
+    const refs = numbers.map(() => React.createRef())
 
-  const handleOnClick = (index) => {
-    onClick(numbers[index], refs[index])
+    const handleOnClick = (index) => {
+      onClick(numbers[index], refs[index])
+    }
+    const getCopy = useCopy({ dictionary, copy })
+
+    return (
+      <View ref={ref}>
+        {numbers.map((num, index) => (
+          <View
+            accessibilityLabel={getCopy('a11yLabel')}
+            key={num}
+            ref={refs[index]}
+            {...selectProps(rest)}
+          >
+            <TouchableWithoutFeedback onPress={handleOnClick} accessibilityRole="button">
+              {wrapStringsInText(`${num}${index !== numbers.length - 1 ? ',' : ''}`, {
+                style: {
+                  ...textStyles,
+                  ...staticStyles.text,
+                  ...selectTextStyle(themeTokens)
+                }
+              })}
+            </TouchableWithoutFeedback>
+          </View>
+        ))}
+      </View>
+    )
   }
-  const getCopy = useCopy({ dictionary, copy })
+)
 
-  return (
-    <>
-      {numbers.map((num, index) => (
-        <View
-          accessibilityLabel={getCopy('a11yLabel')}
-          key={num}
-          ref={refs[index]}
-          {...selectProps(rest)}
-        >
-          <TouchableWithoutFeedback onPress={handleOnClick} accessibilityRole="button">
-            {wrapStringsInText(`${num}${index !== numbers.length - 1 ? ',' : ''}`, {
-              style: {
-                ...textStyles,
-                ...staticStyles.text,
-                ...selectTextStyle(themeTokens)
-              }
-            })}
-          </TouchableWithoutFeedback>
-        </View>
-      ))}
-    </>
-  )
-}
+FootnoteLink.displayName = 'FootnoteLink'
 
 const copyShape = PropTypes.shape({ a11yLabel: PropTypes.string.isRequired })
 

package/src/HorizontalScroll/HorizontalScroll.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, View } from 'react-native'
 
@@ -32,7 +32,7 @@ export const selectHorizontalScrollTokens = (themeTokens, prefix) =>
  *
  * @TODO revisit `ScrollButton` after IconButton is stable.
  */
-const HorizontalScroll = forwardRef(
+const HorizontalScroll = React.forwardRef(
   ({ ScrollButton, tokens, itemPositions, children, ...rest }, ref) => {
     const {
       nextIcon,
@@ -48,8 +48,8 @@ const HorizontalScroll = forwardRef(
       'HorizontalScroll'
     )
 
-    const [containerWidth, setContainerWidth] = useState(0)
-    const [contentWidth, setContentWidth] = useState(0)
+    const [containerWidth, setContainerWidth] = React.useState(0)
+    const [contentWidth, setContentWidth] = React.useState(0)
     const handleContentWidth = (width) => setContentWidth(width)
     const handleContainerLayout = ({
       nativeEvent: {
@@ -59,7 +59,7 @@ const HorizontalScroll = forwardRef(
 
     // Update the scroll position only when scrolling actions ends to minimally rerender
     // and update which buttons are conditionally rendered.
-    const [scrollOffset, setScrollOffset] = useState(0)
+    const [scrollOffset, setScrollOffset] = React.useState(0)
     const handleScrollEnd = ({
       nativeEvent: {
         contentOffset: { x }
@@ -72,7 +72,7 @@ const HorizontalScroll = forwardRef(
     const showNextButton = scrollOffset < scrollMax
     const showPreviousButton = scrollOffset > 0
 
-    const scrollRef = useRef(null)
+    const scrollRef = React.useRef(null)
     const scrollTo = (targetX) => {
       if (typeof scrollRef.current?.scrollTo === 'function') {
         const x = getItemPositionScrollTarget(
@@ -102,8 +102,8 @@ const HorizontalScroll = forwardRef(
     /* eslint-disable-next-line no-param-reassign */
     itemPositions.scrollOffset = scrollOffset
 
-    const hasWidths = itemPositions.contentWidth > 0 && itemPositions.contentWidth > 0
-    useEffect(() => {
+    const hasWidths = itemPositions.contentWidth > 0
+    React.useEffect(() => {
       if (hasWidths) itemPositions.setIsReady(true)
       // itemPositions is a ref object so this should occur only when elements' widths are set in state
     }, [hasWidths, itemPositions])

package/src/HorizontalScroll/HorizontalScrollButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils'
@@ -18,7 +18,7 @@ const selectContainerStyles = ({ offset }) => ({
  *
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
-const HorizontalScrollButton = forwardRef(
+const HorizontalScrollButton = React.forwardRef(
   ({ direction = 'next', icon, offset, onPress, variant, tokens, copy }, ref) => {
     const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant)
     const getCopy = useCopy({ dictionary, copy })

package/src/HorizontalScroll/ScrollViewEnd.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { ScrollView } from 'react-native'
 import debounce from 'lodash.debounce'
@@ -12,11 +12,11 @@ const DEBOUNCE_MS = 100
  * so we need to work around it with debouncing on `onScroll`. See:
  * https://github.com/necolas/react-native-web/issues/1021
  */
-const ScrollViewEnd = forwardRef(({ onScrollEnd, onScroll, ...props }, ref) => {
+const ScrollViewEnd = React.forwardRef(({ onScrollEnd, onScroll = null, ...props }, ref) => {
   // Return debounced function directly from useCallback so it has .cancel method etc.
   // Linter complains this stops it automatically scanning the deps, but we can check them manually.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceScrollEnd = useCallback(
+  const debounceScrollEnd = React.useCallback(
     debounce((event) => onScrollEnd(event), DEBOUNCE_MS),
     [onScrollEnd]
   )
@@ -28,7 +28,7 @@ const ScrollViewEnd = forwardRef(({ onScrollEnd, onScroll, ...props }, ref) => {
   }
 
   // Cancel any lingering debounce timeouts on dismount
-  useEffect(() => debounceScrollEnd.cancel)
+  React.useEffect(() => debounceScrollEnd.cancel)
 
   return (
     <ScrollView
@@ -46,8 +46,4 @@ ScrollViewEnd.propTypes = {
   onScroll: PropTypes.func
 }
 
-ScrollViewEnd.defaultProps = {
-  onScroll: null
-}
-
 export default ScrollViewEnd

package/src/HorizontalScroll/ScrollViewEnd.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { ScrollView } from 'react-native'
 
@@ -7,7 +7,7 @@ import { ScrollView } from 'react-native'
  *
  * React Native has two scroll end handlers, we want to treat them both the same.
  */
-const ScrollViewEnd = forwardRef(({ onScrollEnd, ...props }, ref) => (
+const ScrollViewEnd = React.forwardRef(({ onScrollEnd, ...props }, ref) => (
   <ScrollView
     ref={ref}
     {...props}

package/src/Icon/Icon.jsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Platform, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, scaleWithText, variantProp } from '../utils'
 
-const Icon = forwardRef(
+const Icon = React.forwardRef(
   (
     {
       icon: IconComponent,

package/src/Icon/IconText.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, View } from 'react-native'
 
@@ -14,7 +14,7 @@ import { spacingProps } from '../utils'
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
  */
-const IconText = forwardRef(
+const IconText = React.forwardRef(
   ({ space, iconPosition = 'left', icon: IconComponent, iconProps, children }, ref) => {
     const iconContent = IconComponent && (
       <Icon ref={ref} icon={IconComponent} scalesWithText {...iconProps} />
@@ -31,8 +31,10 @@ const IconText = forwardRef(
      */
     const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0
 
-    const iconAdjustedAndriod = (
-      <View style={{ transform: [{ translateY: size * 0.2 }] }}>{iconContent}</View>
+    const iconAdjustedAndroid = (
+      <View style={{ transform: [{ translateY: valueTranslateY ? size * 0.2 : size * 0.01 }] }}>
+        {iconContent}
+      </View>
     )
 
     const iconAdjustedIOS = (
@@ -41,7 +43,7 @@ const IconText = forwardRef(
       </View>
     )
 
-    const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS
+    const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS
     const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile
 
     return getStackedContent(

package/src/IconButton/IconButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform, StyleSheet, View } from 'react-native'
 
@@ -126,7 +126,7 @@ const selectInnerStyle = (
  * 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 IconButton = forwardRef(
+const IconButton = React.forwardRef(
   (
     {
       tokens,

package/src/InputLabel/InputLabel.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -35,7 +35,7 @@ const selectHintStyles = (
 
 const selectGapStyles = ({ gap }) => ({ marginRight: gap })
 
-const InputLabel = forwardRef(
+const InputLabel = React.forwardRef(
   (
     {
       copy = 'en',

package/src/InputLabel/LabelContent.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
-const LabelContent = forwardRef(({ children, forId }, ref) => (
+const LabelContent = React.forwardRef(({ children, forId }, ref) => (
   <label ref={ref} htmlFor={forId} style={staticStyles.inheritCursor}>
     {children}
   </label>

package/src/InputLabel/LabelContent.native.jsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-const LabelContent = forwardRef(({ children }, ref) =>
+const LabelContent = React.forwardRef(({ children }, ref) =>
   ref ? <View ref={ref}>{children}</View> : children
 )
 LabelContent.displayName = 'LabelContent'

package/src/InputSupports/InputSupports.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import PropTypes from 'prop-types'
 import InputLabel from '../InputLabel'
@@ -6,8 +6,9 @@ import Feedback from '../Feedback'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
 import useInputSupports from './useInputSupports'
+import { getTokensPropType } from '../utils'
 
-const InputSupports = forwardRef(
+const InputSupports = React.forwardRef(
   (
     {
       children,
@@ -87,7 +88,7 @@ InputSupports.propTypes = {
   /**
    * Additional tokens to override the default feedback tokens.
    */
-  feedbackTokens: PropTypes.objectOf(PropTypes.string),
+  feedbackTokens: getTokensPropType('Feedback'),
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/src/Link/ChevronLink.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
@@ -11,7 +11,7 @@ import LinkBase from './LinkBase'
  *
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
-const ChevronLink = forwardRef(
+const ChevronLink = React.forwardRef(
   ({ direction = 'right', children, tokens = {}, variant, dataSet, ...otherlinkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {