@telus-uds/components-web 2.33.2 → 2.34.1

package/src/IconButton/IconButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import {
   IconButton as IconButtonBase,
@@ -6,23 +6,25 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 
-const IconButton = forwardRef(({ icon, action, tokens, variant = {}, ...iconButtonProps }, ref) => {
-  const variantWithAction = action && !variant.action ? { ...variant, action } : variant
-  const { icon: themeIcon } = useThemeTokens('IconButton', tokens, variantWithAction)
+const IconButton = React.forwardRef(
+  ({ icon = null, action, tokens = {}, variant = {}, ...iconButtonProps }, ref) => {
+    const variantWithAction = action && !variant.action ? { ...variant, action } : variant
+    const { icon: themeIcon } = useThemeTokens('IconButton', tokens, variantWithAction)
 
-  return (
-    // If we want the arrow icons to have directional animation instead of scale, we can pass
-    // either appropriate iconTransateX/Y here, or define and pass variants like { direction: 'left' }
-    // which have theme rules that set `iconTranslateX` tokens in the theme rules and unset `iconScale`.
-    <IconButtonBase
-      ref={ref}
-      {...iconButtonProps}
-      tokens={tokens}
-      variant={variant}
-      icon={icon ?? themeIcon}
-    />
-  )
-})
+    return (
+      // If we want the arrow icons to have directional animation instead of scale, we can pass
+      // either appropriate iconTransateX/Y here, or define and pass variants like { direction: 'left' }
+      // which have theme rules that set `iconTranslateX` tokens in the theme rules and unset `iconScale`.
+      <IconButtonBase
+        ref={ref}
+        {...iconButtonProps}
+        tokens={tokens}
+        variant={variant}
+        icon={icon ?? themeIcon}
+      />
+    )
+  }
+)
 
 const multiBrandIconNames = [
   'add',
@@ -44,7 +46,6 @@ IconButton.propTypes = {
   /**
    * To set the icon to a multi-brand compatabile icon
    */
-  // eslint-disable-next-line react/require-default-props
   action: PropTypes.oneOf(multiBrandIconNames),
   /**
    * To set a custom icon
@@ -52,6 +53,4 @@ IconButton.propTypes = {
   icon: PropTypes.func
 }
 
-IconButton.defaultProps = { icon: null, tokens: {} }
-
 export default IconButton

package/src/Image/Image.jsx

@@ -5,53 +5,50 @@ import { warn } from '../utils/logger'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const Image = ({
-  src,
-  width,
-  height,
-  alt,
-  rounded,
-  loading = 'eager',
-  tokens,
-  theme,
-  variant,
-  ...rest
-}) => {
-  let { borderRadius } = theme
-  const isCircle = rounded === 'circle'
-  const isCorners = rounded === 'corners'
-  const isSquare = width === height
+const Image = React.forwardRef(
+  (
+    { src, width, height, alt, rounded, loading = 'eager', tokens, theme, variant, ...rest },
+    ref
+  ) => {
+    let { borderRadius } = theme
+    const isCircle = rounded === 'circle'
+    const isCorners = rounded === 'corners'
+    const isSquare = width === height
 
-  if (isCircle && !isSquare) {
-    warn(
-      'Image',
-      'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.'
-    )
-  }
+    if (isCircle && !isSquare) {
+      warn(
+        'Image',
+        'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.'
+      )
+    }
 
-  if (isCircle) {
-    borderRadius = '50%'
-  } else if (isCorners) {
-    borderRadius = '4px'
-  }
+    if (isCircle) {
+      borderRadius = '50%'
+    } else if (isCorners) {
+      borderRadius = '4px'
+    }
 
-  const style = {
-    borderRadius,
-    height: height ?? 'auto',
-    maxWidth: '100%'
+    const style = {
+      borderRadius,
+      height: height ?? 'auto',
+      maxWidth: '100%'
+    }
+    return (
+      <img
+        {...selectProps(rest)}
+        style={style}
+        src={src}
+        width={width}
+        height={height}
+        alt={alt}
+        loading={loading}
+        ref={ref}
+      />
+    )
   }
-  return (
-    <img
-      {...selectProps(rest)}
-      style={style}
-      src={src}
-      width={width}
-      height={height}
-      alt={alt}
-      loading={loading}
-    />
-  )
-}
+)
+
+Image.displayName = 'Image'
 
 Image.propTypes = {
   ...selectedSystemPropTypes,

package/src/List/ListItem.jsx

@@ -1,21 +1,19 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { ListItem as ListItemBase, Typography } from '@telus-uds/components-base'
 
-const ListItem = forwardRef(({ children, title, ...rest }, ref) => (
+const ListItem = React.forwardRef(({ children, title, ...rest }, ref) => (
   <ListItemBase ref={ref} {...rest}>
     {Boolean(title) && <Typography variant={{ size: 'h4' }}>{title}</Typography>}
     {children}
   </ListItemBase>
 ))
+
 ListItem.displayName = 'ListItem'
 
 ListItem.propTypes = {
   children: PropTypes.node.isRequired,
   title: PropTypes.string
 }
-ListItem.defaultProps = {
-  title: undefined
-}
 
 export default ListItem

package/src/NavigationBar/NavigationBar.jsx

@@ -1,12 +1,11 @@
-import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import {
   selectSystemProps,
   StackView,
   Typography,
   useResponsiveProp,
-  withLinkRouter,
-  getTokensPropType
+  withLinkRouter
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs } from '../utils'
@@ -28,7 +27,7 @@ const Heading = styled.div({
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-const NavigationBar = forwardRef(
+const NavigationBar = React.forwardRef(
   (
     {
       accessibilityRole = 'navigation',
@@ -45,8 +44,8 @@ const NavigationBar = forwardRef(
   ) => {
     const direction = useResponsiveProp({ xs: 'column', sm: 'row' })
     const itemsForViewport = useResponsiveProp({ xs: collapseItems(items, selectedId), lg: items })
-    const openOverlayRef = useRef(null)
-    const [openSubMenuId, setOpenSubMenuId] = useState(null)
+    const openOverlayRef = React.useRef(null)
+    const [openSubMenuId, setOpenSubMenuId] = React.useState(null)
     const handleSubMenuClose = (event) => {
       if (event.type === 'keydown') {
         if (event.key === 'Escape' || event.key === 27) {
@@ -69,12 +68,12 @@ const NavigationBar = forwardRef(
       }
     }
 
-    const navRefDefault = useRef(null)
+    const navRefDefault = React.useRef(null)
     const navRef = ref ?? navRefDefault
-    const itemsRef = useRef(null)
+    const itemsRef = React.useRef(null)
 
     // Close the submenu when the user clicks outside the navigation bar
-    const handleMouseDown = useCallback(
+    const handleMouseDown = React.useCallback(
       (event) => {
         if (navRef.current && itemsRef.current) {
           // Get the bounding rectangles of the navigation bar and the items container
@@ -103,7 +102,7 @@ const NavigationBar = forwardRef(
     )
 
     // TODO: create a custom hook for that and use here and in the Footnote
-    useEffect(() => {
+    React.useEffect(() => {
       // Add listeners for mouse clicks outside and for key presses
       document.addEventListener('mousedown', handleMouseDown)
 
@@ -202,7 +201,6 @@ NavigationBar.displayName = 'NavigationBar'
 
 NavigationBar.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: getTokensPropType('NavigationBar'),
   ...withLinkRouter.propTypes,
   /**
    * NavigationBar pages
@@ -256,12 +254,5 @@ NavigationBar.propTypes = {
    */
   accessibilityRole: PropTypes.string
 }
-NavigationBar.defaultProps = {
-  heading: undefined,
-  headingLevel: 'h1',
-  onChange: () => {},
-  accessibilityRole: '',
-  tokens: {}
-}
 
 export default NavigationBar

package/src/NavigationBar/NavigationItem.jsx

@@ -1,11 +1,12 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import {
   Button,
   selectSystemProps,
   useResponsiveProp,
   useViewport,
-  useThemeTokensCallback
+  useThemeTokensCallback,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs } from '../utils'
@@ -28,14 +29,14 @@ const ItemContainer = styled.div(({ targetWidth }) => ({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationItem = forwardRef(
+const NavigationItem = React.forwardRef(
   (
     {
       accessibilityRole = 'link', // @todo switch to 'button' for dropdowns
       children,
       id,
       onClick: handleClick = () => {},
-      selected,
+      selected = false,
       accessibilityState = { current: selected ? 'page' : false },
       href,
       tokens,
@@ -76,10 +77,10 @@ NavigationItem.displayName = 'NavigationItem'
 
 NavigationItem.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('NavigationBar'),
   onClick: PropTypes.func,
   selected: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
 }
-NavigationItem.defaultProps = { onClick: () => {}, selected: false }
 
 export default NavigationItem

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -1,6 +1,12 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { Icon, useResponsiveProp, useThemeTokens, Listbox } from '@telus-uds/components-base'
+import {
+  Icon,
+  useResponsiveProp,
+  useThemeTokens,
+  Listbox,
+  getTokensPropType
+} from '@telus-uds/components-base'
 import NavigationItem from './NavigationItem'
 import useOverlaidPosition from '../utils/useOverlaidPosition'
 import resolveItemSelection from './resolveItemSelection'
@@ -10,103 +16,113 @@ import resolveItemSelection from './resolveItemSelection'
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationSubMenu = ({
-  children,
-  id,
-  isOpen = false,
-  label,
-  onClick,
-  selectedId,
-  items = [],
-  openOverlayRef,
-  LinkRouter,
-  linkRouterProps,
-  itemsContainerRef
-}) => {
-  const focusTrapRef = useRef()
+const NavigationSubMenu = React.forwardRef(
+  (
+    {
+      children,
+      id,
+      isOpen = false,
+      tokens = {},
+      label,
+      onClick,
+      selectedId,
+      items = [],
+      openOverlayRef,
+      LinkRouter,
+      linkRouterProps,
+      itemsContainerRef
+    },
+    ref
+  ) => {
+    const focusTrapRef = React.useRef()
 
-  const maxWidth = 289 // Slightly over 288 of nav item to account for subpixel rounding
-  const defaultOffsets = { offsets: { vertical: 4 } }
-  const { align, offsets, minWidth } = useResponsiveProp({
-    xs: { ...defaultOffsets, align: { top: 'bottom', left: 'left' }, minWidth: maxWidth },
-    sm: { ...defaultOffsets, align: { top: 'bottom', right: 'right' }, minWidth: maxWidth },
-    lg: {
-      ...defaultOffsets,
-      align: { top: 'bottom', center: 'center' },
-      minWidth: 192
-    }
-  })
+    const maxWidth = 289 // Slightly over 288 of nav item to account for subpixel rounding
+    const defaultOffsets = { offsets: { vertical: 4 } }
+    const { align, offsets, minWidth } = useResponsiveProp({
+      xs: { ...defaultOffsets, align: { top: 'bottom', left: 'left' }, minWidth: maxWidth },
+      sm: { ...defaultOffsets, align: { top: 'bottom', right: 'right' }, minWidth: maxWidth },
+      lg: {
+        ...defaultOffsets,
+        align: { top: 'bottom', center: 'center' },
+        minWidth: 192
+      }
+    })
 
-  const { overlaidPosition, sourceRef, targetRef, onTargetLayout, isReady } = useOverlaidPosition({
-    isShown: isOpen,
-    offsets,
-    align
-  })
-  const { selected } = resolveItemSelection({ id, label, items }, selectedId)
+    const { overlaidPosition, sourceRef, targetRef, onTargetLayout, isReady } = useOverlaidPosition(
+      {
+        isShown: isOpen,
+        offsets,
+        align
+      }
+    )
+    const { selected } = resolveItemSelection({ id, label, items }, selectedId)
 
-  const handleClick = (event) => {
-    if (typeof onClick === 'function') onClick(event)
-  }
+    const handleClick = (event) => {
+      if (typeof onClick === 'function') onClick(event)
+    }
 
-  const { icoMenu } = useThemeTokens('NavigationBar', {}, {}, { expanded: isOpen })
+    const { icoMenu } = useThemeTokens('NavigationBar', {}, {}, { expanded: isOpen })
 
-  return (
-    <>
-      <NavigationItem
-        ref={sourceRef}
-        accessibilityRole="button"
-        id={id}
-        selected={selected}
-        onClick={handleClick}
-        icon={icoMenu}
-      >
-        {({ textStyles }) => [
-          children,
-          <Icon
-            key={`${id}_icon`}
-            icon={icoMenu}
-            variant={{ size: 'micro' }}
-            tokens={{ color: textStyles[0]?.color }}
-          />
-        ]}
-      </NavigationItem>
-      {isOpen && (
-        <>
-          <Listbox.Overlay
-            overlaidPosition={overlaidPosition}
-            maxWidth={maxWidth}
-            minWidth={minWidth}
-            isReady={isReady}
-            onLayout={onTargetLayout}
-            ref={openOverlayRef}
-          >
-            <Listbox
-              items={items}
-              firstItemRef={targetRef}
-              parentRef={sourceRef}
-              selectedId={selectedId}
-              LinkRouter={LinkRouter}
-              linkRouterProps={linkRouterProps}
-              ref={itemsContainerRef}
+    return (
+      <>
+        <NavigationItem
+          ref={sourceRef}
+          accessibilityRole="button"
+          id={id}
+          selected={selected}
+          onClick={handleClick}
+          icon={icoMenu}
+          tokens={tokens}
+        >
+          {({ textStyles }) => [
+            children,
+            <Icon
+              key={`${id}_icon`}
+              icon={icoMenu}
+              variant={{ size: 'micro' }}
+              tokens={{ color: textStyles[0]?.color }}
             />
-          </Listbox.Overlay>
-          <div
-            // This catches and shifts focus to other interactive elements.
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex={0}
-            ref={focusTrapRef}
-            onFocus={() => targetRef.current.focus()}
-          />
-        </>
-      )}
-    </>
-  )
-}
+          ]}
+        </NavigationItem>
+        {isOpen && (
+          <>
+            <Listbox.Overlay
+              overlaidPosition={overlaidPosition}
+              maxWidth={maxWidth}
+              minWidth={minWidth}
+              isReady={isReady}
+              onLayout={onTargetLayout}
+              ref={openOverlayRef}
+            >
+              <Listbox
+                items={items}
+                firstItemRef={targetRef}
+                parentRef={sourceRef}
+                selectedId={selectedId}
+                LinkRouter={LinkRouter}
+                linkRouterProps={linkRouterProps}
+                ref={itemsContainerRef || ref}
+              />
+            </Listbox.Overlay>
+            <div
+              // This catches and shifts focus to other interactive elements.
+              // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+              tabIndex={0}
+              ref={focusTrapRef}
+              onFocus={() => targetRef.current.focus()}
+            />
+          </>
+        )}
+      </>
+    )
+  }
+)
 
 NavigationSubMenu.displayName = 'NavigationSubMenu'
 
 // @TODO - proper prop types and comments
 NavigationSubMenu.propTypes = {
+  tokens: getTokensPropType('NavigationBar'),
   children: PropTypes.node,
   id: PropTypes.string,
   isOpen: PropTypes.bool,

package/src/NavigationBar/index.js

@@ -1,3 +1,6 @@
 import NavigationBar from './NavigationBar'
+import NavigationItem from './NavigationItem'
+
+NavigationBar.Item = NavigationItem
 
 export default NavigationBar

package/src/OptimizeImage/OptimizeImage.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { selectSystemProps } from '@telus-uds/components-base'
 import ResponsiveImage from '../ResponsiveImage'
@@ -7,48 +7,55 @@ import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const OptimizeImage = ({
-  contentfulAssetUrl,
-  alt,
-  quality = 80,
-  xs = 320,
-  sm = 576,
-  md = 768,
-  lg = 992,
-  xl = 1200,
-  sizeByHeight = false,
-  disableRetina = false,
-  ...rest
-}) => {
-  // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
-  const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w'
-  // by default assuming webP support for SSR
-  const [imgUrls, setImgUrls] = useState(
-    getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true)
-  )
+const OptimizeImage = React.forwardRef(
+  (
+    {
+      contentfulAssetUrl,
+      alt,
+      quality = 80,
+      xs = 320,
+      sm = 576,
+      md = 768,
+      lg = 992,
+      xl = 1200,
+      sizeByHeight = false,
+      disableRetina = false,
+      ...rest
+    },
+    ref
+  ) => {
+    // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
+    const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w'
+    // by default assuming webP support for SSR
+    const [imgUrls, setImgUrls] = React.useState(
+      getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true)
+    )
 
-  useEffect(() => {
-    // Checking for webP support for CSR
-    hasWebpSupport().then((supportsWebp) => {
-      const imageUrls = getImageUrls(
-        contentfulAssetUrl,
-        dimension,
-        xs,
-        sm,
-        md,
-        lg,
-        xl,
-        quality,
-        disableRetina,
-        supportsWebp
-      )
-      setImgUrls(imageUrls)
-    })
-  }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs])
+    React.useEffect(() => {
+      // Checking for webP support for CSR
+      hasWebpSupport().then((supportsWebp) => {
+        const imageUrls = getImageUrls(
+          contentfulAssetUrl,
+          dimension,
+          xs,
+          sm,
+          md,
+          lg,
+          xl,
+          quality,
+          disableRetina,
+          supportsWebp
+        )
+        setImgUrls(imageUrls)
+      })
+    }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs])
 
-  if (!imgUrls) return null
-  return <ResponsiveImage {...imgUrls} alt={alt} {...selectProps(rest)} />
-}
+    if (!imgUrls) return null
+    return <ResponsiveImage {...imgUrls} alt={alt} {...selectProps(rest)} ref={ref} />
+  }
+)
+
+OptimizeImage.displayName = 'OptimizeImage'
 
 OptimizeImage.propTypes = {
   ...selectedSystemPropTypes,