@telus-uds/components-web 2.33.2 → 2.34.1

package/src/DatePicker/DatePicker.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState, useRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import momentPropTypes from 'react-moment-proptypes'
@@ -79,36 +79,37 @@ const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = forwardRef(
+const DatePicker = React.forwardRef(
   (
     {
       copy = 'en',
       id,
       date,
       feedback,
-      inline,
+      inline = false,
       isDayDisabled,
       label,
-      onDateChange,
+      onDateChange = () => {},
       hint,
       hintPosition = 'inline',
       tooltip,
       tokens,
       variant = {},
       validation,
-      disabled,
-      prevTestID,
-      nextTestID,
+      disabled = false,
+      prevTestID = '',
+      nextTestID = '',
+      placeholder = 'DD / MM / YYYY',
       ...rest
     },
     ref
   ) => {
-    const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined)
-    const [inputText, setInputText] = useState(
+    const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined)
+    const [inputText, setInputText] = React.useState(
       date instanceof moment ? date.format(dateFormat) : ''
     )
-    const textInputRef = useRef()
-    const [datePickerPosition, setDatePickerPosition] = useState({ left: 0, top: 0 })
+    const textInputRef = React.useRef()
+    const [datePickerPosition, setDatePickerPosition] = React.useState({ left: 0, top: 0 })
 
     useSafeLayoutEffect(() => {
       const updateDimensions = () => {
@@ -126,10 +127,10 @@ const DatePicker = forwardRef(
       return () => window.removeEventListener('resize', throttledUpdateDimensions)
     }, [])
 
-    const [isFocused, setIsFocused] = useState(false)
-    const [isClickedInside, setIsClickedInside] = useState(false)
+    const [isFocused, setIsFocused] = React.useState(false)
+    const [isClickedInside, setIsClickedInside] = React.useState(false)
     const getCopy = useCopy({ dictionary, copy })
-    useEffect(() => {
+    React.useEffect(() => {
       /**
        * `date` could be passed as `null` to reset the value so explicitly
        * checking for not being `undefined`
@@ -315,7 +316,7 @@ const DatePicker = forwardRef(
               copy={copy}
               feedback={feedback}
               hint={hint}
-              placeholder="DD / MM / YYYY"
+              placeholder={placeholder}
               onChange={onChangeInput}
               onKeyPress={handleOnKeyPress}
               tooltip={tooltip}
@@ -473,25 +474,11 @@ DatePicker.propTypes = {
    * This is for automation testing purposes.
    * Will be added as a `data-testid-next` attribute for example.
    */
-  nextTestID: PropTypes.string
-}
-
-DatePicker.defaultProps = {
-  copy: 'en',
-  date: undefined,
-  feedback: undefined,
-  inline: false,
-  isDayDisabled: undefined,
-  label: undefined,
-  hint: undefined,
-  hintPosition: 'inline',
-  tooltip: undefined,
-  onDateChange: () => {},
-  validation: undefined,
-  disabled: false,
-  tokens: undefined,
-  prevTestID: '',
-  nextTestID: ''
+  nextTestID: PropTypes.string,
+  /**
+   * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
+   */
+  placeholder: PropTypes.string
 }
 
 export default DatePicker

package/src/Disclaimer/Disclaimer.jsx

@@ -24,14 +24,16 @@ const StyledDisclaimer = styled.p(({ fontName, fontWeight, fontSize, ...tokens }
  * Use Disclaimer to display singular legal statement and must be displayed
  * immediately adjacent to the related, originating content.
  */
-const Disclaimer = ({ children, ...rest }) => {
+const Disclaimer = React.forwardRef(({ children, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Disclaimer')
   return (
-    <StyledDisclaimer {...selectProps(rest)} {...themeTokens}>
+    <StyledDisclaimer ref={ref} {...selectProps(rest)} {...themeTokens}>
       {children}
     </StyledDisclaimer>
   )
-}
+})
+
+Disclaimer.displayName = 'Disclaimer'
 
 Disclaimer.propTypes = {
   ...selectedSystemPropTypes,

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,44 +1,46 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
-const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, nativeID, ...rest }, ref) => {
-  const handleChange = (openPanels, event) => {
-    if (typeof onToggle === 'function') {
-      const isOpen = openPanels.length > 0
-      onToggle(event, isOpen)
+const ExpandCollapseMini = React.forwardRef(
+  ({ children, onToggle = () => {}, tokens = {}, nativeID, ...rest }, ref) => {
+    const handleChange = (openPanels, event) => {
+      if (typeof onToggle === 'function') {
+        const isOpen = openPanels.length > 0
+        onToggle(event, isOpen)
+      }
     }
-  }
 
-  return (
-    <ExpandCollapse onChange={handleChange}>
-      {(expandProps) => (
-        <ExpandCollapse.Panel
-          {...expandProps}
-          panelId="ExpandCollapseMiniPanel"
-          variant={{ mini: true }}
-          controlTokens={{
-            // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
-            icon: null,
-            borderColor: 'transparent',
-            textLine: 'none',
-            backgroundColor: 'transparent'
-          }}
-          // TODO refactor
-          // eslint-disable-next-line react/no-unstable-nested-components
-          control={(pressableState) => (
-            <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
-          )}
-          controlRef={ref}
-          nativeID={nativeID}
-        >
-          {children}
-        </ExpandCollapse.Panel>
-      )}
-    </ExpandCollapse>
-  )
-})
+    return (
+      <ExpandCollapse onChange={handleChange} tokens={tokens}>
+        {(expandProps) => (
+          <ExpandCollapse.Panel
+            {...expandProps}
+            panelId="ExpandCollapseMiniPanel"
+            variant={{ mini: true }}
+            controlTokens={{
+              // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+              icon: null,
+              borderColor: 'transparent',
+              textLine: 'none',
+              backgroundColor: 'transparent'
+            }}
+            // TODO refactor
+            // eslint-disable-next-line react/no-unstable-nested-components
+            control={(pressableState) => (
+              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
+            )}
+            controlRef={ref}
+            nativeID={nativeID}
+          >
+            {children}
+          </ExpandCollapse.Panel>
+        )}
+      </ExpandCollapse>
+    )
+  }
+)
 ExpandCollapseMini.displayName = 'ExpandCollapseMini'
 
 ExpandCollapseMini.propTypes = {
@@ -57,10 +59,5 @@ ExpandCollapseMini.propTypes = {
   children: PropTypes.node.isRequired,
   tokens: getTokensPropType('ExpandCollapseMini')
 }
-ExpandCollapseMini.defaultProps = {
-  onToggle: () => {},
-  tokens: {},
-  nativeID: ''
-}
 
 export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -20,56 +20,64 @@ const selectLinkTokens = ({ color, textLine, lineHeight, fontSize }) => ({
   blockFontSize: fontSize
 })
 
-const ExpandCollapseMiniControl = ({
-  pressableState,
-  collapseTitle,
-  expandTitle = collapseTitle,
-  iconPosition = 'right',
-  tokens,
-  variant = {},
-  ...rest
-}) => {
-  const { expanded, hover, focus } = pressableState || {}
-  // we only want focus outline when focusing, if user is pressing we don't want the border.
-  const { outerBorderColor } = useThemeTokens('Link', {}, {}, { focus })
-  const { size, icon, ...themeTokens } = useThemeTokens(
-    'ExpandCollapseMiniControl',
-    tokens,
-    variant,
-    { expanded, focus }
-  )
+const ExpandCollapseMiniControl = React.forwardRef(
+  (
+    {
+      pressableState,
+      collapseTitle,
+      expandTitle = collapseTitle,
+      iconPosition = 'right',
+      tokens,
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const { expanded, hover, focus } = pressableState || {}
+    // we only want focus outline when focusing, if user is pressing we don't want the border.
+    const { outerBorderColor } = useThemeTokens('Link', {}, {}, { focus })
+    const { size, icon, ...themeTokens } = useThemeTokens(
+      'ExpandCollapseMiniControl',
+      tokens,
+      variant,
+      { expanded, focus }
+    )
 
-  // Choose hover styles when any part of Control is hoverred
-  const appearance = { ...variant, hover }
+    // Choose hover styles when any part of Control is hoverred
+    const appearance = { ...variant, hover }
 
-  const getTokens = (linkState) => {
-    const { hover: linkHover } = linkState || {}
-    const isHovered = hover || linkHover
-    if (isHovered) {
-      // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
-      return { iconTranslateY: (expanded ? -1 : 1) * size }
+    const getTokens = (linkState) => {
+      const { hover: linkHover } = linkState || {}
+      const isHovered = hover || linkHover
+      if (isHovered) {
+        // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
+        return { iconTranslateY: (expanded ? -1 : 1) * size }
+      }
+
+      return {}
     }
 
-    return {}
+    return (
+      <Link
+        variant={appearance}
+        icon={icon}
+        iconPosition={iconPosition}
+        tokens={(linkState) => ({
+          ...getTokens(linkState),
+          ...selectLinkTokens(themeTokens),
+          outerBorderColor
+        })}
+        ref={ref}
+        {...presentationOnly}
+        {...selectProps(rest)}
+      >
+        {expanded ? expandTitle : collapseTitle}
+      </Link>
+    )
   }
+)
 
-  return (
-    <Link
-      variant={appearance}
-      icon={icon}
-      iconPosition={iconPosition}
-      tokens={(linkState) => ({
-        ...getTokens(linkState),
-        ...selectLinkTokens(themeTokens),
-        outerBorderColor
-      })}
-      {...presentationOnly}
-      {...selectProps(rest)}
-    >
-      {expanded ? expandTitle : collapseTitle}
-    </Link>
-  )
-}
+ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl'
 
 ExpandCollapseMiniControl.propTypes = {
   ...selectedSystemPropTypes,

package/src/Footnote/Footnote.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { createGlobalStyle } from 'styled-components'
 import {
@@ -181,8 +181,8 @@ const StyledCustomContentContainer = styled.div(
 )
 
 const usePrevious = (value) => {
-  const ref = useRef()
-  useEffect(() => {
+  const ref = React.useRef()
+  React.useEffect(() => {
     ref.current = value
   })
   if (ref.current) {
@@ -209,20 +209,20 @@ const usePrevious = (value) => {
  * - 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 = (props) => {
-  const viewport = useViewport()
+const Footnote = React.forwardRef((props, ref) => {
   const {
-    copy,
+    copy = 'en',
     number,
     content,
     onClose,
-    isOpen,
+    isOpen = false,
     tokens,
     variant = {},
     isMobileFullScreen = true,
     dictionary = defaultDictionary,
     ...rest
   } = props
+  const viewport = useViewport()
   const {
     footnoteBackground,
     footnoteBorderTopSizeMd,
@@ -259,24 +259,24 @@ const Footnote = (props) => {
     closeIcon
   } = useThemeTokens('Footnote', tokens, variant, { viewport })
 
-  const footnoteRef = useRef(null)
-  const headerRef = useRef(null)
-  const bodyRef = useRef(null)
-  const contentRef = useRef(null)
-  const headingRef = useRef(null)
-  const [data, setData] = useState({ content: null, number: null })
-  const [headerHeight, setHeaderHeight] = useState('auto')
-  const [bodyHeight, setBodyHeight] = useState('auto')
-  const [isVisible, setIsVisible] = useState(false)
-  const [isTextVisible, setIsTextVisible] = useState(true)
+  const footnoteRef = React.useRef(null)
+  const headerRef = React.useRef(null)
+  const bodyRef = React.useRef(null)
+  const contentRef = React.useRef(null)
+  const headingRef = React.useRef(null)
+  const [data, setData] = React.useState({ content: null, number: null })
+  const [headerHeight, setHeaderHeight] = React.useState('auto')
+  const [bodyHeight, setBodyHeight] = React.useState('auto')
+  const [isVisible, setIsVisible] = React.useState(false)
+  const [isTextVisible, setIsTextVisible] = React.useState(true)
   const getCopy = useCopy({ dictionary, copy })
 
   const prevProps = usePrevious(props)
   const theme = useTheme()
   const maxWidth = useResponsiveProp(theme.themeOptions?.contentMaxWidth)
-  const [isScrollable, setIsScrollable] = useState(false)
+  const [isScrollable, setIsScrollable] = React.useState(false)
 
-  const closeFootnote = useCallback(
+  const closeFootnote = React.useCallback(
     (event, options) => {
       onClose(event, options)
     },
@@ -284,7 +284,7 @@ const Footnote = (props) => {
   )
 
   // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
-  const handleClose = useCallback(
+  const handleClose = React.useCallback(
     (event) => {
       if (!isVisible) {
         return
@@ -362,7 +362,7 @@ const Footnote = (props) => {
   }
 
   // Set height of header on mount
-  useEffect(() => {
+  React.useEffect(() => {
     setHeaderHeight(headerRef.current?.offsetHeight)
   }, [])
 
@@ -373,7 +373,7 @@ const Footnote = (props) => {
   }
 
   // Add listeners for mouse clicks outside of Footnote and for ESCAPE key presses
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setIsVisible(true)
       document.addEventListener('mousedown', handleClose)
@@ -394,13 +394,13 @@ const Footnote = (props) => {
   }, [handleClose, isOpen])
 
   // Set data if opening a new footnote
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen && !prevProps.isOpen) {
       setData({ content, number })
     }
   }, [isOpen, prevProps.isOpen, content, number])
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen && prevProps.isOpen && number !== prevProps.number) {
       saveCurrentHeight()
       setIsTextVisible(false)
@@ -408,9 +408,9 @@ const Footnote = (props) => {
   }, [number, isOpen, prevProps.isOpen, prevProps.number])
 
   // Reset footnote on close
-  useEffect(resetFootnote, [isOpen])
+  React.useEffect(resetFootnote, [isOpen])
 
-  const getFootnoteBodyContent = useCallback(() => {
+  const getFootnoteBodyContent = React.useCallback(() => {
     if (!data.number || !data.content) {
       return null
     }
@@ -460,7 +460,7 @@ const Footnote = (props) => {
     listPaddingLeft
   ])
 
-  const checkIfScrollable = useCallback(() => {
+  const checkIfScrollable = React.useCallback(() => {
     const footnoteElement = footnoteRef.current
     if (footnoteElement) {
       const footnoteViewportHeight = footnoteElement.clientHeight ? footnoteElement.clientHeight : 0
@@ -470,7 +470,7 @@ const Footnote = (props) => {
     }
   }, [contentRef, setIsScrollable])
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setTimeout(() => {
         checkIfScrollable()
@@ -480,7 +480,7 @@ const Footnote = (props) => {
 
   return (
     <Portal>
-      <div {...selectProps(rest)}>
+      <div {...selectProps(rest)} ref={ref}>
         {isOpen && <GlobalBodyScrollLock />}
         <StyledFootnote
           ref={footnoteRef}
@@ -544,7 +544,9 @@ const Footnote = (props) => {
       </div>
     </Portal>
   )
-}
+})
+
+Footnote.displayName = 'Footnote'
 
 const copyShape = PropTypes.shape({
   close: PropTypes.string.isRequired,
@@ -599,12 +601,4 @@ Footnote.propTypes = {
   isMobileFullScreen: PropTypes.bool
 }
 
-Footnote.defaultProps = {
-  isOpen: false,
-  number: undefined,
-  content: undefined,
-  copy: 'en',
-  isMobileFullScreen: true
-}
-
 export default Footnote

package/src/Footnote/FootnoteLink.jsx

@@ -33,6 +33,10 @@ const StyledSup = styled.sup(
   }
 )
 
+const FootnoteLinkContainer = styled.div`
+  display: inline-block;
+`
+
 /**
  * Use `FootnoteLink` to open `Footnote` component and display related legal content.
  *
@@ -42,56 +46,52 @@ const StyledSup = styled.sup(
  * - Avoid using FootnoteLink if there is only one annotation on a page. Consider including
  *   the annotation as part of the content whenever possible.
  */
-const FootnoteLink = ({
-  copy = 'en',
-  number = [],
-  onClick,
-  fontSize,
-  tokens,
-  variant = {},
-  ...rest
-}) => {
-  const themeTokens = useThemeTokens('FootnoteLink', tokens, variant)
-  const numbers = Array.isArray(number) ? number : [number]
-  const refs = numbers.map(() => React.createRef())
-  const handleClick = (index) => {
-    onClick(numbers[index], refs[index])
-  }
-  const getCopy = useCopy({ dictionary, copy })
-
-  const handleOnClick = (event, index) => {
-    event.preventDefault()
-    event.stopPropagation()
-    handleClick(index)
-  }
+const FootnoteLink = React.forwardRef(
+  ({ copy = 'en', number = [], onClick, fontSize, tokens, variant = {}, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('FootnoteLink', tokens, variant)
+    const numbers = Array.isArray(number) ? number : [number]
+    const refs = numbers.map(() => React.createRef())
+    const handleClick = (index) => {
+      onClick(numbers[index], refs[index])
+    }
+    const getCopy = useCopy({ dictionary, copy })
 
-  const handleOnKeyDown = (event, index) => {
-    if (event.key === 'Enter' || event.key === 13) {
+    const handleOnClick = (event, index) => {
+      event.preventDefault()
+      event.stopPropagation()
       handleClick(index)
     }
+
+    const handleOnKeyDown = (event, index) => {
+      if (event.key === 'Enter' || event.key === 13) {
+        handleClick(index)
+      }
+    }
+
+    return (
+      <FootnoteLinkContainer ref={ref}>
+        {numbers.map((num, index) => (
+          <StyledSup
+            onKeyDown={(event) => handleOnKeyDown(event, index)}
+            role="button"
+            aria-label={getCopy('a11yLabel')}
+            key={num}
+            ref={refs[index]}
+            onClick={(event) => handleOnClick(event, index)}
+            tabIndex={0}
+            {...selectProps(rest)}
+            {...themeTokens}
+            fontSize={fontSize ?? themeTokens.fontSize}
+          >
+            {`${num}${index !== numbers.length - 1 ? ',' : ''}`}
+          </StyledSup>
+        ))}
+      </FootnoteLinkContainer>
+    )
   }
+)
 
-  return (
-    <>
-      {numbers.map((num, index) => (
-        <StyledSup
-          onKeyDown={(event) => handleOnKeyDown(event, index)}
-          role="button"
-          aria-label={getCopy('a11yLabel')}
-          key={num}
-          ref={refs[index]}
-          onClick={(event) => handleOnClick(event, index)}
-          tabIndex={0}
-          {...selectProps(rest)}
-          {...themeTokens}
-          fontSize={fontSize ?? themeTokens.fontSize}
-        >
-          {`${num}${index !== numbers.length - 1 ? ',' : ''}`}
-        </StyledSup>
-      ))}
-    </>
-  )
-}
+FootnoteLink.displayName = 'FootnoteLink'
 
 const copyShape = PropTypes.shape({
   a11yLabel: PropTypes.string.isRequired
@@ -125,8 +125,4 @@ FootnoteLink.propTypes = {
   fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }
 
-FootnoteLink.defaultProps = {
-  copy: 'en'
-}
-
 export default FootnoteLink