@telus-uds/components-base 1.84.0 → 1.85.0

package/src/Link/Link.jsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
 
-const Link = forwardRef(
+const Link = React.forwardRef(
   (
     { href, children, accessibilityRole = 'link', variant = {}, tokens, dataSet, ...linkProps },
     ref

package/src/Link/LinkBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Text, Platform, StyleSheet } from 'react-native'
 import {
@@ -119,7 +119,7 @@ const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX }) =>
  *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
  *   should be used more widely (e.g. styled components)
  */
-const LinkBase = forwardRef(
+const LinkBase = React.forwardRef(
   (
     {
       href,

package/src/Link/TextButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
@@ -9,7 +9,7 @@ import { variantProp } from '../utils'
  * Link but has the accessibility role of a `Button`. It should be used for actions that
  * take place on the current page, or for navigation within an app.
  */
-const TextButton = forwardRef(
+const TextButton = React.forwardRef(
   ({ onPress, children, variant, tokens, accessibilityRole = 'button', ...linkProps }, ref) => {
     const getTokens = useThemeTokensCallback('Link', tokens, variant)
     return (

package/src/List/List.jsx

@@ -1,5 +1,5 @@
-import React, { cloneElement, forwardRef, Children } from 'react'
-import { View, Platform } from 'react-native'
+import React from 'react'
+import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
@@ -15,7 +15,7 @@ const isListItem = (element) => {
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = forwardRef(
+const List = React.forwardRef(
   (
     {
       children,
@@ -27,12 +27,12 @@ const List = forwardRef(
     },
     ref
   ) => {
-    const items = Children.map(children, (child, index) => {
+    const items = React.Children.map(children, (child, index) => {
       // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
       if (isListItem(child)) {
-        return cloneElement(child, {
+        return React.cloneElement(child, {
           showDivider,
-          isLastItem: index + 1 === Children.count(children),
+          isLastItem: index + 1 === React.Children.count(children),
           tokens,
           variant,
           ...child.props
@@ -44,7 +44,7 @@ const List = forwardRef(
     return (
       <View
         ref={ref}
-        style={{ flexShrink: 1, flex: 1 }}
+        style={styles.list}
         accessibilityRole={accessibilityRole}
         {...selectProps(rest)}
       >
@@ -53,6 +53,14 @@ const List = forwardRef(
     )
   }
 )
+
+const styles = StyleSheet.create({
+  list: {
+    flex: 1,
+    flexShrink: 1
+  }
+})
+
 List.displayName = 'List'
 
 List.propTypes = {

package/src/List/ListItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import ListItemBase from './ListItemBase'
 import { useThemeTokens } from '../ThemeProvider'
@@ -7,7 +7,7 @@ import { variantProp } from '../utils'
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
+const ListItem = React.forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
   const themeTokens = useThemeTokens('List', tokens, variant)
   return (
     <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps} title={title}>

package/src/List/ListItemBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
@@ -24,7 +24,7 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItemBase = forwardRef(
+const ListItemBase = React.forwardRef(
   (
     {
       tokens,
@@ -74,21 +74,14 @@ const ListItemBase = forwardRef(
     return (
       <View
         ref={ref}
-        style={[staticStyles.itemContainer, getContainerStyle()]}
+        style={[staticStyles.container, getContainerStyle()]}
         accessibilityRole={accessibilityRole}
         {...selectProps(rest)}
       >
         {typeof children === 'function' ? (
           children({ tokens, icon, iconColor, iconSize, isLastItem })
         ) : (
-          <View
-            style={[
-              {
-                flex: 1,
-                flexDirection: 'row'
-              }
-            ]}
-          >
+          <View style={staticStyles.container}>
             <ListItemMark
               tokens={{ ...tokens, iconMarginTop: adjustedIconMarginTop }}
               icon={icon}
@@ -110,7 +103,8 @@ const ListItemBase = forwardRef(
 ListItemBase.displayName = 'ListItem'
 
 const staticStyles = StyleSheet.create({
-  itemContainer: {
+  container: {
+    flex: 1,
     flexDirection: 'row'
   },
   titleAndContentContainer: { flexDirection: 'column', flexShrink: 1 }

package/src/List/ListItemContent.jsx

@@ -34,7 +34,7 @@ const selectItemTextStyles = (
  * It's the responsibility of themes to make sure that these text tokens align the first line of
  * text nicely against the bullet or icon rendered by ListIconMark.
  */
-const ListItemContent = ({ tokens, children }) => {
+const ListItemContent = React.forwardRef(({ tokens, children }, ref) => {
   const { themeOptions } = useTheme()
   const textStyles = selectItemTextStyles(tokens, themeOptions)
   return (
@@ -46,11 +46,14 @@ const ListItemContent = ({ tokens, children }) => {
           textDecorationColor: tokens.itemFontColor
         }
       ]}
+      ref={ref}
     >
       {wrapStringsInText(children, { style: textStyles })}
     </View>
   )
-}
+})
+
+ListItemContent.displayName = 'ListItemContent'
 
 const staticStyles = StyleSheet.create({
   wrap: {

package/src/List/ListItemMark.jsx

@@ -39,7 +39,7 @@ const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletConta
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = ({ icon, iconColor, iconSize, tokens = {} }) => {
+const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {} }, ref) => {
   const IconComponent = icon || <></>
 
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens
@@ -61,7 +61,7 @@ const ListItemMark = ({ icon, iconColor, iconSize, tokens = {} }) => {
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
 
   return (
-    <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
+    <View style={[sideItemContainerStyles, itemBulletContainerStyles]} ref={ref}>
       <View
         style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}
         testID="unordered-item-bullet"
@@ -70,7 +70,9 @@ const ListItemMark = ({ icon, iconColor, iconSize, tokens = {} }) => {
       </View>
     </View>
   )
-}
+})
+
+ListItemMark.displayName = 'ListItemMark'
 
 ListItemMark.propTypes = {
   tokens: PropTypes.shape(tokenTypes).isRequired,

package/src/List/PressableListItemBase.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'
 
@@ -36,7 +36,7 @@ const selectPressableStyles = ({
   ...Platform.select({ web: { outline: 'none' } })
 })
 
-const PressableListItemBase = forwardRef(
+const PressableListItemBase = React.forwardRef(
   ({ href, tokens, icon, children, listItemRef, ...rest }, ref) => {
     const { onPress, ...props } = clickProps.toPressProps(rest)
     const { hrefAttrs, rest: listItemProps } = hrefAttrsProp.bundle(props)

package/src/Listbox/GroupControl.jsx

@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
   }
 })
 
-const GroupControl = ({ expanded, pressed, hover, focus, label, id }) => {
+const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label, id }, ref) => {
   const { selectedId, setSelectedId } = useListboxContext()
   const tokens = useThemeTokens(
     'Listbox',
@@ -69,6 +69,7 @@ const GroupControl = ({ expanded, pressed, hover, focus, label, id }) => {
           paddingBottom: groupPaddingBottom - groupBorderWidth
         }
       ]}
+      ref={ref}
     >
       <Text>{label}</Text>
       <Spacer space={1} direction="row" />
@@ -79,7 +80,9 @@ const GroupControl = ({ expanded, pressed, hover, focus, label, id }) => {
       />
     </View>
   )
-}
+})
+
+GroupControl.displayName = 'GroupControl'
 
 GroupControl.propTypes = {
   id: PropTypes.string,

package/src/Listbox/Listbox.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -25,7 +25,7 @@ const getInitialOpen = (items, selectedId) =>
     )
     .map((item) => item.id ?? item.label)
 
-const Listbox = forwardRef(
+const Listbox = React.forwardRef(
   (
     {
       items = [],
@@ -42,16 +42,16 @@ const Listbox = forwardRef(
   ) => {
     const initialOpen = getInitialOpen(items, defaultSelectedId)
 
-    const [selectedId, setSelectedId] = useState(defaultSelectedId)
+    const [selectedId, setSelectedId] = React.useState(defaultSelectedId)
 
     const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
 
     // We need to keep track of each item's ref in order to be able to
     // focus on a specific item via keyboard navigation
-    const itemRefs = useRef([])
+    const itemRefs = React.useRef([])
     if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
-    const [focusedIndex, setFocusedIndex] = useState(0)
-    const handleKeydown = useCallback(
+    const [focusedIndex, setFocusedIndex] = React.useState(0)
+    const handleKeydown = React.useCallback(
       (event) => {
         const nextItemRef = itemRefs.current[focusedIndex + 1]
         const prevItemRef = itemRefs.current[focusedIndex - 1]
@@ -83,7 +83,7 @@ const Listbox = forwardRef(
     )
 
     // Add listeners for mouse clicks outside and for key presses
-    useEffect(() => {
+    React.useEffect(() => {
       if (Platform.OS === 'web') {
         window.addEventListener('click', onClose)
         window.addEventListener('keydown', handleKeydown)

package/src/Listbox/ListboxContext.js

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react'
+import React from 'react'
 
 const ListboxContext = React.createContext({})
-const useListboxContext = () => useContext(ListboxContext)
+const useListboxContext = () => React.useContext(ListboxContext)
 
 export { ListboxContext, useListboxContext }

package/src/Listbox/ListboxGroup.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { withLinkRouter } from '../utils'
@@ -27,7 +27,7 @@ const getAccessibilityRole = () =>
     web: 'listitem'
   })
 
-const ListboxGroup = forwardRef(
+const ListboxGroup = React.forwardRef(
   (
     {
       id,

package/src/Listbox/ListboxItem.jsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 import { selectSystemProps, withLinkRouter, htmlAttrs } from '../utils'
@@ -21,7 +20,7 @@ const styles = StyleSheet.create({
   }
 })
 
-const ListboxItem = forwardRef(
+const ListboxItem = React.forwardRef(
   (
     {
       href,

package/src/Listbox/ListboxOverlay.jsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import Portal from '../Portal'
@@ -22,7 +21,7 @@ const staticStyles = StyleSheet.create({
 const paddingVertical = 0
 const paddingHorizontal = 0
 
-const DropdownOverlay = forwardRef(
+const DropdownOverlay = React.forwardRef(
   ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout }, ref) => {
     const systemTokens = useThemeTokens('Listbox', {}, {})
 

package/src/Listbox/PressableItem.jsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Text } from 'react-native'
 import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils'
@@ -48,7 +47,7 @@ const getItemStyles = ({
   justifyContent: 'center'
 })
 
-const PressableItem = forwardRef(
+const PressableItem = React.forwardRef(
   (
     {
       children,

package/src/Modal/Modal.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React from 'react'
 import {
   StyleSheet,
   TouchableWithoutFeedback,
@@ -92,7 +92,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-const Modal = forwardRef(
+const Modal = React.forwardRef(
   (
     {
       children,
@@ -140,10 +140,10 @@ const Modal = forwardRef(
     const showCloseButton = closeButton !== null
 
     // These refs are used to manage focus in the web modal container
-    const focusTrapRef = useRef(null)
-    const closeButtonRef = useRef(null)
+    const focusTrapRef = React.useRef(null)
+    const closeButtonRef = React.useRef(null)
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (Platform.OS === 'web') {
         const handleFocus = () => {
           // If the focus is on the last item of the web modal container, move it to the close button