@telus-uds/components-base 1.3.0 → 1.3.1

package/src/Skeleton/Skeleton.jsx

@@ -3,10 +3,19 @@ import { Animated, Platform } from 'react-native'
 import propTypes from 'prop-types'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, useSpacingScale, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useSpacingScale,
+  variantProp,
+  viewProps
+} from '../utils'
 import useSkeletonNativeAnimation from './useSkeletonNativeAnimation'
 import skeletonWebAnimation from './skeletonWebAnimation'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectSkeletonStyles = ({ color, radius, fadeAnimation }) => ({
   backgroundColor: color,
   borderRadius: radius,
@@ -27,62 +36,65 @@ const selectSquareStyles = ({ radius }) => ({
   borderRadius: radius
 })
 
-const Skeleton = forwardRef(({ tokens, variant, size, characters, lines, shape = 'line' }, ref) => {
-  const themeTokens = useThemeTokens('Skeleton', tokens, variant)
-  const skeletonHeight = useSpacingScale(size || themeTokens.size)
-  const nativeAnimation = useSkeletonNativeAnimation()
+const Skeleton = forwardRef(
+  ({ tokens, variant, size, characters, lines, shape = 'line', ...rest }, ref) => {
+    const themeTokens = useThemeTokens('Skeleton', tokens, variant)
+    const skeletonHeight = useSpacingScale(size || themeTokens.size)
+    const nativeAnimation = useSkeletonNativeAnimation()
+
+    const getAnimationBaseOnPlatform = () => {
+      if (Platform.OS !== 'web') {
+        return nativeAnimation
+      }
 
-  const getAnimationBaseOnPlatform = () => {
-    if (Platform.OS !== 'web') {
-      return nativeAnimation
+      return skeletonWebAnimation
     }
 
-    return skeletonWebAnimation
-  }
+    const getLineWidth = () => {
+      if (characters) {
+        return characters * themeTokens.baseWidth
+      }
 
-  const getLineWidth = () => {
-    if (characters) {
-      return characters * themeTokens.baseWidth
+      return themeTokens.characters * themeTokens.baseWidth
     }
 
-    return themeTokens.characters * themeTokens.baseWidth
-  }
+    const getStyledBasedOnShape = () => {
+      if (shape === 'circle') {
+        return selectShapeStyles({ skeletonHeight })
+      }
 
-  const getStyledBasedOnShape = () => {
-    if (shape === 'circle') {
-      return selectShapeStyles({ skeletonHeight })
-    }
+      if (shape === 'box') {
+        return [
+          selectShapeStyles({ skeletonHeight }),
+          selectSquareStyles({ radius: themeTokens.squareRadius })
+        ]
+      }
 
-    if (shape === 'box') {
-      return [
-        selectShapeStyles({ skeletonHeight }),
-        selectSquareStyles({ radius: themeTokens.squareRadius })
-      ]
+      return selectLineStyles({ skeletonHeight, lineWidth: getLineWidth() })
     }
 
-    return selectLineStyles({ skeletonHeight, lineWidth: getLineWidth() })
+    const renderSkeleton = (index = 0) => (
+      <Animated.View
+        testID="skeleton"
+        key={`skeleton-${index + 1}`}
+        style={[
+          selectSkeletonStyles({ ...themeTokens, fadeAnimation: getAnimationBaseOnPlatform() }),
+          getStyledBasedOnShape()
+        ]}
+      />
+    )
+
+    return (
+      <StackView space={themeTokens.spaceBetweenLines} ref={ref} {...selectProps(rest)}>
+        {lines > 1 ? [...Array(lines)].map((_, index) => renderSkeleton(index)) : renderSkeleton()}
+      </StackView>
+    )
   }
-
-  const renderSkeleton = (index = 0) => (
-    <Animated.View
-      testID="skeleton"
-      key={`skeleton-${index + 1}`}
-      style={[
-        selectSkeletonStyles({ ...themeTokens, fadeAnimation: getAnimationBaseOnPlatform() }),
-        getStyledBasedOnShape()
-      ]}
-    />
-  )
-
-  return (
-    <StackView space={themeTokens.spaceBetweenLines} ref={ref}>
-      {lines > 1 ? [...Array(lines)].map((_, index) => renderSkeleton(index)) : renderSkeleton()}
-    </StackView>
-  )
-})
+)
 Skeleton.displayName = 'Skeleton'
 
 Skeleton.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Skeleton'),
   variant: variantProp.propType,
   size: propTypes.number,

package/src/Spacer/Spacer.jsx

@@ -1,13 +1,15 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
+import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils'
 
-import { useSpacingScale, spacingProps } from '../utils'
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  */
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectSizeStyle = (size, direction) => ({
   // Only apply space in one direction at a time, else large spacers will increase the
   // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
@@ -54,16 +56,16 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-const Spacer = forwardRef(({ space = 1, direction = 'column', testID, dataSet }, ref) => {
+const Spacer = forwardRef(({ space = 1, direction = 'column', ...rest }, ref) => {
   const size = useSpacingScale(space)
   const sizeStyle = selectSizeStyle(size, direction)
-  return (
-    <View ref={ref} testID={testID} style={[staticStyles.stretch, sizeStyle]} dataSet={dataSet} />
-  )
+
+  return <View ref={ref} style={[staticStyles.stretch, sizeStyle]} {...selectProps(rest)} />
 })
 Spacer.displayName = 'Spacer'
 
 Spacer.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The size of the spacer according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
@@ -76,17 +78,7 @@ Spacer.propTypes = {
    * - `'column'` (default) applies space vertically; has a fixed height and not width.
    * - `'row'` applies space horizontally; has a fixed width and not height.
    */
-  direction: PropTypes.oneOf(['column', 'row']),
-  /**
-   * @ignore
-   */
-  dataSet: PropTypes.object,
-  /**
-   * @ignore
-   * In tests, the only way to select Spacers is with testID prop and getByTestId, since they have no content,
-   * no accessibility role, and there is no equivalent of nextSibling in React Native Testing Library.
-   */
-  testID: PropTypes.string
+  direction: PropTypes.oneOf(['column', 'row'])
 }
 
 const staticStyles = StyleSheet.create({

package/src/StackView/StackView.jsx

@@ -4,21 +4,24 @@ import { View } from 'react-native'
 
 import Divider from '../Divider'
 import {
-  spacingProps,
   a11yProps,
+  getA11yPropsFromHtmlTag,
   getTokensPropType,
+  layoutTags,
   responsiveProps,
-  variantProp,
-  viewProps,
+  selectSystemProps,
+  spacingProps,
   useResponsiveProp,
-  getA11yPropsFromHtmlTag,
-  layoutTags
+  variantProp,
+  viewProps
 } from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import getStackedContent from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * StackView evenly spaces its children, by default placing `Spacer` components between them.
  *
@@ -78,17 +81,16 @@ const StackView = forwardRef(
   ) => {
     const viewport = useViewport()
     const direction = useResponsiveProp(directionProp, 'column')
-    const props = {
+    const selectedProps = selectProps({
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...a11yProps.select(rest),
-      ...viewProps.select(rest)
-    }
+      ...rest
+    })
     const content = getStackedContent(children, { direction, divider, space })
     const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
     const flexStyles = selectFlexStyles(themeTokens)
 
     return (
-      <View ref={ref} {...props} style={[flexStyles, staticStyles[direction]]}>
+      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction]]}>
         {content}
       </View>
     )
@@ -97,8 +99,7 @@ const StackView = forwardRef(
 StackView.displayName = 'StackView'
 
 StackView.propTypes = {
-  ...a11yProps.propTypes,
-  ...viewProps.types,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('StackView'),
   variant: variantProp.propType,
   /**

package/src/StackView/StackWrapBox.jsx

@@ -1,23 +1,25 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
-
 import {
-  spacingProps,
   a11yProps,
+  getA11yPropsFromHtmlTag,
   getTokensPropType,
+  layoutTags,
   responsiveProps,
+  selectSystemProps,
+  spacingProps,
   useSpacingScale,
   useResponsiveProp,
-  viewProps,
-  getA11yPropsFromHtmlTag,
-  layoutTags
+  viewProps
 } from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import getStackedContent from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const offsetSides = {
   row: 'marginBottom',
   column: 'marginRight'
@@ -64,11 +66,10 @@ const StackWrapBox = forwardRef(
     const direction = useResponsiveProp(directionProp, 'row')
     const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
     const flexStyles = selectFlexStyles(themeTokens)
-    const props = {
+    const selectedProps = selectProps({
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...a11yProps.select(rest),
-      ...viewProps.select(rest)
-    }
+      ...rest
+    })
 
     // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
     const gapSize = useSpacingScale(gap)
@@ -79,7 +80,7 @@ const StackWrapBox = forwardRef(
     return (
       <View
         ref={ref}
-        {...props}
+        {...selectedProps}
         style={[flexStyles, staticStyles.wrap, staticStyles[direction], offsetStyle]}
       >
         {content}
@@ -90,8 +91,7 @@ const StackWrapBox = forwardRef(
 StackWrapBox.displayName = 'StackWrapBox'
 
 StackWrapBox.propTypes = {
-  ...a11yProps.propTypes,
-  ...viewProps.types,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('StackView'),
   /**
    * Sets the `flexDirection` of the container

package/src/StackView/StackWrapGap.jsx

@@ -4,16 +4,19 @@ import { View } from 'react-native'
 import StackWrapBox from './StackWrapBox'
 import {
   a11yProps,
+  getA11yPropsFromHtmlTag,
+  selectSystemProps,
   useSpacingScale,
   useResponsiveProp,
-  viewProps,
-  getA11yPropsFromHtmlTag
+  viewProps
 } from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import getStackedContent from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
+const [selectProps] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * The primary implementation of StackWrap.
  *
@@ -42,11 +45,10 @@ const StackWrapGap = forwardRef(
     const direction = useResponsiveProp(directionProp, 'row')
     const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
     const flexStyles = selectFlexStyles(themeTokens)
-    const props = {
+    const selectedProps = selectProps({
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...a11yProps.select(rest),
-      ...viewProps.select(rest)
-    }
+      ...rest
+    })
 
     const size = useSpacingScale(space)
     const gapStyle = { gap: size }
@@ -56,7 +58,7 @@ const StackWrapGap = forwardRef(
     return (
       <View
         ref={ref}
-        {...props}
+        {...selectedProps}
         style={[flexStyles, staticStyles.wrap, staticStyles[direction], gapStyle]}
       >
         {content}

package/src/StepTracker/Step.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
-
 import StackView from '../StackView'
 import Icon from '../Icon'
-import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import { applyTextStyles } from '../ThemeProvider'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectCompletedIconTokens = ({ completedIconColor, completedIconSize }) => ({
   size: completedIconSize,
   color: completedIconColor
@@ -117,7 +118,7 @@ const getStepTestID = (isCompleted, isCurrent) => {
 /**
  * A single step of a StepTracker.
  */
-const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens }) => {
+const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, ...rest }) => {
   const { completedIcon, showStepLabel, showStepName, ...themeTokens } = tokens
   const isFirst = stepIndex === 0
   const isLast = stepIndex === stepCount - 1
@@ -131,7 +132,8 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens })
       tokens={{ alignItems: 'stretch', flexGrow: 1 }}
       accessibilityLabel={label}
       accessibilityLevel={2}
-      accessibilityCurrent={status === stepIndex ? 'true' : 'false'}
+      accessibilityCurrent={status === stepIndex}
+      {...selectProps(rest)}
     >
       <StackView direction="row" space={0} tokens={{ alignItems: 'center', flexGrow: 0 }}>
         <View
@@ -178,6 +180,7 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens })
 }
 
 Step.propTypes = {
+  ...selectedSystemPropTypes,
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   status: PropTypes.number.isRequired,

package/src/StepTracker/StepTracker.jsx

@@ -1,17 +1,16 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
-
 import StackView from '../StackView'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
-import { a11yProps } from '../utils/props'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import useCopy from '../utils/useCopy'
-
 import Step from './Step'
 import defaultDictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectContainerStyles = ({
   containerPaddingBottom,
   containerPaddingLeft,
@@ -101,7 +100,7 @@ const StepTracker = forwardRef(
       .replace('%{stepCount}', steps.length)
       .replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1])
     if (!steps.length) return null
-    const accessibilityProps = {
+    const selectedProps = selectProps({
       accessibilityLabel: stepTrackerLabel,
       accessibilityLevel: 1,
       accessibilityRole: 'progressbar',
@@ -111,11 +110,11 @@ const StepTracker = forwardRef(
         now: current,
         text: steps[current]
       },
-      ...a11yProps.select(rest)
-    }
+      ...rest
+    })
 
     return (
-      <View ref={ref} style={selectContainerStyles(themeTokens)} {...accessibilityProps}>
+      <View ref={ref} style={selectContainerStyles(themeTokens)} {...selectedProps}>
         <StackView space={0}>
           <View style={staticStyles.stepsContainer}>
             {steps.map((label, index) => {
@@ -150,6 +149,7 @@ const StepTracker = forwardRef(
 StepTracker.displayName = 'StepTracker'
 
 StepTracker.propTypes = {
+  ...selectedSystemPropTypes,
   current: PropTypes.number,
   copy: PropTypes.oneOf(['en', 'fr']),
   dictionary: PropTypes.shape({

package/src/Tabs/Tabs.jsx

@@ -1,16 +1,26 @@
 import React, { forwardRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
-
 import { useThemeTokens } from '../ThemeProvider'
 import StackView from '../StackView'
-import { getTokensPropType, variantProp, useHash, useInputValue, withLinkRouter } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useHash,
+  useInputValue,
+  variantProp,
+  viewProps,
+  withLinkRouter
+} from '../utils'
 import HorizontalScroll, {
   horizontalScrollUtils,
   HorizontalScrollButton
 } from '../HorizontalScroll'
 import TabsItem from './TabsItem'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const { selectHorizontalScrollTokens, useItemPositions } = horizontalScrollUtils
 
 /**
@@ -29,7 +39,8 @@ const Tabs = forwardRef(
       onChange,
       items = [],
       LinkRouter,
-      linkRouterProps
+      linkRouterProps,
+      ...rest
     },
     ref
   ) => {
@@ -58,6 +69,7 @@ const Tabs = forwardRef(
         tokens={selectHorizontalScrollTokens(themeTokens)}
         scrollButtonTokens={scrollButtonTokens}
         accessibilityRole="tablist"
+        {...selectProps(rest)}
       >
         <StackView space={space} direction="row">
           {items.map(
@@ -102,6 +114,7 @@ const Tabs = forwardRef(
 Tabs.displayName = 'Tabs'
 
 Tabs.propTypes = {
+  ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
   items: PropTypes.arrayOf(
     PropTypes.shape({

package/src/Tabs/TabsItem.jsx

@@ -4,18 +4,22 @@ import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import {
+  a11yProps,
+  clickProps,
+  getTokensPropType,
+  linkProps,
   resolvePressableTokens,
+  selectSystemProps,
   selectTokens,
   variantProp,
-  getTokensPropType,
-  linkProps,
-  a11yProps,
-  clickProps,
+  viewProps,
   withLinkRouter
 } from '../utils'
 import Spacer from '../Spacer'
 import { horizontalScrollUtils } from '../HorizontalScroll'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const { itemPositionsPropType, getItemPositionLayoutHandler } = horizontalScrollUtils
 
 const selectHighlightBarStyles = ({
@@ -115,11 +119,11 @@ const TabsItem = forwardRef(
           }
         : undefined
 
-    const a11y = {
+    const selectedProps = selectProps({
       accessibilityRole,
       accessibilityState,
-      ...a11yProps.select(rest)
-    }
+      ...rest
+    })
 
     useEffect(() => {
       // If this is selected while off-screen, scroll it into view
@@ -145,7 +149,7 @@ const TabsItem = forwardRef(
         href={href}
         style={getPressableStyle}
         onLayout={handleLayout}
-        {...a11y}
+        {...selectedProps}
       >
         {(pressableState) => {
           const { space, textAlign, ...themeTokens } = resolveTokens(pressableState)
@@ -185,7 +189,7 @@ const TabsItem = forwardRef(
 TabsItem.displayName = 'TabsItem'
 
 TabsItem.propTypes = {
-  ...a11yProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('TabsItem'),
   variant: variantProp.propType,
   onPress: PropTypes.func,

package/src/Tags/Tags.jsx

@@ -8,10 +8,20 @@ import Icon from '../Icon'
 import { StackWrap, getStackedContent } from '../StackView'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/props'
+import {
+  a11yProps,
+  getTokensPropType,
+  pressProps,
+  selectSystemProps,
+  selectTokens,
+  variantProp,
+  viewProps
+} from '../utils/props'
 import { useMultipleInputValues } from '../utils/input'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+
 const selectIconTextTokens = ({
   icon,
   iconPosition,
@@ -79,14 +89,20 @@ const Tags = forwardRef(
       readOnly
     })
 
-    const a11y = a11yProps.select({
+    const selectedProps = selectProps({
       accessibilityRole,
       ...rest
     })
     const itemA11yRole = 'checkbox'
 
     return (
-      <StackWrap ref={ref} {...a11y} space={space} direction={direction} tokens={stackTokens}>
+      <StackWrap
+        ref={ref}
+        {...selectedProps}
+        space={space}
+        direction={direction}
+        tokens={stackTokens}
+      >
         {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
           const isSelected = currentValues.includes(id)
 
@@ -155,8 +171,7 @@ const Tags = forwardRef(
 Tags.displayName = 'Tags'
 
 Tags.propTypes = {
-  ...a11yProps.propTypes,
-  ...pressProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Tags'),
   variant: variantProp.propType,
   /**