@telus-uds/components-base 1.3.0 → 1.3.1

package/src/Notification/Notification.jsx

@@ -3,11 +3,20 @@ import { StyleSheet, Text, View } from 'react-native'
 
 import PropTypes from 'prop-types'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, selectTokens, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  selectTokens,
+  variantProp,
+  viewProps
+} from '../utils'
 import ButtonBase from '../Button/ButtonBase'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectContainerStyles = (tokens) => ({ ...tokens })
 
 const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
@@ -82,7 +91,7 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
 const Notification = forwardRef(
-  ({ children, system, dismissible, copy = 'en', tokens, variant }, ref) => {
+  ({ children, system, dismissible, copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isDismissed, setIsDismissed] = useState(false)
     const themeTokens = useThemeTokens('Notification', tokens, variant, { system })
     const getCopy = useCopy({ dictionary, copy })
@@ -102,7 +111,11 @@ const Notification = forwardRef(
 
     // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
     return (
-      <View ref={ref} style={[staticStyles.container, selectContainerStyles(themeTokens)]}>
+      <View
+        ref={ref}
+        style={[staticStyles.container, selectContainerStyles(themeTokens)]}
+        {...selectProps(rest)}
+      >
         {IconComponent && (
           <View style={selectIconContainerStyles(themeTokens)}>
             <IconComponent {...selectIconProps(themeTokens)} />
@@ -129,6 +142,7 @@ const Notification = forwardRef(
 Notification.displayName = 'Notification'
 
 Notification.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Content of the `Notification`.
    */

package/src/Pagination/Pagination.jsx

@@ -2,10 +2,13 @@ import React, { forwardRef } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 
 import {
+  a11yProps,
   componentPropType,
   copyPropTypes,
   getTokensPropType,
+  selectSystemProps,
   variantProp,
+  viewProps,
   withLinkRouter
 } from '../utils'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
@@ -16,6 +19,8 @@ import usePagination from './usePagination'
 import PageButton from './PageButton'
 import SideButton from './SideButton'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight }) =>
   applyTextStyles({
     color,
@@ -35,7 +40,8 @@ const Pagination = forwardRef(
       sideButtonVariant,
       sideButtonTokens,
       LinkRouter,
-      linkRouterProps
+      linkRouterProps,
+      ...rest
     },
     ref
   ) => {
@@ -80,7 +86,7 @@ const Pagination = forwardRef(
           linkRouterProps={linkRouterProps}
         />
       ),
-      ...items.map((child, itemIndex) => {
+      ...items.map((_child, itemIndex) => {
         const buttonLabel = `${itemIndex + 1}`
         const itemProps = getItemProps(itemIndex)
         const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter
@@ -119,7 +125,7 @@ const Pagination = forwardRef(
     ]
 
     return (
-      <View style={staticStyles.container} ref={ref}>
+      <View style={staticStyles.container} ref={ref} {...selectProps(rest)}>
         {buttons
           // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
           .map((element, index) => [element, `page-${index + 1}`])
@@ -138,6 +144,7 @@ PageButton.displayName = 'PageButton'
 Pagination.PageButton = PageButton
 
 Pagination.propTypes = {
+  ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   children: componentPropType('PageButton'),
   copy: copyPropTypes,

package/src/Progress/Progress.jsx

@@ -2,9 +2,10 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { a11yProps } from '../utils/props'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectProgressStyles = ({
   backgroundColor,
@@ -53,7 +54,7 @@ const Progress = forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant)
 
   return (
-    <View ref={ref} style={selectProgressStyles(themeTokens)} {...a11yProps.select(rest)}>
+    <View ref={ref} style={selectProgressStyles(themeTokens)} {...selectProps(rest)}>
       {children}
     </View>
   )
@@ -61,6 +62,7 @@ const Progress = forwardRef(({ children, tokens, variant, ...rest }, ref) => {
 Progress.displayName = 'Progress'
 
 Progress.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use the `children` prop to supply one or several `ProgressBar`s.
    */

package/src/Progress/ProgressBar.jsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import ProgressBarBackground from './ProgressBarBackground'
-import { a11yProps } from '../utils/props'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectBarStyles = (
   { backgroundColor, borderRadius, outlineWidth, outlineColor },
@@ -60,7 +61,7 @@ const ProgressBar = forwardRef(
     } else if (percentage > 100) {
       throw new Error('ProgressBar: `percentage` cannot exceed 100')
     }
-    const accessibilityProps = {
+    const selectedProps = selectProps({
       accessibilityRole: 'progressbar',
       accessibilityValue: {
         min: 0,
@@ -68,14 +69,14 @@ const ProgressBar = forwardRef(
         now: percentage,
         text: `${percentage}%`
       },
-      ...a11yProps.select(rest)
-    }
+      ...rest
+    })
 
     return percentage > 0 ? (
       <View
         ref={ref}
         style={[staticStyles.bar, selectBarStyles(themeTokens, percentage)]}
-        {...accessibilityProps}
+        {...selectedProps}
       >
         {children ?? <ProgressBarBackground variant={variant} />}
       </View>
@@ -85,6 +86,7 @@ const ProgressBar = forwardRef(
 ProgressBar.displayName = 'ProgressBar'
 
 ProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Optional children that can be used to customize the progress bar filling.
    */

package/src/Radio/Radio.jsx

@@ -5,10 +5,19 @@ import { Pressable, StyleSheet, Text, View } from 'react-native'
 import RadioLabel from '../InputLabel/LabelContent'
 import RadioButton, { selectRadioButtonTokens } from './RadioButton'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
-import { getTokensPropType, useInputValue, useUniqueId, variantProp } from '../utils'
-import { a11yProps } from '../utils/props'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useInputValue,
+  useUniqueId,
+  variantProp,
+  viewProps
+} from '../utils'
 import StackView from '../StackView'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectContainerStyles = ({
   containerBackgroundColor,
   containerBorderRadius,
@@ -130,7 +139,6 @@ const Radio = forwardRef(
       // The expected keyboard shortcut for activating a radio is the Space key
       if (event?.key === ' ') handleChange(event)
     }
-    const accessibilityProps = a11yProps.select(rest)
     const uniqueId = useUniqueId('radio')
     const inputId = id ?? uniqueId
 
@@ -142,7 +150,7 @@ const Radio = forwardRef(
         onPress={handleChange}
         accessibilityRole="radio"
         accessibilityState={{ checked: isChecked, disabled: inactive }}
-        {...accessibilityProps}
+        {...selectProps(rest)}
       >
         {({ focused: focus, hovered: hover, pressed }) => {
           const stateTokens = getTokens({ focus, hover, pressed })
@@ -180,7 +188,7 @@ const Radio = forwardRef(
 Radio.displayName = 'Radio'
 
 Radio.propTypes = {
-  ...a11yProps.propTypes,
+  ...selectedSystemPropTypes,
   /**
    * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
    */

package/src/Radio/RadioButton.jsx

@@ -4,7 +4,15 @@ import { Platform, StyleSheet, View } from 'react-native'
 
 import RadioInput from './RadioInput'
 import { applyOuterBorder, resolveThemeTokens, validateThemeTokens } from '../ThemeProvider'
-import { getTokensSetPropType, selectTokens } from '../utils'
+import {
+  a11yProps,
+  getTokensSetPropType,
+  selectSystemProps,
+  selectTokens,
+  viewProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // TODO: roll out a standard approach to token sets
 // https://github.com/telus/universal-design-system/issues/782
@@ -87,7 +95,8 @@ const RadioButton = forwardRef(
       isControlled,
       handleChange,
       name: inputName,
-      value
+      value,
+      ...rest
     },
     ref
   ) => {
@@ -98,7 +107,7 @@ const RadioButton = forwardRef(
     )
 
     return (
-      <View style={selectOuterBorderStyles(themeTokens)}>
+      <View style={selectOuterBorderStyles(themeTokens)} {...selectProps(rest)}>
         <View
           style={[staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)]}
           testID="Radio-Input"
@@ -124,6 +133,7 @@ const RadioButton = forwardRef(
 RadioButton.displayName = 'RadioButton'
 
 RadioButton.propTypes = {
+  ...selectedSystemPropTypes,
   isChecked: PropTypes.bool,
   tokens: getTokensSetPropType(tokenKeys, { allowFunction: true }),
   inactive: PropTypes.bool,

package/src/Radio/RadioGroup.jsx

@@ -4,11 +4,20 @@ import ABBPropTypes from 'airbnb-prop-types'
 
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, useInputValue, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useInputValue,
+  variantProp,
+  viewProps
+} from '../utils'
 import { getStackedContent } from '../StackView'
 import Radio from './Radio'
 import Fieldset from '../Fieldset'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * A group of Radios that behave as a radio group. Use when users select a single choice from mutually
  * exclusive options.
@@ -74,7 +83,8 @@ const RadioGroup = forwardRef(
       onChange,
       readOnly,
       name: inputGroupName,
-      inactive
+      inactive,
+      ...rest
     },
     ref
   ) => {
@@ -125,6 +135,7 @@ const RadioGroup = forwardRef(
         inactive={inactive}
         validation={validation}
         accessibilityRole="radiogroup"
+        {...selectProps(rest)}
       >
         {getStackedContent(radios, { space, direction: 'column' })}
       </Fieldset>
@@ -134,6 +145,7 @@ const RadioGroup = forwardRef(
 RadioGroup.displayName = 'RadioGroup'
 
 RadioGroup.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Optional theme token overrides for the outer RadioGroup component
    */

package/src/RadioCard/RadioCard.jsx

@@ -4,17 +4,21 @@ import { StyleSheet, Text, View } from 'react-native'
 
 import { useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
+  a11yProps,
   getTokensPropType,
-  variantProp,
+  selectSystemProps,
   selectTokens,
   useInputValue,
-  a11yProps,
-  useUniqueId
+  useUniqueId,
+  variantProp,
+  viewProps
 } from '../utils'
 import { PressableCardBase, selectPressableCardTokens } from '../Card'
 import StackView from '../StackView'
 import RadioButton, { selectRadioButtonTokens } from '../Radio/RadioButton'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * A Card that behaves like a radio button. Use when users select a single choice from mutually exclusive options
  * with need to show additional information for each option. The whole card is interactive as one item.
@@ -78,7 +82,6 @@ const RadioCard = forwardRef(
         setIsChecked(true, event)
       }
     }
-    const a11y = a11yProps.select(rest)
     const uniqueId = useUniqueId('RadioCard')
     const inputId = id ?? uniqueId
 
@@ -94,7 +97,7 @@ const RadioCard = forwardRef(
         onPress={handleChange}
         accessibilityRole="radio"
         accessibilityState={{ checked: isChecked, disabled: inactive }}
-        {...a11y}
+        {...selectProps(rest)}
       >
         {(cardState) => {
           const { radioSpace, contentSpace, ...themeTokens } = getTokens(cardState)
@@ -130,7 +133,7 @@ const RadioCard = forwardRef(
 RadioCard.displayName = 'RadioCard'
 
 RadioCard.propTypes = {
-  ...a11yProps.propTypes,
+  ...selectedSystemPropTypes,
   /**
    * Content to be displayed at the top of the card alongside the radio button
    */

package/src/RadioCard/RadioCardGroup.jsx

@@ -3,11 +3,20 @@ import PropTypes from 'prop-types'
 
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, useInputValue, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useInputValue,
+  variantProp,
+  viewProps
+} from '../utils'
 import StackView, { StackWrap } from '../StackView'
 import RadioCard from './RadioCard'
 import Fieldset from '../Fieldset'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * A group of Cards that behave as a radio button group. Use when users select a single choice from mutually
  * exclusive options with need to show additional information for each option. The whole cards are each
@@ -75,7 +84,8 @@ const RadioCardGroup = forwardRef(
       onChange,
       readOnly,
       name: inputGroupName,
-      inactive
+      inactive,
+      ...rest
     },
     ref
   ) => {
@@ -107,8 +117,9 @@ const RadioCardGroup = forwardRef(
         inactive={inactive || readOnly}
         validation={validation}
         accessibilityRole="radiogroup"
+        {...selectProps(rest)}
       >
-        {({ a11yProps }) => (
+        {(props) => (
           <StackContainer space={space} accessibilityRole="radiogroup">
             {items.map(({ title, content, id, onChange: itemOnChange }, index) => {
               const cardId = id || `RadioCard[${index}]`
@@ -128,7 +139,7 @@ const RadioCardGroup = forwardRef(
                   tokens={radioCardTokens}
                   variant={variant}
                   readOnly={readOnly}
-                  {...a11yProps}
+                  {...props}
                 >
                   {content}
                 </RadioCard>
@@ -143,6 +154,7 @@ const RadioCardGroup = forwardRef(
 RadioCardGroup.displayName = 'RadioCardGroup'
 
 RadioCardGroup.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Optional theme token overrides for the outer RadioCardGroup component
    */

package/src/Search/Search.jsx

@@ -3,13 +3,23 @@ import { View, StyleSheet } from 'react-native'
 
 import PropTypes from 'prop-types'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import { getTokensPropType, selectTokens, useSpacingScale, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  selectTokens,
+  useSpacingScale,
+  variantProp,
+  viewProps
+} from '../utils'
 import TextInputBase from '../TextInput/TextInputBase'
 import ButtonBase from '../Button/ButtonBase'
 import StackView from '../StackView'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectInputTokens = ({ searchTokens, buttonTokens, buttonsGapSize }) => {
   const { paddingRight: inputPaddingRight, clearButtonIcon, submitButtonIcon } = searchTokens
   const { paddingLeft = 0, paddingRight = 0, iconSize = 0 } = buttonTokens
@@ -53,7 +63,8 @@ const Search = forwardRef(
       accessibilityLabel,
       copy = 'en',
       tokens,
-      variant
+      variant,
+      ...rest
     },
     ref
   ) => {
@@ -99,7 +110,7 @@ const Search = forwardRef(
     const isEmpty = value === ''
 
     return (
-      <View style={staticStyles.container}>
+      <View style={staticStyles.container} {...selectProps(rest)}>
         <TextInputBase
           ref={ref}
           tokens={(appearances) =>
@@ -161,6 +172,7 @@ const Search = forwardRef(
 Search.displayName = 'Search'
 
 Search.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use this to set the initial value of the search input.
    * Updating `initialValue` will **not** update the actual value.

package/src/Select/Select.jsx

@@ -3,10 +3,24 @@ import React, { forwardRef, useState } from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
-import { componentPropType, getTokensPropType, useInputValue, variantProp } from '../utils'
+import {
+  a11yProps,
+  componentPropType,
+  getTokensPropType,
+  inputSupportsProps,
+  selectSystemProps,
+  useInputValue,
+  variantProp,
+  viewProps
+} from '../utils'
 import Picker from './Picker'
 import InputSupports from '../InputSupports'
-import inputSupportsProps from '../InputSupports/propTypes'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  inputSupportsProps,
+  viewProps
+])
 
 const selectInputStyles = (
   {
@@ -180,7 +194,7 @@ const Select = forwardRef(
     const handleMouseOver = () => setIsHovered(true)
     const handleMouseOut = () => setIsHovered(false)
 
-    const { props: supportsProps } = inputSupportsProps.select(rest)
+    const { props: supportsProps, ...selectedProps } = selectProps(rest)
 
     const themeTokens = useThemeTokens('Select', tokens, variant, {
       focus: isFocused,
@@ -192,8 +206,8 @@ const Select = forwardRef(
     const { icon: IconComponent, validationIcon: ValidationIconComponent } = themeTokens
 
     return (
-      <InputSupports {...supportsProps}>
-        {({ a11yProps, inputId }) => (
+      <InputSupports {...supportsProps} {...selectedProps}>
+        {({ inputId, ...props }) => (
           <View style={selectOuterBorderStyles(themeTokens)}>
             <Picker
               ref={ref}
@@ -208,7 +222,7 @@ const Select = forwardRef(
               placeholder={
                 placeholder !== undefined ? { label: placeholder, value: '' } : undefined
               }
-              {...a11yProps}
+              {...props}
               nativeID={inputId}
               testID={testID}
             >
@@ -243,7 +257,7 @@ const Select = forwardRef(
 Select.displayName = 'Select'
 
 Select.propTypes = {
-  ...inputSupportsProps.types,
+  ...selectedSystemPropTypes,
   /**
    * Initial value for the uncontrolled version.
    */

package/src/SideNav/Item.jsx

@@ -1,11 +1,20 @@
 import React, { forwardRef } from 'react'
 import { Pressable } from 'react-native'
 import PropTypes from 'prop-types'
-
-import { variantProp, getTokensPropType, a11yProps, hrefAttrsProp, linkProps } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  hrefAttrsProp,
+  linkProps,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils'
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider'
 import ItemContent from './ItemContent'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+
 function selectItemStyles({
   backgroundColor,
   borderColor,
@@ -58,7 +67,7 @@ const Item = forwardRef(
     const handlePress = () => onPress(itemId, groupId)
 
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-    const linkPropSet = linkProps.select({
+    const selectedProps = selectProps({
       accessibilityRole,
       href,
       onPress: handlePress,
@@ -79,9 +88,8 @@ const Item = forwardRef(
       <Pressable
         ref={ref}
         style={getPressableStyle}
-        {...linkPropSet}
         accessibilityState={{ selected: isActive }}
-        testID={testID}
+        {...selectedProps}
       >
         {(pressableState) => {
           const themeTokens = getTokens(getAppearanceState(pressableState))
@@ -94,6 +102,7 @@ const Item = forwardRef(
 Item.displayName = 'Item'
 
 Item.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Text content of the `Item`.
    */
@@ -126,8 +135,7 @@ Item.propTypes = {
    */
   isExpanded: PropTypes.bool,
   tokens: getTokensPropType('SideNavItem'),
-  variant: variantProp.propType,
-  ...a11yProps.types
+  variant: variantProp.propType
 }
 
 export default Item

package/src/SideNav/SideNav.jsx

@@ -5,7 +5,14 @@ import ExpandCollapse from '../ExpandCollapse'
 import Item from './Item'
 import ItemsGroup from './ItemsGroup'
 import { useThemeTokens } from '../ThemeProvider'
-import { componentPropType, getTokensPropType, variantProp } from '../utils'
+import {
+  a11yProps,
+  componentPropType,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils'
 
 function selectBorderStyles(tokens) {
   return {
@@ -15,13 +22,15 @@ function selectBorderStyles(tokens) {
   }
 }
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  ## Usage Criteria
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
 const SideNav = forwardRef(
-  ({ children, variant = {}, tokens, accordion = true, itemTokens, groupTokens }, ref) => {
+  ({ children, variant = {}, tokens, accordion = true, itemTokens, groupTokens, ...rest }, ref) => {
     const themeTokens = useThemeTokens('SideNav', tokens, variant)
     const [active, setActive] = useState({ groupId: undefined, itemId: undefined })
 
@@ -38,6 +47,7 @@ const SideNav = forwardRef(
         ref={ref}
         maxOpen={accordion ? 1 : null}
         style={selectBorderStyles(themeTokens)}
+        {...selectProps(rest)}
       >
         {({ openIds, onToggle }) => {
           const renderItem = (item, index, groupId) => {
@@ -97,6 +107,7 @@ const SideNav = forwardRef(
 SideNav.displayName = 'SideNav'
 
 SideNav.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
    */