@telus-uds/components-base 1.84.0 → 1.85.0

package/src/CardGroup/CardGroup.jsx

@@ -0,0 +1,249 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  a11yProps,
+  focusHandlerProps,
+  containUniqueFields,
+  selectSystemProps,
+  useMultipleInputValues,
+  useInputValue,
+  useCopy,
+  viewProps,
+  variantProp,
+  getTokensPropType,
+  copyPropTypes
+} from '../utils'
+import defaultDictionary from './dictionary'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import StackView, { StackWrap } from '../StackView'
+import Card from '../Card'
+import Fieldset from '../Fieldset'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
+const uniqueFields = ['id']
+
+const CardGroup = React.forwardRef(
+  (
+    {
+      copy = 'en',
+      tokens = {},
+      variant = {},
+      items = [],
+      validation,
+      feedback,
+      initialCheckedIds,
+      checkedIds,
+      onChange,
+      role = 'radiogroup',
+      isInactive,
+      name: inputGroupName,
+      dictionary = defaultDictionary,
+      ...rest
+    },
+    ref
+  ) => {
+    const getCopy = useCopy({ dictionary, copy })
+    const viewport = useViewport()
+    const cardGroupTokens = useThemeTokens('CardGroup', tokens, variant, { viewport })
+    const {
+      space,
+      fieldSpace,
+      direction,
+      showIcon,
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
+    } = cardGroupTokens
+
+    const borderTokens = {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    }
+
+    const singleSelection = role === 'radiogroup'
+
+    const inputControl = {
+      value: checkedIds,
+      initialValue: initialCheckedIds,
+      onChange,
+      readOnly: isInactive
+    }
+    const singleInputValue = useInputValue(inputControl)
+    const multipleInputValues = useMultipleInputValues(inputControl)
+
+    const StackContainer = direction === 'row' ? StackWrap : StackView
+
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`CardGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
+    const handleChange = React.useCallback(
+      (checked, event, cardId, itemOnChange) => {
+        if (checked && singleSelection) {
+          singleInputValue.setValue(cardId, event)
+        } else {
+          multipleInputValues.toggleOneValue(cardId, event)
+        }
+        return itemOnChange?.(checked, event)
+      },
+      [singleInputValue, multipleInputValues, singleSelection]
+    )
+
+    return (
+      <Fieldset
+        copy={copy}
+        ref={ref}
+        name={inputGroupName}
+        space={fieldSpace}
+        feedback={feedback}
+        validation={validation}
+        tokens={borderTokens}
+        inactive={isInactive}
+        showErrorBorder
+        showIcon={showIcon}
+        accessibilityRole={role}
+        {...selectProps(rest)}
+      >
+        {(props) => (
+          <StackContainer space={space}>
+            {items.map(
+              ({ id, interactiveCard, card, onPress: itemOnChange, ...itemRest }, index) => {
+                const cardId = id || `${getCopy('prefixId')}[${index}]`
+                const itemHandleChange = (checked, event) =>
+                  handleChange(checked, event, cardId, itemOnChange)
+
+                return (
+                  <Card
+                    id={cardId}
+                    key={cardId}
+                    onPress={itemHandleChange}
+                    interactiveCard={{
+                      ...interactiveCard,
+                      tokens: {
+                        paddingTop,
+                        paddingBottom,
+                        paddingLeft,
+                        paddingRight,
+                        ...interactiveCard?.tokens
+                      },
+                      variant: {
+                        isControl: true,
+                        selected: singleSelection
+                          ? singleInputValue.currentValue === cardId
+                          : multipleInputValues.currentValues.includes(cardId),
+                        inactive: isInactive
+                      },
+                      selectionType: role
+                    }}
+                    {...selectItemProps(itemRest)}
+                    {...props}
+                  >
+                    {card?.body}
+                  </Card>
+                )
+              }
+            )}
+          </StackContainer>
+        )}
+      </Fieldset>
+    )
+  }
+)
+
+CardGroup.displayName = 'CardGroup'
+
+const dictionaryContentShape = PropTypes.shape({
+  prefixId: PropTypes.string.isRequired
+})
+
+CardGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Optional theme token overrides for the outer RadioCardGroup component
+   */
+  tokens: getTokensPropType('CardGroup'),
+  /**
+   * Theme variants, shared between both RadioCardGroup and RadioCard
+   */
+  variant: variantProp.propType,
+  /**
+   * Array of objects containing specifics for each Card to be rendered in the group.
+   */
+  items: PropTypes.arrayOf(
+    PropTypes.exact({
+      ...selectedItemPropTypes,
+      id: PropTypes.string,
+      interactiveCard: PropTypes.object,
+      card: PropTypes.object,
+      onPress: PropTypes.func
+    })
+  ),
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: PropTypes.oneOf(['error', 'success']),
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: PropTypes.string,
+  /**
+   * If provided, the card with this id is selected on first render.
+   * If the role is radiogroup, it's a string
+   * If the role is checkbox, it's a array of string.
+   * Can have 'null' as value
+   */
+  initialCheckedIds: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  /**
+   * If not undefined, the card with this id is selected (or none is selected if `null`), and the
+   * element's selection state will be controlled by its parent using the `onChange` function.
+   * If the role is radiogroup, it's a string
+   * If the role is checkbox, it's a array of string.
+   * Can have 'null' as value
+   */
+  checkedIds: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  /**
+   * Function to call on change in selection state. Is required if the selection state is controlled
+   * by a parent using checkedId and the input is not readOnly.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Renders the card group like a radio card group or a checkbox card group
+   */
+  role: PropTypes.oneOf(['radiogroup', 'checkbox']),
+  /**
+   * If true, the card cannot be interacted with, elements are set as `disabled` and if the
+   * theme supports `inactive` appearances rules, these are applied.
+   */
+  isInactive: PropTypes.bool,
+  /**
+   * On Web, this is passed to the `name` attribute of the fieldset and each input.
+   */
+  name: PropTypes.string
+}
+
+export default CardGroup

package/src/CardGroup/dictionary.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    prefixId: 'Card'
+  },
+  fr: {
+    prefixId: 'Carte'
+  }
+}

package/src/CardGroup/index.js

@@ -0,0 +1,3 @@
+import CardGroup from './CardGroup'
+
+export default CardGroup

package/src/Carousel/Carousel.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react'
+import React from 'react'
 import { View, Animated, PanResponder, StyleSheet, Platform, Dimensions } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
@@ -170,7 +170,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = forwardRef(
+const Carousel = React.forwardRef(
   (
     {
       tokens,
@@ -230,45 +230,46 @@ const Carousel = forwardRef(
       showPanelTabs,
       spaceBetweenSlideAndPreviousNextNavigation
     } = themeTokens
-    const [activeIndex, setActiveIndex] = useState(0)
-    const activeIndexRef = useRef(activeIndex)
+    const [activeIndex, setActiveIndex] = React.useState(0)
+    const activeIndexRef = React.useRef(activeIndex)
     const { reduceMotionEnabled } = useA11yInfo()
-    const reduceMotionRef = useRef(reduceMotionEnabled)
+    const reduceMotionRef = React.useRef(reduceMotionEnabled)
     const [containerLayout, setContainerLayout] = React.useState({
       x: 0,
       y: 0,
       width: 0
     })
-    const containerLayoutRef = useRef(containerLayout)
-
-    const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = useState(0)
-    const firstFocusRef = useRef(null)
-    const pan = useRef(new Animated.ValueXY()).current
-    const animatedX = useRef(0)
-    const animatedY = useRef(0)
-    const [isAnimating, setIsAnimating] = useState(false)
+    const containerLayoutRef = React.useRef(containerLayout)
+
+    const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] =
+      React.useState(0)
+    const firstFocusRef = React.useRef(null)
+    const pan = React.useRef(new Animated.ValueXY()).current
+    const animatedX = React.useRef(0)
+    const animatedY = React.useRef(0)
+    const [isAnimating, setIsAnimating] = React.useState(false)
     /**
      * While having the same starting point, `isAutoPlayEnabled` and `isCarouselPlaying` are different states
      *
      * `isAutoPlayEnabled` is a state to determine if the autoplay feature is enabled or disabled
      * `isCarouselPlaying` is a state to determine if the carousel is currently playing or paused
      */
-    const [isAutoPlayEnabled, setIsAutoPlayEnabled] = useState(autoPlayFeatureEnabled)
-    const [isCarouselPlaying, setisCarouselPlaying] = useState(autoPlayFeatureEnabled)
-    const isSwiping = useRef(false)
-    const autoPlayRef = useRef(null)
+    const [isAutoPlayEnabled, setIsAutoPlayEnabled] = React.useState(autoPlayFeatureEnabled)
+    const [isCarouselPlaying, setisCarouselPlaying] = React.useState(autoPlayFeatureEnabled)
+    const isSwiping = React.useRef(false)
+    const autoPlayRef = React.useRef(null)
 
     const isFirstSlide = !activeIndex
     const isLastSlide = activeIndex + 1 >= childrenArray.length
 
-    const handleAnimationStart = useCallback(
+    const handleAnimationStart = React.useCallback(
       (...args) => {
         if (typeof onAnimationStart === 'function') onAnimationStart(...args)
         setIsAnimating(true)
       },
       [onAnimationStart]
     )
-    const handleAnimationEnd = useCallback(
+    const handleAnimationEnd = React.useCallback(
       (...args) => {
         if (typeof onAnimationEnd === 'function') onAnimationEnd(...args)
         setIsAnimating(false)
@@ -276,7 +277,7 @@ const Carousel = forwardRef(
       [onAnimationEnd]
     )
 
-    const updateOffset = useCallback(() => {
+    const updateOffset = React.useCallback(() => {
       animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1
       animatedY.current = 0
       pan.setOffset({
@@ -286,7 +287,7 @@ const Carousel = forwardRef(
       pan.setValue({ x: 0, y: 0 })
     }, [pan, animatedX])
 
-    const animate = useCallback(
+    const animate = React.useCallback(
       (toValue, toIndex) => {
         const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
         if (reduceMotionRef.current || isSwiping.current) {
@@ -311,13 +312,19 @@ const Carousel = forwardRef(
       [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled]
     )
 
-    const stopAutoplay = useCallback(() => {
+    const stopAutoplay = React.useCallback(() => {
       if (autoPlayRef?.current) {
         clearTimeout(autoPlayRef?.current)
       }
     }, [])
 
-    const updateIndex = useCallback(
+    const triggerRefocus = React.useCallback(() => {
+      if (refocus && Platform.OS === 'web') {
+        firstFocusRef.current?.focus({ preventScroll: true, focusVisible: false })
+      }
+    }, [refocus, firstFocusRef])
+
+    const updateIndex = React.useCallback(
       (delta = 1, transitionMode) => {
         const toValue = { x: 0, y: 0 }
         let skipChanges = !delta
@@ -354,7 +361,7 @@ const Carousel = forwardRef(
               updateOffset()
               handleAnimationStart(activeIndexRef.current)
               updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC)
-              if (refocus) firstFocusRef.current?.focus()
+              triggerRefocus()
             }, Math.abs(slideDuration) * 1000)
           }
         }
@@ -363,7 +370,7 @@ const Carousel = forwardRef(
       },
       [
         handleAnimationStart,
-        refocus,
+        triggerRefocus,
         slideDuration,
         updateOffset,
         animate,
@@ -375,19 +382,19 @@ const Carousel = forwardRef(
       ]
     )
 
-    const startAutoplay = useCallback(() => {
+    const startAutoplay = React.useCallback(() => {
       stopAutoplay()
       if (isAutoPlayEnabled) {
         autoPlayRef.current = setTimeout(() => {
           updateOffset()
           handleAnimationStart(activeIndexRef.current)
           updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC)
-          if (refocus && Platform.OS === 'web') firstFocusRef.current?.focus()
+          triggerRefocus()
         }, Math.abs(slideDuration) * 1000)
       }
     }, [
       handleAnimationStart,
-      refocus,
+      triggerRefocus,
       updateIndex,
       updateOffset,
       slideDuration,
@@ -395,36 +402,36 @@ const Carousel = forwardRef(
       isAutoPlayEnabled
     ])
 
-    const fixOffsetAndGo = useCallback(
+    const fixOffsetAndGo = React.useCallback(
       (delta, transitionMode) => {
         updateOffset()
         handleAnimationStart(activeIndexRef.current)
         updateIndex(delta, transitionMode)
-        if (refocus && Platform.OS === 'web') firstFocusRef.current?.focus()
+        triggerRefocus()
       },
-      [updateIndex, updateOffset, handleAnimationStart, refocus]
+      [updateIndex, updateOffset, handleAnimationStart, triggerRefocus]
     )
 
-    const goToNeighboring = useCallback(
+    const goToNeighboring = React.useCallback(
       (toPrev = false, transitionMode = TRANSITION_MODES.MANUAL) => {
         fixOffsetAndGo(toPrev ? -1 : 1, transitionMode)
       },
       [fixOffsetAndGo]
     )
 
-    useEffect(() => {
+    React.useEffect(() => {
       activeIndexRef.current = activeIndex
     }, [activeIndex])
 
-    useEffect(() => {
+    React.useEffect(() => {
       reduceMotionRef.current = reduceMotionEnabled
     }, [reduceMotionEnabled])
 
-    useEffect(() => {
+    React.useEffect(() => {
       containerLayoutRef.current = containerLayout
     }, [containerLayout])
 
-    useEffect(() => {
+    React.useEffect(() => {
       pan.x.addListener(({ value }) => {
         animatedX.current = value
       })
@@ -441,7 +448,7 @@ const Carousel = forwardRef(
       }
     }, [pan.x, pan.y, startAutoplay, stopAutoplay, isCarouselPlaying])
 
-    useEffect(() => {
+    React.useEffect(() => {
       const subscription = Dimensions.addEventListener('change', () => {
         updateOffset()
       })
@@ -455,13 +462,13 @@ const Carousel = forwardRef(
       }
     }, [updateOffset])
 
-    useEffect(() => {
+    React.useEffect(() => {
       setIsAutoPlayEnabled(
         autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1
       )
     }, [autoPlay, slideDuration, transitionDuration, childrenArray.length])
 
-    useEffect(() => {
+    React.useEffect(() => {
       return () => {
         stopAutoplay()
       }
@@ -479,7 +486,7 @@ const Carousel = forwardRef(
       }
     }) => setPreviousNextNavigationButtonWidth(width)
 
-    const isSwipeAllowed = useCallback(() => {
+    const isSwipeAllowed = React.useCallback(() => {
       if (childrenArray.length === 1) {
         return false
       }
@@ -489,7 +496,7 @@ const Carousel = forwardRef(
       return true
     }, [viewport, childrenArray.length])
 
-    const panResponder = useMemo(
+    const panResponder = React.useMemo(
       () =>
         PanResponder.create({
           onPanResponderTerminationRequest: () => false,
@@ -547,15 +554,15 @@ const Carousel = forwardRef(
       ]
     )
 
-    const goToNext = useCallback(() => {
+    const goToNext = React.useCallback(() => {
       goToNeighboring()
     }, [goToNeighboring])
 
-    const goToPrev = useCallback(() => {
+    const goToPrev = React.useCallback(() => {
       goToNeighboring(true)
     }, [goToNeighboring])
 
-    const goTo = useCallback(
+    const goTo = React.useCallback(
       (index = 0) => {
         const delta = index - activeIndexRef.current
         if (delta) {
@@ -574,7 +581,7 @@ const Carousel = forwardRef(
       inverse: variant?.inverse
     }
 
-    const getCopyWithPlaceholders = useCallback(
+    const getCopyWithPlaceholders = React.useCallback(
       (copyKey) => {
         const copyText = getCopy(copyKey)
           .replace(/%\{title\}/g, title)
@@ -629,7 +636,7 @@ const Carousel = forwardRef(
       ...(isFirstFocusContainer && { ref: containerRef, focusable: true })
     }
 
-    const onAnimationControlButtonPress = useCallback(() => {
+    const onAnimationControlButtonPress = React.useCallback(() => {
       if (isCarouselPlaying) {
         stopAutoplay()
       } else {
@@ -651,7 +658,16 @@ const Carousel = forwardRef(
         width={containerLayout.width}
       >
         <View
-          style={staticStyles.root}
+          style={[
+            staticStyles.root,
+            {
+              ...Platform.select({
+                web: {
+                  outline: 'none'
+                }
+              })
+            }
+          ]}
           onLayout={onContainerLayout}
           ref={ref}
           {...systemProps}
@@ -827,7 +843,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating changed index (either 1, or -1)
    * Use it as follows:
    * ```js
-   *    const onIndexChangedCallback = useCallback((changedIndex, currentActiveIndex) => {
+   *    const onIndexChangedCallback = React.useCallback((changedIndex, currentActiveIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -836,7 +852,7 @@ Carousel.propTypes = {
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
-   * Caution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues
+   * Caution: Always consider wrapping your callback for `onIndexChanged` in `React.useCallback` in order to avoid bugs and performance issues
    */
   onIndexChanged: PropTypes.func,
   /**
@@ -878,7 +894,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating the current slide index before animation starts
    * Use it as follows:
    * ```js
-   *    const onAnimationStartCallback = useCallback((currentIndex) => {
+   *    const onAnimationStartCallback = React.useCallback((currentIndex) => {
    *      console.log(currentIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -887,7 +903,7 @@ Carousel.propTypes = {
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
-   * Caution: Always consider wrapping your callback for `onAnimationStart` in `useCallback` in order to avoid bugs and performance issues
+   * Caution: Always consider wrapping your callback for `onAnimationStart` in `React.useCallback` in order to avoid bugs and performance issues
    */
   onAnimationStart: PropTypes.func,
   /**
@@ -895,7 +911,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating the updated slide index after animation ends
    * Use it as follows:
    * ```js
-   *    const onAnimationEndCallback = useCallback((changedIndex) => {
+   *    const onAnimationEndCallback = React.useCallback((changedIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -904,7 +920,7 @@ Carousel.propTypes = {
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
-   * Caution: Always consider wrapping your callback for `onAnimationEnd` in `useCallback` in order to avoid bugs and performance issues
+   * Caution: Always consider wrapping your callback for `onAnimationEnd` in `React.useCallback` in order to avoid bugs and performance issues
    */
   onAnimationEnd: PropTypes.func,
   /**

package/src/Carousel/CarouselFirstFocus/CarouselFirstFocus.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Pressable, Platform, StyleSheet } from 'react-native'
 import { PropTypes } from 'prop-types'
 
@@ -10,7 +10,7 @@ import { useCarousel } from '../CarouselContext'
  *
  * @TODO rework this after integrating with SkipLink when available.
  */
-const CarouselFirstFocus = forwardRef(({ title }, ref) => {
+const CarouselFirstFocus = React.forwardRef(({ title }, ref) => {
   const { getCopyWithPlaceholders } = useCarousel()
 
   // TODO: integrate skip link description if behaving as skip link.

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -17,26 +17,28 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselItem = ({ children, elementIndex, tag = 'li', hidden, ...rest }) => {
-  const { width, activeIndex } = useCarousel()
+const CarouselItem = React.forwardRef(
+  ({ children, elementIndex, tag = 'li', hidden, ...rest }, ref) => {
+    const { width, activeIndex } = useCarousel()
 
-  const selectedProps = selectProps({
-    ...rest,
-    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
-  })
+    const selectedProps = selectProps({
+      ...rest,
+      ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
+    })
 
-  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps
-  const style = { width }
-  if (hidden && Platform.OS === 'web') {
-    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
-    style.visibility = 'hidden'
+    const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps
+    const style = { width }
+    if (hidden && Platform.OS === 'web') {
+      // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
+      style.visibility = 'hidden'
+    }
+    return (
+      <View style={style} {...selectedProps} {...focusabilityProps} ref={ref}>
+        {children}
+      </View>
+    )
   }
-  return (
-    <View style={style} {...selectedProps} {...focusabilityProps}>
-      {children}
-    </View>
-  )
-}
+)
 
 CarouselItem.propTypes = {
   ...selectedSystemPropTypes,