@telus-uds/components-base 1.84.0 → 1.85.0

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -4,7 +4,7 @@ import StepTracker from '../../StepTracker'
 import StackView from '../../StackView'
 import { variantProp } from '../../utils'
 
-const CarouselStepTracker = ({ variant }) => {
+const CarouselStepTracker = React.forwardRef(({ variant }, ref) => {
   const {
     activeIndex,
     totalItems,
@@ -27,7 +27,7 @@ const CarouselStepTracker = ({ variant }) => {
 
   const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
   return (
-    <StackView direction="row" tokens={stackViewTokens}>
+    <StackView direction="row" tokens={stackViewTokens} ref={ref}>
       <StepTracker
         current={activeIndex}
         steps={steps}
@@ -41,7 +41,9 @@ const CarouselStepTracker = ({ variant }) => {
       />
     </StackView>
   )
-}
+})
+
+CarouselStepTracker.displayName = 'CarouselStepTracker'
 
 CarouselStepTracker.propTypes = {
   variant: variantProp.propType

package/src/Carousel/CarouselTabs/CarouselTabs.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useResponsiveProp } from '../../utils'
@@ -7,7 +7,7 @@ import Carousel from '../Carousel'
 /**
  * @deprecated Please use Carousel and pass the `tabs` prop.
  */
-const CarouselTabs = forwardRef(({ items, refocus = true, ...carouselProps }, ref) => {
+const CarouselTabs = React.forwardRef(({ items, refocus = true, ...carouselProps }, ref) => {
   const tabs = useResponsiveProp({ md: items })
 
   return (

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -11,16 +11,16 @@ const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 })
 
-const CarouselTabsPanel = forwardRef(({ items }, ref) => {
+const CarouselTabsPanel = React.forwardRef(({ items }, ref) => {
   const { activeIndex, goTo } = useCarousel()
-  const nextFocusRef = useRef()
-  const firstTabRef = useRef()
-  const [isInverse, setIsInverse] = useState(false)
+  const nextFocusRef = React.useRef()
+  const firstTabRef = React.useRef()
+  const [isInverse, setIsInverse] = React.useState(false)
 
   const lastTabSelected = activeIndex === items.length - 1
 
   // Get current select tab style
-  useEffect(() => {
+  React.useEffect(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex)
     setIsInverse(selectedVariantIsInverse?.inverse)
   }, [items, activeIndex])

package/src/Carousel/CarouselTabs/CarouselTabsPanelItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Text, Platform } from 'react-native'
 
@@ -64,12 +64,12 @@ const selectTextStyles = ({
     color
   })
 
-const CarouselTabsPanelItem = forwardRef(
+const CarouselTabsPanelItem = React.forwardRef(
   ({ title, selected, inactive, variant, tokens, accessibilityRole = 'tab', ...rest }, ref) => {
     // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
     // Don't allow disabled to be set while focus is true else focus state gets locked `true`
     // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
-    const [isFocused, setIsFocused] = useState(false)
+    const [isFocused, setIsFocused] = React.useState(false)
     const disabled = (inactive || selected) && !isFocused
 
     const getTokens = useThemeTokensCallback('CarouselTabsPanelItem', tokens, variant)

package/src/Carousel/CarouselThumbnail.jsx

@@ -17,7 +17,7 @@ const selectPressableTokens = ({ borderColor, borderRadius, borderWidth, margin,
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
+const CarouselThumbnail = React.forwardRef(({ accessibilityLabel, alt, index, src }, ref) => {
   const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo } = useCarousel()
   const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail')
   const viewport = useViewport()
@@ -70,6 +70,7 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
           index === activeIndex ? [styles.selected, { outline: 'none' }] : styles.nonSelected
         ]
       }}
+      ref={ref}
     >
       <Image
         accessibilityIgnoresInvertColors
@@ -80,7 +81,10 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
       />
     </Pressable>
   )
-}
+})
+
+CarouselThumbnail.displayName = 'CarouselThumbnail'
+
 CarouselThumbnail.propTypes = {
   accessibilityLabel: PropTypes.string,
   alt: PropTypes.string,

package/src/Carousel/CarouselThumbnailNavigation.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 { useCarousel } from './CarouselContext'
@@ -7,7 +7,7 @@ import { StackWrap } from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 
-const CarouselThumbnailNavigation = forwardRef(({ thumbnails = [] }, ref) => {
+const CarouselThumbnailNavigation = React.forwardRef(({ thumbnails = [] }, ref) => {
   const viewport = useViewport()
   const { alignItems } = useThemeTokens('CarouselThumbnail', {}, { viewport })
   const { totalItems } = useCarousel()

package/src/Checkbox/Checkbox.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
@@ -122,7 +122,7 @@ const selectFeedbackTokens = ({ feedbackMarginBottom, feedbackMarginTop, feedbac
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = forwardRef(
+const Checkbox = React.forwardRef(
   (
     {
       checked,

package/src/Checkbox/CheckboxButton.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'
 
@@ -75,7 +75,7 @@ export const selectCheckboxTokens = (themeTokens, prefix) =>
  * The visual toggle of a checkbox input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with. Used in CheckboxCard
  */
-const CheckboxButton = forwardRef(
+const CheckboxButton = React.forwardRef(
   (
     {
       isChecked,
@@ -92,11 +92,9 @@ const CheckboxButton = forwardRef(
     },
     ref
   ) => {
-    const { icon: IconComponent, ...stateTokens } = useThemeTokens(
-      'Checkbox',
-      {},
-      { checked: isChecked }
-    )
+    const { icon: IconComponent, ...stateTokens } = useThemeTokens('Checkbox', tokens, {
+      checked: isChecked
+    })
     const iconTokens = selectIconTokens(stateTokens)
 
     return (

package/src/Checkbox/CheckboxGroup.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'
 
@@ -72,7 +72,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * />
  * ```
  */
-const CheckboxGroup = forwardRef(
+const CheckboxGroup = React.forwardRef(
   (
     {
       tokens,

package/src/Checkbox/CheckboxInput.jsx

@@ -1,11 +1,23 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 /**
  * On Web we need to include an actual input but hide it.
  */
-const CheckboxInput = forwardRef(
-  ({ checked, defaultChecked, disabled, id, isControlled, name, onChange, value }, ref) => {
+const CheckboxInput = React.forwardRef(
+  (
+    {
+      checked,
+      defaultChecked,
+      disabled = false,
+      id,
+      isControlled,
+      name,
+      onChange = () => {},
+      value
+    },
+    ref
+  ) => {
     const handleClick = (event) => {
       // Cancel the click dispatched via the label tag, since it's already wrapped
       // in <Pressable>
@@ -43,13 +55,4 @@ CheckboxInput.propTypes = {
   value: PropTypes.string
 }
 
-CheckboxInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-}
-
 export default CheckboxInput

package/src/CheckboxCard/CheckboxCard.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'
 
@@ -24,7 +24,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const CheckboxCard = forwardRef(
+const CheckboxCard = React.forwardRef(
   (
     {
       tokens,

package/src/CheckboxCardGroup/CheckboxCardGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useViewport } from '../ViewportProvider'
@@ -24,7 +24,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const CheckboxCardGroup = forwardRef(
+const CheckboxCardGroup = React.forwardRef(
   (
     {
       copy = 'en',

package/src/ColourToggle/ColourBubble.jsx

@@ -1,9 +1,10 @@
-import React, { forwardRef, useMemo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { View, Pressable, Platform } from 'react-native'
 import { resolvePressableTokens } from '../utils/pressability'
 import { applyShadowToken } from '../ThemeProvider'
+import { getTokensPropType } from '../utils'
 
 const selectGeneralBubbleTokens = ({
   outerBubbleHeight,
@@ -50,13 +51,13 @@ const selectBorderBubbleTokens = ({
   borderRadius: bubbleBorderRadius
 })
 
-const ColourBubble = forwardRef(
+const ColourBubble = React.forwardRef(
   ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress }, ref) => {
     const defaultTokens = tokens({ selected: isSelected })
 
     const resolveColourBubbleTokens = (pressState) => resolvePressableTokens(tokens, pressState, {})
 
-    const themeTokens = useMemo(() => tokens(), [tokens])
+    const themeTokens = React.useMemo(() => tokens(), [tokens])
 
     return (
       <Pressable
@@ -83,7 +84,7 @@ ColourBubble.propTypes = {
   /**
    * Colour toggle tokens callback.
    */
-  tokens: PropTypes.func,
+  tokens: getTokensPropType('ColourToggle'),
   /**
    * ID of each colour bubble
    */

package/src/ColourToggle/ColourToggle.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -10,9 +10,9 @@ import ColourBubble from './ColourBubble'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const ColourToggle = forwardRef(
+const ColourToggle = React.forwardRef(
   ({ tokens, variant, defaultColourId, items, onChange, ...rest }, ref) => {
-    const [currentColourId, setCurrentColourId] = useState(defaultColourId)
+    const [currentColourId, setCurrentColourId] = React.useState(defaultColourId)
     const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant)
 
     const { space } = getTokens()

package/src/Divider/Divider.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -55,7 +55,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = forwardRef(({ variant, vertical = false, space, tokens, ...rest }, ref) => {
+const Divider = React.forwardRef(({ variant, vertical = false, space, tokens, ...rest }, ref) => {
   const { color, width } = useThemeTokens('Divider', tokens, variant)
 
   const borderStyles = vertical

package/src/ExpandCollapse/Accordion.jsx

@@ -1,10 +1,12 @@
-import React, { forwardRef } from 'react'
+import React 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 = forwardRef((props, ref) => <ExpandCollapse ref={ref} {...props} maxOpen={1} />)
+const Accordion = React.forwardRef((props, ref) => (
+  <ExpandCollapse ref={ref} {...props} maxOpen={1} />
+))
 Accordion.displayName = 'Accordion'
 Accordion.propTypes = ExpandCollapse.propTypes
 

package/src/ExpandCollapse/Control.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Pressable, View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -66,7 +66,7 @@ function selectIconTokens(tokens) {
   }
 }
 
-const ExpandCollapseControl = forwardRef(
+const ExpandCollapseControl = React.forwardRef(
   (
     { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
     ref

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -29,7 +29,7 @@ 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 = forwardRef(
+const ExpandCollapse = React.forwardRef(
   ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, ...rest }, ref) => {
     const {
       currentValues: openIds,

package/src/ExpandCollapse/Panel.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import { Animated, Platform, View, Text } from 'react-native'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
@@ -81,7 +81,7 @@ const selectControlPanelStyles = ({ contentPanelBackgroundColor }) => ({
  * 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 = forwardRef(
+const ExpandCollapsePanel = React.forwardRef(
   (
     {
       openIds = [],
@@ -100,7 +100,7 @@ const ExpandCollapsePanel = forwardRef(
     },
     ref
   ) => {
-    const [containerHeight, setContainerHeight] = useState(null)
+    const [containerHeight, setContainerHeight] = React.useState(null)
     const isExpanded = openIds.includes(panelId)
     const getCopy = useCopy({ dictionary, copy })
 

package/src/Feedback/Feedback.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'
 
@@ -55,7 +55,7 @@ const selectIconContainerStyles = ({ iconGap }) => ({
  * ### Accessibility
  * All accessibility props set on this component will be applied to the outer container.
  */
-const Feedback = forwardRef(
+const Feedback = React.forwardRef(
   ({ title, children, id, validation, tokens, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('Feedback', tokens, {
       ...variant,

package/src/Fieldset/Fieldset.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import Feedback from '../Feedback'
@@ -15,7 +15,7 @@ import useInputSupports from '../InputSupports/useInputSupports'
  *
  * Follows the same theming and most of the same props as InputSupports.
  */
-const Fieldset = forwardRef(
+const Fieldset = React.forwardRef(
   (
     {
       copy = 'en',

package/src/Fieldset/FieldsetContainer.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import cssReset from './cssReset'
@@ -10,7 +10,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htm
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-const FieldsetContainer = forwardRef(
+const FieldsetContainer = React.forwardRef(
   (
     {
       children,

package/src/Fieldset/FieldsetContainer.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
@@ -8,7 +8,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 // 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 = forwardRef(({ children, accessibilityRole, ...rest }, ref) => (
+const FieldsetContainer = React.forwardRef(({ children, accessibilityRole, ...rest }, ref) => (
   <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
     {children}
   </View>

package/src/Fieldset/Legend.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import cssReset from './cssReset'
@@ -7,7 +7,7 @@ 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 = forwardRef(({ children }, ref) => (
+const Legend = React.forwardRef(({ children }, ref) => (
   <legend ref={ref} style={cssReset}>
     {children}
   </legend>

package/src/Fieldset/Legend.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -6,7 +6,7 @@ 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 = forwardRef(({ children }, ref) => (
+const Legend = React.forwardRef(({ children }, ref) => (
   <View ref={ref} style={staticStyles.stretch}>
     {children}
   </View>

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,