@telus-uds/components-base 1.83.0 → 1.85.0

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { View, StyleSheet } from 'react-native'
@@ -41,278 +41,289 @@ const selectDividerToknes = ({ dividerColor, width, decorative = true, weight =
   weight
 })
 
-const MultiSelectFilter = ({
-  label,
-  subtitle,
-  id = label,
-  variant,
-  tokens,
-  items = [],
-  values,
-  maxHeight = false,
-  initialValues,
-  maxValues,
-  onChange,
-  onConfirm = () => {},
-  onCancel = () => {},
-  copy = 'en',
-  readOnly = false,
-  inactive = false,
-  rowLimit = 12,
-  dictionary = defaultDictionary,
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const { currentValues, setValues } = useMultipleInputValues({
-    initialValues,
-    values,
-    maxValues,
-    onChange,
-    readOnly
-  })
-  const [isOpen, setIsOpen] = useState(false)
-  const [checkedIds, setCheckedIds] = useState(currentValues ?? [])
-  const [maxWidth, setMaxWidth] = useState(false)
-
-  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant)
-  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
-  const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
-  const getCopy = useCopy({ dictionary, copy })
-  const colSizeNotMobile = items.length > rowLimit ? 2 : 1
-  const colSize = viewport !== 'xs' ? colSizeNotMobile : 1
-  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit
-  const isSelected = currentValues.length > 0
-  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length
+const MultiSelectFilter = React.forwardRef(
+  (
+    {
+      label,
+      subtitle,
+      id = label,
+      variant,
+      tokens,
+      items = [],
+      values,
+      maxHeight = false,
+      initialValues,
+      maxValues,
+      onChange,
+      onConfirm = () => {},
+      onCancel = () => {},
+      copy = 'en',
+      readOnly = false,
+      inactive = false,
+      rowLimit = 12,
+      dictionary = defaultDictionary,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const { currentValues, setValues } = useMultipleInputValues({
+      initialValues,
+      values,
+      maxValues,
+      onChange,
+      readOnly
+    })
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [checkedIds, setCheckedIds] = React.useState(currentValues ?? [])
+    const [maxWidth, setMaxWidth] = React.useState(false)
 
-  useEffect(() => {
-    if (colSize === 1) return setMaxWidth(false)
-    return colSize === 2 && setMaxWidth(true)
-  }, [colSize])
+    const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant)
+    const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
+    const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
+    const getCopy = useCopy({ dictionary, copy })
+    const colSizeNotMobile = items.length > rowLimit ? 2 : 1
+    const colSize = viewport !== 'xs' ? colSizeNotMobile : 1
+    const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit
+    const isSelected = currentValues.length > 0
+    const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length
 
-  useEffect(() => setCheckedIds(currentValues ?? []), [currentValues])
+    React.useEffect(() => {
+      if (colSize === 1) return setMaxWidth(false)
+      return colSize === 2 && setMaxWidth(true)
+    }, [colSize])
 
-  const {
-    headerFontColor,
-    headerFontSize,
-    buttonDirection,
-    headerFontWeight,
-    headerLineHeight,
-    subHeaderFontWeight,
-    subHeaderFontSize,
-    maxHeightSize,
-    maxWidthSize,
-    subHeaderLineHeight,
-    minHeight,
-    minWidth
-  } = useThemeTokens('MultiSelectFilter', tokens, { ...variant, maxHeight, maxWidth }, { viewport })
+    React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues])
 
-  const uniqueFields = ['id', 'label']
-  if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`)
-  }
-  // Pass an object of relevant component state as first argument for any passed-in press handlers
-  const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
+    const {
+      headerFontColor,
+      headerFontSize,
+      buttonDirection,
+      headerFontWeight,
+      headerLineHeight,
+      subHeaderFontWeight,
+      subHeaderFontSize,
+      maxHeightSize,
+      maxWidthSize,
+      subHeaderLineHeight,
+      minHeight,
+      minWidth
+    } = useThemeTokens(
+      'MultiSelectFilter',
+      tokens,
+      { ...variant, maxHeight, maxWidth },
+      { viewport }
+    )
 
-  const handleChange = (event) => {
-    if (pressHandlers.onPress) pressHandlers?.onPress(event)
-    setIsOpen(!isOpen)
-  }
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`)
+    }
+    // Pass an object of relevant component state as first argument for any passed-in press handlers
+    const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
-  const onApply = (e) => {
-    setValues(e)
-    setIsOpen(false)
-    onConfirm(e)
-  }
+    const handleChange = (event) => {
+      if (pressHandlers.onPress) pressHandlers?.onPress(event)
+      setIsOpen(!isOpen)
+    }
 
-  const onClear = () => {
-    setCheckedIds(() => [])
-    setValues([])
-    setIsOpen(false)
-    onCancel()
-  }
+    const onApply = (e) => {
+      setValues(e)
+      setIsOpen(false)
+      onConfirm(e)
+    }
 
-  const onClose = () => {
-    setIsOpen(false)
-    onCancel()
-  }
+    const onClear = () => {
+      setCheckedIds(() => [])
+      setValues([])
+      setIsOpen(false)
+      onCancel()
+    }
 
-  const { align, offsets } = useResponsiveProp({
-    xs: { align: { top: 'top', left: 'left' } },
-    sm: {
-      align: { top: 'bottom', left: 'left' },
-      offsets: { vertical: 4 }
+    const onClose = () => {
+      setIsOpen(false)
+      onCancel()
     }
-  })
 
-  const headerStyles = applyTextStyles({
-    fontSize: headerFontSize,
-    fontWeight: headerFontWeight,
-    fontColor: headerFontColor
-  })
+    const { align, offsets } = useResponsiveProp({
+      xs: { align: { top: 'top', left: 'left' } },
+      sm: {
+        align: { top: 'bottom', left: 'left' },
+        offsets: { vertical: 4 }
+      }
+    })
 
-  const subeHeaderStyles = applyTextStyles({
-    fontSize: subHeaderFontSize,
-    fontWeight: subHeaderFontWeight,
-    fontColor: selectSubTitleTokens(themeTokens)
-  })
+    const headerStyles = applyTextStyles({
+      fontSize: headerFontSize,
+      fontWeight: headerFontWeight,
+      fontColor: headerFontColor
+    })
 
-  const { overlaidPosition, onTargetLayout, isReady, sourceRef } = useOverlaidPosition({
-    isShown: isOpen,
-    offsets,
-    align
-  })
+    const subeHeaderStyles = applyTextStyles({
+      fontSize: subHeaderFontSize,
+      fontWeight: subHeaderFontWeight,
+      fontColor: selectSubTitleTokens(themeTokens)
+    })
 
-  return (
-    <>
-      <ButtonDropdown
-        ref={sourceRef}
-        key={id}
-        {...pressHandlers}
-        value={isOpen}
-        selected={isSelected}
-        label={label}
-        onChange={handleChange}
-        tokens={getButtonTokens}
-        inactive={inactive}
-      />
-      {isOpen && viewport === 'xs' && (
-        <Modal isOpen={isOpen} onClose={onClose}>
-          <Row>
-            <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
-              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
-            </Typography>
-          </Row>
-          {subtitle && (
-            <>
-              <Spacer space={5} />
-              <Row>
-                <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
-                  {subtitle}
-                </Typography>
-              </Row>
-            </>
-          )}
-          <Spacer space={4} />
-          <Box scroll={true}>
-            <Row distribute="between">
-              {[...Array(colSize).keys()].map((i) => (
-                <Col xs={12 / colSize} key={i}>
-                  <CheckboxGroup
-                    items={items.slice(i * rowLength, (i + 1) * rowLength)}
-                    checkedIds={checkedIds}
-                    onChange={(e) => setCheckedIds(e, i)}
-                  />
-                  <Spacer size={4} />
-                </Col>
-              ))}
-            </Row>
-          </Box>
-          <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
-          <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
-            <StackView
-              direction={buttonDirection}
-              space={3}
-              tokens={{
-                alignItems: 'center',
-                ...(viewport === 'xs' && { flexGrow: 1 })
-              }}
-            >
-              <Button
-                onPress={() => onApply(checkedIds)}
-                variant={{
-                  size: 'small',
-                  priority: 'high',
-                  ...(viewport === 'xs' && { width: 'full' })
-                }}
-              >
-                {getCopy('applyButtonLabel')}
-              </Button>
-              <Box>
-                <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
-              </Box>
-            </StackView>
-          </Row>
-        </Modal>
-      )}
-      {isOpen && viewport !== 'xs' && (
-        <ModalOverlay
-          overlaidPosition={overlaidPosition}
-          onClose={onClose}
-          maxHeight={maxHeight}
-          maxHeightSize={maxHeightSize}
-          maxWidthSize={maxWidthSize}
-          minHeight={minHeight}
-          minWidth={minWidth}
-          tokens={{
-            ...tokens,
-            maxWidth
-          }}
-          copy={copy}
-          isReady={isReady}
-          onLayout={onTargetLayout}
-        >
-          <Row>
-            <View style={styles.textContainerStyle}>
+    const { overlaidPosition, onTargetLayout, isReady, sourceRef } = useOverlaidPosition({
+      isShown: isOpen,
+      offsets,
+      align
+    })
+
+    return (
+      <>
+        <ButtonDropdown
+          ref={sourceRef}
+          key={id}
+          {...pressHandlers}
+          value={isOpen}
+          selected={isSelected}
+          label={label}
+          onChange={handleChange}
+          tokens={getButtonTokens}
+          inactive={inactive}
+        />
+        {isOpen && viewport === 'xs' && (
+          <Modal isOpen={isOpen} onClose={onClose} ref={ref}>
+            <Row>
               <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
                 {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
               </Typography>
-            </View>
-          </Row>
-          {subtitle && (
-            <>
-              <Spacer space={5} />
-              <Row>
-                <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
-                  {subtitle}
-                </Typography>
+            </Row>
+            {subtitle && (
+              <>
+                <Spacer space={5} />
+                <Row>
+                  <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
+                    {subtitle}
+                  </Typography>
+                </Row>
+              </>
+            )}
+            <Spacer space={4} />
+            <Box scroll={true}>
+              <Row distribute="between">
+                {[...Array(colSize).keys()].map((i) => (
+                  <Col xs={12 / colSize} key={i}>
+                    <CheckboxGroup
+                      items={items.slice(i * rowLength, (i + 1) * rowLength)}
+                      checkedIds={checkedIds}
+                      onChange={(e) => setCheckedIds(e, i)}
+                    />
+                    <Spacer size={4} />
+                  </Col>
+                ))}
               </Row>
-            </>
-          )}
-          <Spacer space={4} />
-          <Box scroll={true}>
-            <Row distribute="between">
-              {[...Array(colSize).keys()].map((i) => (
-                <Col xs={12 / colSize} key={i}>
-                  <CheckboxGroup
-                    items={items.slice(i * rowLength, (i + 1) * rowLength)}
-                    checkedIds={checkedIds}
-                    onChange={(e) => setCheckedIds(e, i)}
-                  />
-                  <Spacer size={4} />
-                </Col>
-              ))}
+            </Box>
+            <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
+            <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
+              <StackView
+                direction={buttonDirection}
+                space={3}
+                tokens={{
+                  alignItems: 'center',
+                  ...(viewport === 'xs' && { flexGrow: 1 })
+                }}
+              >
+                <Button
+                  onPress={() => onApply(checkedIds)}
+                  variant={{
+                    size: 'small',
+                    priority: 'high',
+                    ...(viewport === 'xs' && { width: 'full' })
+                  }}
+                >
+                  {getCopy('applyButtonLabel')}
+                </Button>
+                <Box>
+                  <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
+                </Box>
+              </StackView>
+            </Row>
+          </Modal>
+        )}
+        {isOpen && viewport !== 'xs' && (
+          <ModalOverlay
+            overlaidPosition={overlaidPosition}
+            onClose={onClose}
+            maxHeight={maxHeight}
+            maxHeightSize={maxHeightSize}
+            maxWidthSize={maxWidthSize}
+            minHeight={minHeight}
+            minWidth={minWidth}
+            tokens={{
+              ...tokens,
+              maxWidth
+            }}
+            copy={copy}
+            isReady={isReady}
+            onLayout={onTargetLayout}
+            ref={ref}
+          >
+            <Row>
+              <View style={styles.textContainerStyle}>
+                <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
+                  {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+                </Typography>
+              </View>
             </Row>
-          </Box>
-          <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
-          <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
-            <StackView
-              direction={buttonDirection}
-              space={3}
-              tokens={{
-                alignItems: 'center',
-                ...(viewport === 'xs' && { flexGrow: 1 })
-              }}
-            >
-              <Button
-                onPress={() => onApply(checkedIds)}
-                variant={{
-                  size: 'small',
-                  priority: 'high',
-                  ...(viewport === 'xs' && { width: 'full' })
+            {subtitle && (
+              <>
+                <Spacer space={5} />
+                <Row>
+                  <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
+                    {subtitle}
+                  </Typography>
+                </Row>
+              </>
+            )}
+            <Spacer space={4} />
+            <Box scroll={true}>
+              <Row distribute="between">
+                {[...Array(colSize).keys()].map((i) => (
+                  <Col xs={12 / colSize} key={i}>
+                    <CheckboxGroup
+                      items={items.slice(i * rowLength, (i + 1) * rowLength)}
+                      checkedIds={checkedIds}
+                      onChange={(e) => setCheckedIds(e, i)}
+                    />
+                    <Spacer size={4} />
+                  </Col>
+                ))}
+              </Row>
+            </Box>
+            <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
+            <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
+              <StackView
+                direction={buttonDirection}
+                space={3}
+                tokens={{
+                  alignItems: 'center',
+                  ...(viewport === 'xs' && { flexGrow: 1 })
                 }}
               >
-                {getCopy('applyButtonLabel')}
-              </Button>
-              <Box>
-                <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
-              </Box>
-            </StackView>
-          </Row>
-        </ModalOverlay>
-      )}
-    </>
-  )
-}
+                <Button
+                  onPress={() => onApply(checkedIds)}
+                  variant={{
+                    size: 'small',
+                    priority: 'high',
+                    ...(viewport === 'xs' && { width: 'full' })
+                  }}
+                >
+                  {getCopy('applyButtonLabel')}
+                </Button>
+                <Box>
+                  <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
+                </Box>
+              </StackView>
+            </Row>
+          </ModalOverlay>
+        )}
+      </>
+    )
+  }
+)
 
 MultiSelectFilter.displayName = 'MultiSelectFilter'
 

package/src/Notification/Notification.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -223,9 +223,9 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => (
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = forwardRef(
+const Notification = React.forwardRef(
   ({ children, system, dismissible, copy = 'en', tokens, variant, ...rest }, ref) => {
-    const [isDismissed, setIsDismissed] = useState(false)
+    const [isDismissed, setIsDismissed] = React.useState(false)
     const viewport = useViewport()
     const getCopy = useCopy({ dictionary, copy })
 
@@ -235,7 +235,7 @@ const Notification = forwardRef(
     const themeTokens = useTokens('Notification', tokens, variant, { system, viewport })
     const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
 
-    const notificationComponentRef = useRef({
+    const notificationComponentRef = React.useRef({
       containerStyles: {},
       contentContainerStyles: {},
       staticContentContainerStyles: {},
@@ -245,7 +245,7 @@ const Notification = forwardRef(
       selectIconPropsStyles: {},
       selectDismissIconPropsStyles: {}
     })
-    const mediaIdsRef = useRef({
+    const mediaIdsRef = React.useRef({
       containerIds: {},
       contentContainerIds: {},
       staticContentContainerIds: {},

package/src/OrderedList/Item.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 
@@ -59,8 +59,8 @@ const selectItemContentStyles = ({ interItemMargin, ...themeTokens }, isLastChil
   marginBottom: !isLastChild ? interItemMargin : 0
 })
 
-const Item = forwardRef(
-  ({ children, index, isLastChild, title, tokens, variant, ...rest }, ref) => {
+const Item = React.forwardRef(
+  ({ children, index, isLastChild, title, tokens = {}, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('OrderedList', tokens, variant)
     const headingTokens = title && {
       lineHeight: themeTokens.itemLineHeight,
@@ -125,7 +125,7 @@ Item.propTypes = {
   /**
    * Item tokens
    */
-  tokens: getTokensPropType('List'),
+  tokens: getTokensPropType('OrderedList'),
   /**
    * Item variant
    */
@@ -134,8 +134,6 @@ Item.propTypes = {
 
 Item.displayName = 'OrderedListItem'
 
-Item.defaultProps = { title: undefined, tokens: {} }
-
 export default Item
 
 const staticStyles = StyleSheet.create({

package/src/OrderedList/ItemBase.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'
 
@@ -10,7 +10,7 @@ const getAccessibilityRole = () =>
     web: 'listitem'
   })
 
-const Item = forwardRef(({ children, style, ...rest }, ref) => (
+const Item = React.forwardRef(({ children, style, ...rest }, ref) => (
   <View
     accessibilityRole={getAccessibilityRole()}
     ref={ref}

package/src/OrderedList/OrderedList.jsx

@@ -1,14 +1,14 @@
-import React, { forwardRef, useMemo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
-import { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils'
+import { htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
 
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
-  const childrenWithParentVariants = useMemo(() => {
+const OrderedList = React.forwardRef(({ children, start = 1, variant = {}, ...rest }, ref) => {
+  const childrenWithParentVariants = React.useMemo(() => {
     const addVariantToProps = (child, i, isLastChild) => {
       const existingChildVariants = child.props?.variant ?? {}
       return React.cloneElement(child, {
@@ -37,7 +37,6 @@ const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
 
 OrderedList.propTypes = {
   ...selectedSystemPropsTypes,
-  tokens: getTokensPropType('OrderedList'),
   /**
    * A list of ordered items wrapped in `OrderedList.Item`.
    */
@@ -49,8 +48,6 @@ OrderedList.propTypes = {
   variant: variantProp.propType
 }
 
-OrderedList.defaultProps = { start: 1, tokens: {}, variant: {} }
-
 OrderedList.displayName = 'OrderedList'
 
 OrderedList.Item = Item