@telus-uds/components-base 1.84.0 → 1.85.0

package/src/Validator/Validator.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, createRef, useRef, useMemo, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { inputSupportsProps, selectSystemProps } from '../utils'
@@ -17,20 +17,20 @@ const selectCodeTextInputTokens = ({ outerBorderColor, outerBackgroundColor }) =
   }
 }
 
-const Validator = forwardRef(
+const Validator = React.forwardRef(
   ({ value = '', inactive, onChange, tokens = {}, variant = {}, ...rest }, ref) => {
-    const defaultRef = useRef()
+    const defaultRef = React.useRef()
     const codeRef = ref ?? defaultRef
 
     const { supportsProps } = selectProps(rest)
     const strValidation = supportsProps.validation
-    const [individualCodes, setIndividualCodes] = useState({})
-    const [text, setText] = useState(value)
+    const [individualCodes, setIndividualCodes] = React.useState({})
+    const [text, setText] = React.useState(value)
     const validatorsLength = 6
     const prefix = 'code'
     const sufixValidation = 'Validation'
 
-    const [isHover, setIsHover] = useState(false)
+    const [isHover, setIsHover] = React.useState(false)
     const handleMouseOver = () => {
       setIsHover(true)
     }
@@ -41,11 +41,11 @@ const Validator = forwardRef(
 
     const themeTokens = useThemeTokens('TextInput', tokens, variant, { hover: isHover })
 
-    const [codeReferences, singleCodes] = useMemo(() => {
+    const [codeReferences, singleCodes] = React.useMemo(() => {
       const codes = []
       const valueCodes = {}
       for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
-        codes[prefix + i] = createRef()
+        codes[prefix + i] = React.createRef()
         valueCodes[prefix + i] = ''
         valueCodes[prefix + i + sufixValidation] = ''
       }
@@ -130,13 +130,13 @@ const Validator = forwardRef(
       return components
     }
 
-    useEffect(() => {
+    React.useEffect(() => {
       /* eslint-disable no-unused-expressions */
       if (Number(value).toString() !== 'NaN') setText(value)
     }, [value])
 
     /* eslint-disable react-hooks/exhaustive-deps */
-    useEffect(() => {
+    React.useEffect(() => {
       for (let i = 0; i < validatorsLength; i += 1) {
         codeReferences[prefix + i].current.value = text[i] ?? ''
         handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '')
@@ -144,7 +144,7 @@ const Validator = forwardRef(
     }, [text])
 
     /* eslint-disable react-hooks/exhaustive-deps */
-    useEffect(() => {
+    React.useEffect(() => {
       const handlePasteCode = (event) => {
         setText('')
         const clipBoardText = event.clipboardData.getData('text')

package/src/ViewportProvider/ViewportProvider.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { viewports } from '@telus-uds/system-constants'
 import { ViewportContext } from './useViewport'
@@ -10,7 +10,7 @@ import useViewportListener from './useViewportListener'
 const ViewportProvider = ({ children }) => {
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
-  const [viewport, setViewport] = useState(viewports.keys[0])
+  const [viewport, setViewport] = React.useState(viewports.keys[0])
   useViewportListener(setViewport)
   return <ViewportContext.Provider value={viewport}>{children}</ViewportContext.Provider>
 }

package/src/index.js

@@ -5,6 +5,7 @@ export { default as Box } from './Box'
 export { default as Badge } from './Badge'
 export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
+export { default as CardGroup } from './CardGroup'
 export * from './Carousel'
 export { default as Listbox } from './Listbox'
 export { default as Checkbox } from './Checkbox'

package/src/utils/BaseView/BaseView.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View as NativeView, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTheme } from '../../ThemeProvider'
@@ -7,7 +7,7 @@ import { useTheme } from '../../ThemeProvider'
  * Identical to React Native's View and supporting all the same props, but with:
  *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
  */
-const BaseView = forwardRef(({ children, style, ...rest }, ref) => {
+const BaseView = React.forwardRef(({ children, style, ...rest }, ref) => {
   const { themeOptions } = useTheme()
   const styleProp = Array.isArray(style) ? [...style] : [style]
 

package/src/utils/children.jsx

@@ -1,4 +1,4 @@
-import React, { Children, Fragment } from 'react'
+import React from 'react'
 import { Text } from 'react-native'
 import A11yText from '../A11yText'
 
@@ -36,10 +36,10 @@ import A11yText from '../A11yText'
  */
 export 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
@@ -81,7 +81,7 @@ const wrapChild = (child, wrappedText) => {
  * @returns {ReactChildren}
  */
 export const wrapStringsInText = (children, textProps = {}) => {
-  const childrenArray = unpackFragment(Children.toArray(children))
+  const childrenArray = unpackFragment(React.Children.toArray(children))
 
   // Group adjacent wrapable children together in one Text element to create as few Text elements
   // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>

package/src/utils/withLinkRouter.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import hasOwnProperty from './hasOwnProperty'
 
@@ -17,7 +17,7 @@ import hasOwnProperty from './hasOwnProperty'
  * @example A LinkRouter component to be used with link-like components might look like:
  *
  * ```jsx
- * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ * const LinkLinkRouter = React.forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
  *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
  *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
  * })
@@ -31,7 +31,7 @@ import hasOwnProperty from './hasOwnProperty'
  * ```
  */
 const withLinkRouter = (Component) => {
-  const wrappedComponent = forwardRef(({ LinkRouter, linkRouterProps, ...props }, ref) => {
+  const wrappedComponent = React.forwardRef(({ LinkRouter, linkRouterProps, ...props }, ref) => {
     if (!LinkRouter) return <Component {...props} ref={ref} />
     return (
       <LinkRouter linkRouterProps={linkRouterProps} Component={Component} ref={ref} {...props} />

package/types/ExpandCollapse.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactPropTypes } from 'react'
+import React from 'react'
 
 type ExpandCollapseVariants = {
   compact: boolean