@telus-uds/components-base 1.3.0 → 1.3.1

package/src/ExpandCollapse/Control.jsx

@@ -3,7 +3,9 @@ import { Pressable, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider'
-import { getTokensPropType, variantProp, a11yProps } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 function selectContainerStyles({
   backgroundColor,
@@ -48,12 +50,15 @@ function selectIconTokens(tokens) {
 }
 
 const ExpandCollapseControl = forwardRef(
-  ({ onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, rest }, ref) => {
+  (
+    { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
+    ref
+  ) => {
     const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
 
-    const a11y = a11yProps.select({ ...rest, accessibilityRole })
-    a11y.accessibilityState = {
-      ...(a11y.accessibilityState || {}),
+    const selectedProps = selectProps({ ...rest, accessibilityRole })
+    selectedProps.accessibilityState = {
+      ...(selectedProps.accessibilityState || {}),
       expanded: isExpanded
     }
 
@@ -68,7 +73,7 @@ const ExpandCollapseControl = forwardRef(
       selectContainerStyles(getControlTokens(pressableState))
 
     return (
-      <Pressable ref={ref} {...a11y} onPress={onPress} style={getPressableStyle}>
+      <Pressable ref={ref} {...selectedProps} onPress={onPress} style={getPressableStyle}>
         {(pressableState) => {
           const { icon: IconComponent, ...themeTokens } = getControlTokens(pressableState)
           return (
@@ -91,7 +96,7 @@ const ExpandCollapseControl = forwardRef(
 ExpandCollapseControl.displayName = 'ExpandCollapseControl'
 
 ExpandCollapseControl.propTypes = {
-  ...a11yProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ExpandCollapseControl'),
   variant: variantProp.propType,
   /**

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -3,7 +3,16 @@ import { View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp, useMultipleInputValues } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useMultipleInputValues,
+  variantProp,
+  viewProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 function selectBorderStyles(tokens) {
   return {
@@ -21,7 +30,7 @@ function selectBorderStyles(tokens) {
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
 const ExpandCollapse = forwardRef(
-  ({ children, tokens, variant, maxOpen, open, initialOpen, onChange }, ref) => {
+  ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, ...rest }, ref) => {
     const {
       currentValues: openIds,
       toggleOneValue: onToggle,
@@ -37,7 +46,7 @@ const ExpandCollapse = forwardRef(
     const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant)
 
     return (
-      <View ref={ref} style={selectBorderStyles(themeTokens)}>
+      <View ref={ref} style={selectBorderStyles(themeTokens)} {...selectProps(rest)}>
         {typeof children === 'function'
           ? children({ openIds, onToggle, resetValues, setValues, unsetValues })
           : children}
@@ -48,6 +57,7 @@ const ExpandCollapse = forwardRef(
 ExpandCollapse.displayName = 'ExpandCollapse'
 
 ExpandCollapse.propTypes = {
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('ExpandCollapse'),
   /**

package/src/ExpandCollapse/Panel.jsx

@@ -4,7 +4,16 @@ import PropTypes from 'prop-types'
 
 import ExpandCollapseControl from './Control'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp, useVerticalExpandAnimation, a11yProps } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useVerticalExpandAnimation,
+  variantProp,
+  viewProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // just void functions for now, since there are no style tokens for a panel or control at this point
 const selectGroupStyles = () => {}
@@ -49,9 +58,9 @@ const ExpandCollapsePanel = forwardRef(
     const [containerHeight, setContainerHeight] = useState(null)
     const isExpanded = openIds.includes(panelId)
 
-    const a11y = a11yProps.select(rest)
-    a11y.accessibilityState = {
-      ...(a11y.accessibilityState || {}),
+    const selectedProps = selectProps(rest)
+    selectedProps.accessibilityState = {
+      ...(selectedProps.accessibilityState || {}),
       expanded: isExpanded
     }
 
@@ -88,7 +97,7 @@ const ExpandCollapsePanel = forwardRef(
     return (
       <View ref={ref} style={selectGroupStyles(themeTokens)}>
         <ExpandCollapseControl
-          {...a11y}
+          {...selectedProps}
           isExpanded={isExpanded}
           tokens={controlTokens}
           onPress={handleControlPress}
@@ -110,6 +119,7 @@ const ExpandCollapsePanel = forwardRef(
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel'
 
 ExpandCollapsePanel.propTypes = {
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('ExpandCollapsePanel'),
   /**

package/src/Feedback/Feedback.jsx

@@ -3,9 +3,18 @@ import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { a11yProps, getTokensPropType, selectTokens, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  selectTokens,
+  variantProp,
+  viewProps
+} from '../utils'
 import StackView from '../StackView'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectStyles = (tokens) => selectTokens('Feedback', tokens)
 
 const selectTitleTextStyles = ({ titleFontSize, ...tokens }) =>
@@ -53,13 +62,13 @@ const Feedback = forwardRef(
     const content =
       typeof children === 'string' ? <Text style={contentTextStyles}>{children}</Text> : children
 
-    const accessibilityProps = a11yProps.select({
+    const selectedProps = selectProps({
       accessibilityRole: validation === 'error' ? 'alert' : undefined,
       ...rest
     })
 
     return (
-      <View ref={ref} style={selectStyles(themeTokens)} {...accessibilityProps} nativeID={id}>
+      <View ref={ref} style={selectStyles(themeTokens)} nativeID={id} {...selectedProps}>
         <StackView space={space}>
           {title !== undefined && (
             <View style={staticStyles.title}>
@@ -82,6 +91,7 @@ const Feedback = forwardRef(
 Feedback.displayName = 'Feedback'
 
 Feedback.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
    */

package/src/Fieldset/Fieldset.jsx

@@ -60,7 +60,7 @@ const Fieldset = forwardRef(
     // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
     // fieldset as much as possible, but also allow different spacing within content and between
     // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
-    const childContent = <>{typeof children === 'function' ? children({ a11yProps }) : children}</>
+    const childContent = <>{typeof children === 'function' ? children(a11yProps) : children}</>
     const orderedContent =
       feedbackPosition === 'bottom'
         ? [legendContent, feedbackContent, childContent]

package/src/HorizontalScroll/HorizontalScroll.jsx

@@ -3,10 +3,18 @@ import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider'
-import { getTokensSetPropType, selectTokens, a11yProps } from '../utils'
+import {
+  a11yProps,
+  getTokensSetPropType,
+  selectSystemProps,
+  selectTokens,
+  viewProps
+} from '../utils'
 import ScrollViewEnd from './ScrollViewEnd'
 import { getItemPositionScrollTarget, itemPositionsPropType } from './itemPositions'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const tokenKeys = [
   'nextIcon',
   'previousIcon',
@@ -22,7 +30,7 @@ export const selectHorizontalScrollTokens = (themeTokens, prefix) =>
  * Base component that scrolls horizontally and displays left and right buttons if
  * there is content to the left and the right which can be scrolled to.
  *
- * @TODO revist `ScrollButton` after IconButton is stable.
+ * @TODO revisit `ScrollButton` after IconButton is stable.
  */
 const HorizontalScroll = forwardRef(
   ({ ScrollButton, tokens, itemPositions, children, ...rest }, ref) => {
@@ -108,8 +116,6 @@ const HorizontalScroll = forwardRef(
     const scrollNext = () => scrollTo(scrollOffset + scrollDistance)
     const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance)
 
-    const a11y = a11yProps.select(rest)
-
     // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
     // Apply a fixed margin gutter that tab highlight effects can overhang without getting trimmed.
     return (
@@ -125,7 +131,7 @@ const HorizontalScroll = forwardRef(
             staticStyles.scrollContainer,
             { marginBottom: gutter, borderBottomWidth, borderBottomColor }
           ]}
-          {...a11y}
+          {...selectProps(rest)}
         >
           {children}
         </ScrollViewEnd>
@@ -159,6 +165,7 @@ const staticStyles = StyleSheet.create({
 })
 
 HorizontalScroll.propTypes = {
+  ...selectedSystemPropTypes,
   itemPositions: itemPositionsPropType,
   ScrollButton: PropTypes.elementType,
   tokens: getTokensSetPropType(tokenKeys, { allowFunction: true }),

package/src/IconButton/IconButton.jsx

@@ -4,18 +4,22 @@ import { Pressable, Platform, StyleSheet, View } from 'react-native'
 
 import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
 import {
-  variantProp,
+  a11yProps,
   clickProps,
+  getTokensPropType,
+  hrefAttrsProp,
   linkProps,
   resolvePressableState,
-  hrefAttrsProp,
-  getTokensPropType,
+  selectSystemProps,
   selectTokens,
+  variantProp,
+  viewProps,
   withLinkRouter
 } from '../utils'
-import { a11yProps } from '../utils/props'
 import Icon from '../Icon'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectOuterStyle = ({
   backgroundColor,
   borderRadius,
@@ -60,7 +64,7 @@ const IconButton = forwardRef(
     ref
   ) => {
     const { onPress, ...rest } = clickProps.toPressProps(rawRest)
-    const a11y = a11yProps.select({
+    const selectedProps = selectProps({
       ...rest,
       accessibilityRole
     })
@@ -77,7 +81,7 @@ const IconButton = forwardRef(
         onPress={handlePress}
         hrefAttrs={hrefAttrs}
         style={getOuterStyle}
-        {...a11y}
+        {...selectedProps}
       >
         {(pressableState) => {
           const themeTokens = getTokens(resolvePressableState(pressableState))
@@ -85,7 +89,7 @@ const IconButton = forwardRef(
             <View style={selectInnerStyle(themeTokens)}>
               <Icon
                 icon={IconComponent}
-                title={a11y.accessibilityLabel}
+                title={selectedProps.accessibilityLabel}
                 tokens={selectTokens('Icon', themeTokens, 'icon')}
               />
             </View>
@@ -98,7 +102,7 @@ const IconButton = forwardRef(
 IconButton.displayName = 'IconButton'
 
 IconButton.propTypes = {
-  ...a11yProps.types,
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
   icon: PropTypes.elementType.isRequired,

package/src/InputLabel/InputLabel.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 LabelContent from './LabelContent'
 import Tooltip from '../Tooltip'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectLabelStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
 
 const selectHintStyles = ({
@@ -28,7 +37,10 @@ const selectHintStyles = ({
 const selectGapStyles = ({ gap }) => ({ marginRight: gap })
 
 const InputLabel = forwardRef(
-  ({ label, forId, hint, hintPosition = 'inline', hintId, tooltip, tokens, variant }, ref) => {
+  (
+    { label, forId, hint, hintPosition = 'inline', hintId, tooltip, tokens, variant, ...rest },
+    ref
+  ) => {
     const themeTokens = useThemeTokens('InputLabel', tokens, variant)
 
     const hasTooltip = tooltip !== undefined
@@ -38,6 +50,7 @@ const InputLabel = forwardRef(
       <View
         ref={ref}
         style={[staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]}
+        {...selectProps(rest)}
       >
         <Text
           style={[selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]}
@@ -69,6 +82,7 @@ const InputLabel = forwardRef(
 InputLabel.displayName = 'InputLabel'
 
 InputLabel.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The input label.
    */

package/src/InputSupports/InputSupports.jsx

@@ -30,7 +30,7 @@ const InputSupports = forwardRef(
             forId={inputId}
           />
         )}
-        {typeof children === 'function' ? children({ a11yProps, inputId }) : children}
+        {typeof children === 'function' ? children({ inputId, ...a11yProps }) : children}
         {feedback && <Feedback id={feedbackId} title={feedback} validation={validation} />}
       </StackView>
     )

package/src/Link/LinkBase.jsx

@@ -3,11 +3,13 @@ import PropTypes from 'prop-types'
 import { Text, Platform, StyleSheet } from 'react-native'
 import {
   a11yProps,
+  clickProps,
+  getTokensPropType,
   hrefAttrsProp,
-  variantProp,
   linkProps,
-  getTokensPropType,
-  clickProps
+  selectSystemProps,
+  variantProp,
+  viewProps
 } from '../utils/props'
 import { resolvePressableTokens } from '../utils/pressability'
 import { withLinkRouter } from '../utils'
@@ -16,6 +18,8 @@ import InlinePressable from './InlinePressable'
 import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+
 const selectOuterBorderStyles = ({
   outerBorderColor,
   outerBorderWidth,
@@ -101,14 +105,13 @@ const LinkBase = forwardRef(
       tokens = {},
       children,
       accessibilityRole = 'link',
-      dataSet,
       ...rawRest
     },
     ref
   ) => {
     const { onPress, ...props } = clickProps.toPressProps(rawRest)
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-    const linkPropSet = linkProps.select({
+    const selectedProps = selectProps({
       accessibilityRole,
       href,
       onPress: linkProps.handleHref({ href, onPress }),
@@ -124,9 +127,8 @@ const LinkBase = forwardRef(
 
     return (
       <InlinePressable
-        {...linkPropSet}
+        {...selectedProps}
         ref={ref}
-        dataSet={dataSet}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
@@ -164,8 +166,7 @@ const LinkBase = forwardRef(
 LinkBase.displayName = 'LinkBase'
 
 LinkBase.propTypes = {
-  ...a11yProps.types,
-  ...linkProps.types,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
   variant: variantProp.propType,
   /**

package/src/List/List.jsx

@@ -1,17 +1,24 @@
 import React, { cloneElement, forwardRef, Children } from 'react'
 import { View, Platform } from 'react-native'
 import PropTypes from 'prop-types'
-import { getTokensPropType, variantProp, componentPropType } from '../utils'
-import { a11yProps } from '../utils/props'
+import {
+  a11yProps,
+  componentPropType,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils'
 import ListItem from './ListItem'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
 const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
   const accessibilityRole = Platform.select({ web: 'list', default: 'none' })
-  const a11y = a11yProps.select(rest)
   const items = Children.map(children, (child, index) => {
     if (child.type.name === ListItem.name) {
       return cloneElement(child, {
@@ -25,7 +32,7 @@ const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, re
   })
 
   return (
-    <View ref={ref} accessibilityRole={accessibilityRole} {...a11y}>
+    <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
       {items}
     </View>
   )
@@ -33,7 +40,7 @@ const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, re
 List.displayName = 'List'
 
 List.propTypes = {
-  ...a11yProps.types,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
   children: componentPropType('ListItem'),

package/src/List/ListItem.jsx

@@ -2,7 +2,16 @@ import React, { forwardRef } from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
-import { getTokensPropType, variantProp, wrapStringsInText } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  wrapStringsInText
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
   width: itemBulletWidth,
@@ -53,7 +62,10 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
  * ListItem is responsible for rendering icon or a bullet as side item
  */
 const ListItem = forwardRef(
-  ({ tokens, variant, icon, iconColor, iconSize, showDivider, children, isLastItem }, ref) => {
+  (
+    { tokens, variant, icon, iconColor, iconSize, showDivider, children, isLastItem, ...rest },
+    ref
+  ) => {
     const themeTokens = useThemeTokens('List', tokens, variant)
 
     const itemStyles = selectItemStyles(themeTokens)
@@ -118,6 +130,7 @@ const ListItem = forwardRef(
         ref={ref}
         style={[staticStyles.itemContainer, getContainerStyle()]}
         accessibilityRole={accessibilityRole}
+        {...selectProps(rest)}
       >
         {renderMarker()}
         {renderItem()}
@@ -137,6 +150,7 @@ const staticStyles = StyleSheet.create({
 })
 
 ListItem.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
   children: PropTypes.node.isRequired,

package/src/Modal/Modal.jsx

@@ -9,11 +9,21 @@ import {
 
 import PropTypes from 'prop-types'
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, useCopy, copyPropTypes, variantProp } from '../utils'
+import {
+  a11yProps,
+  copyPropTypes,
+  getTokensPropType,
+  selectSystemProps,
+  useCopy,
+  variantProp,
+  viewProps
+} from '../utils'
 import { useViewport } from '../ViewportProvider'
 import ButtonBase from '../Button/ButtonBase'
 import dictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectContainerStyles = ({
   containerPaddingLeft,
   containerPaddingRight,
@@ -79,72 +89,75 @@ const selectCloseIconProps = ({ closeIconSize, closeIconColor }) => ({
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-const Modal = forwardRef(({ children, isOpen, onClose, maxWidth, tokens, variant, copy }, ref) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
+const Modal = forwardRef(
+  ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, ...rest }, ref) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
 
-  const { closeIcon: CloseIconComponent } = themeTokens
+    const { closeIcon: CloseIconComponent } = themeTokens
 
-  const getCopy = useCopy({ dictionary, copy })
-  const closeLabel = getCopy('closeButton')
+    const getCopy = useCopy({ dictionary, copy })
+    const closeLabel = getCopy('closeButton')
 
-  const handleClose = () => {
-    if (typeof onClose === 'function') onClose()
-  }
+    const handleClose = () => {
+      if (typeof onClose === 'function') onClose()
+    }
 
-  const handleKeyUp = (event) => {
-    if (event.key === 'Escape') onClose()
-  }
+    const handleKeyUp = (event) => {
+      if (event.key === 'Escape') onClose()
+    }
 
-  if (!isOpen) {
-    return null
-  }
+    if (!isOpen) {
+      return null
+    }
 
-  // TODO: replace the close button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
-  return (
-    <NativeModal transparent>
-      <View style={[staticStyles.positioningContainer]}>
-        <View
-          style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
-          pointerEvents="box-none" // don't capture backdrop press events
-        >
+    // TODO: replace the close button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
+    return (
+      <NativeModal transparent {...selectProps(rest)}>
+        <View style={[staticStyles.positioningContainer]}>
           <View
-            ref={ref}
-            style={[staticStyles.modal, selectModalStyles(themeTokens)]}
-            onKeyUp={handleKeyUp}
+            style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
+            pointerEvents="box-none" // don't capture backdrop press events
           >
             <View
-              style={[
-                staticStyles.closeButtonContainer,
-                selectCloseButtonContainerStyles(themeTokens)
-              ]}
+              ref={ref}
+              style={[staticStyles.modal, selectModalStyles(themeTokens)]}
+              onKeyUp={handleKeyUp}
             >
-              <ButtonBase
-                onPress={handleClose}
-                accessibilityRole="button"
-                accessibilityLabel={closeLabel}
+              <View
+                style={[
+                  staticStyles.closeButtonContainer,
+                  selectCloseButtonContainerStyles(themeTokens)
+                ]}
               >
-                {
-                  // TODO: add close button interactive states after IconButton is done
-                  () => <CloseIconComponent {...selectCloseIconProps(themeTokens)} />
-                }
-              </ButtonBase>
+                <ButtonBase
+                  onPress={handleClose}
+                  accessibilityRole="button"
+                  accessibilityLabel={closeLabel}
+                >
+                  {
+                    // TODO: add close button interactive states after IconButton is done
+                    () => <CloseIconComponent {...selectCloseIconProps(themeTokens)} />
+                  }
+                </ButtonBase>
+              </View>
+              {children}
             </View>
-            {children}
           </View>
+          {/* when a modal becomes open its first focusable element is being automatically focused */}
+          {/* and we prefer the close button over backdrop */}
+          <TouchableWithoutFeedback onPress={handleClose}>
+            <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
+          </TouchableWithoutFeedback>
         </View>
-        {/* when a modal becomes open its first focusable element is being automatically focused */}
-        {/* and we prefer the close button over backdrop */}
-        <TouchableWithoutFeedback onPress={handleClose}>
-          <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
-        </TouchableWithoutFeedback>
-      </View>
-    </NativeModal>
-  )
-})
+      </NativeModal>
+    )
+  }
+)
 Modal.displayName = 'Modal'
 
 Modal.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   copy: copyPropTypes,
   isOpen: PropTypes.bool,