@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/src/FlexGrid/{Row/Row.jsx → FlexGridRow/FlexGridRow.jsx}

@@ -1,10 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import applyInheritance from '../helpers'
-import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils'
-import { useTheme } from '../../ThemeProvider'
-import { useViewport } from '../../ViewportProvider'
+import { applyInheritance } from '../helpers'
+import { BaseView } from '../../utils/BaseView/BaseView'
+import { StyleSheet, createMediaQueryStyles } from '../../utils/ssr-media-query/ssr-media-query'
+import { useTheme } from '../../ThemeProvider/useTheme'
+import { useViewport } from '../../ViewportProvider/useViewport'
 
 const horizontalAlignStyles = (horizontalAlign) => {
   switch (horizontalAlign) {
@@ -52,7 +53,7 @@ const distributeStyles = (distribute) => {
   }
 }
 
-const Row = React.forwardRef(
+export const FlexGridRow = React.forwardRef(
   (
     {
       horizontalAlign,
@@ -134,9 +135,9 @@ const Row = React.forwardRef(
     )
   }
 )
-Row.displayName = 'Row'
+FlexGridRow.displayName = 'FlexGridRow'
 
-Row.propTypes = {
+FlexGridRow.propTypes = {
   /**
    * Align columns horizontally within their row.
    */
@@ -171,5 +172,3 @@ Row.propTypes = {
   xlReverse: PropTypes.bool,
   children: PropTypes.node.isRequired
 }
-
-export default Row

package/src/FlexGrid/helpers/index.js

@@ -1,4 +1,4 @@
-const applyInheritance = (sizes) => {
+export const applyInheritance = (sizes) => {
   let prevSize
   return sizes.map((size, index) => {
     if (size !== undefined) {
@@ -12,5 +12,3 @@ const applyInheritance = (sizes) => {
     return undefined
   })
 }
-
-export default applyInheritance

package/src/FlexGrid/providers/GutterContext.jsx

@@ -1,5 +1,3 @@
 import React from 'react'
 
-const GutterContext = React.createContext(false)
-
-export default GutterContext
+export const GutterContext = React.createContext(false)

package/src/Footnote/Footnote.jsx

@@ -11,13 +11,19 @@ import {
   ScrollView
 } from 'react-native'
 
-import defaultDictionary from './dictionary'
-import { getTokensPropType, htmlAttrs, selectSystemProps, useCopy, viewProps } from '../utils'
-import { useViewport } from '../ViewportProvider'
-import { useTheme, useThemeTokens } from '../ThemeProvider'
-import Typography from '../Typography'
-import Icon from '../Icon'
-import OrderedList from '../OrderedList'
+import { dictionary as defaultDictionary } from './dictionary'
+import { getTokensPropType } from '../utils/props/tokens'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useCopy } from '../utils/useCopy'
+import { viewProps } from '../utils/props/viewProps'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { Typography } from '../Typography/Typography'
+import { Icon } from '../Icon/Icon'
+import { OrderedList } from '../OrderedList/OrderedList'
+import { OrderedListItem } from '../OrderedList/OrderedListItem'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
@@ -123,7 +129,7 @@ const selectCustomContentFontStyle = ({
  * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
  * - When `Footnote` is closed, focus must return to the initiating element
  */
-const Footnote = React.forwardRef(
+export const Footnote = React.forwardRef(
   (
     {
       copy = 'en',
@@ -161,9 +167,9 @@ const Footnote = React.forwardRef(
 
       return (
         <OrderedList start={number}>
-          <OrderedList.Item key={number}>
+          <OrderedListItem key={number}>
             <Text style={selectCustomContentFontStyle(themeTokens)}>{content}</Text>
-          </OrderedList.Item>
+          </OrderedListItem>
         </OrderedList>
       )
     }, [content, number, themeTokens])
@@ -297,8 +303,6 @@ Footnote.propTypes = {
   })
 }
 
-export default Footnote
-
 const staticStyles = StyleSheet.create({
   container: {
     flex: 1

package/src/Footnote/FootnoteLink.jsx

@@ -1,16 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform, TouchableWithoutFeedback } from 'react-native'
-import dictionary from './dictionary'
-import {
-  htmlAttrs,
-  selectSystemProps,
-  useCopy,
-  viewProps,
-  wrapStringsInText,
-  variantProp
-} from '../utils'
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { dictionary } from './dictionary'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useCopy } from '../utils/useCopy'
+import { viewProps } from '../utils/props/viewProps'
+import { wrapStringsInText } from '../utils/children'
+import { variantProp } from '../utils/props/variantProp'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
@@ -31,7 +30,7 @@ const selectTextStyle = ({ fontSize, lineHeight }) => ({
   })
 })
 
-const FootnoteLink = React.forwardRef(
+export const FootnoteLink = React.forwardRef(
   ({ copy = 'en', content = [], onClick, tokens, variant = {}, ...rest }, ref) => {
     const themeTokens = useThemeTokens('FootnoteLink', tokens, variant)
     const textStyles = applyTextStyles(themeTokens)
@@ -97,8 +96,6 @@ FootnoteLink.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
-export default FootnoteLink
-
 const staticStyles = StyleSheet.create({
   text: {
     position: 'relative',

package/src/Footnote/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     a11yLabel: 'Read legal footnote',
     close: 'close',

package/src/HorizontalScroll/HorizontalScroll.jsx

@@ -2,17 +2,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
-import { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider'
+import { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider/utils/theme-tokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensSetPropType, selectTokens } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { ScrollViewEnd } from './ScrollViewEnd'
 import {
-  a11yProps,
-  getTokensSetPropType,
-  selectSystemProps,
-  selectTokens,
-  variantProp,
-  viewProps
-} from '../utils'
-import ScrollViewEnd from './ScrollViewEnd'
-import { getItemPositionScrollTarget, itemPositionsPropType } from './itemPositions'
+  getItemPositionScrollTarget,
+  itemPositionsPropType,
+  useItemPositions,
+  getItemPositionLayoutHandler
+} from './itemPositions'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -32,13 +34,21 @@ const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
   borderBottomColor
 })
 
+export const horizontalScrollUtils = {
+  selectHorizontalScrollTokens,
+  useItemPositions,
+  getItemPositionScrollTarget,
+  getItemPositionLayoutHandler,
+  itemPositionsPropType
+}
+
 /**
  * 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 revisit `ScrollButton` after IconButton is stable.
  */
-const HorizontalScroll = React.forwardRef(
+export const HorizontalScroll = React.forwardRef(
   ({ ScrollButton, tokens, itemPositions, variant, children, ...rest }, ref) => {
     const {
       nextIcon,
@@ -178,5 +188,3 @@ HorizontalScroll.propTypes = {
   variant: variantProp.propType,
   children: PropTypes.node
 }
-
-export default HorizontalScroll

package/src/HorizontalScroll/HorizontalScrollButton.jsx

@@ -1,10 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
-import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils'
-import { useThemeTokens } from '../ThemeProvider'
-import IconButton from '../IconButton'
-import dictionary from './dictionary'
+import { variantProp } from '../utils/props/variantProp'
+import { getTokensPropType } from '../utils/props/tokens'
+import { useCopy } from '../utils/useCopy'
+import { copyPropTypes } from '../utils/props/copyPropTypes'
+import { a11yProps } from '../utils/props/a11yProps'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { IconButton } from '../IconButton/IconButton'
+import { dictionary } from './dictionary'
 
 const selectContainerStyles = ({ offset }) => ({
   marginTop: offset ? -offset : 0
@@ -18,7 +22,7 @@ const selectContainerStyles = ({ offset }) => ({
  *
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
-const HorizontalScrollButton = React.forwardRef(
+export const HorizontalScrollButton = React.forwardRef(
   ({ direction = 'next', icon, offset, onPress, variant, tokens, copy }, ref) => {
     const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant)
     const getCopy = useCopy({ dictionary, copy })
@@ -64,5 +68,3 @@ HorizontalScrollButton.propTypes = {
   icon: PropTypes.elementType,
   onPress: PropTypes.func.isRequired
 }
-
-export default HorizontalScrollButton

package/src/HorizontalScroll/ScrollViewEnd.jsx

@@ -12,7 +12,7 @@ const DEBOUNCE_MS = 100
  * so we need to work around it with debouncing on `onScroll`. See:
  * https://github.com/necolas/react-native-web/issues/1021
  */
-const ScrollViewEnd = React.forwardRef(({ onScrollEnd, onScroll = null, ...props }, ref) => {
+export const ScrollViewEnd = React.forwardRef(({ onScrollEnd, onScroll = null, ...props }, ref) => {
   // Return debounced function directly from useCallback so it has .cancel method etc.
   // Linter complains this stops it automatically scanning the deps, but we can check them manually.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -45,5 +45,3 @@ ScrollViewEnd.propTypes = {
   onScrollEnd: PropTypes.func.isRequired,
   onScroll: PropTypes.func
 }
-
-export default ScrollViewEnd

package/src/HorizontalScroll/ScrollViewEnd.native.jsx

@@ -7,7 +7,7 @@ import { ScrollView } from 'react-native'
  *
  * React Native has two scroll end handlers, we want to treat them both the same.
  */
-const ScrollViewEnd = React.forwardRef(({ onScrollEnd, ...props }, ref) => (
+export const ScrollViewEnd = React.forwardRef(({ onScrollEnd, ...props }, ref) => (
   <ScrollView
     ref={ref}
     {...props}
@@ -20,5 +20,3 @@ ScrollViewEnd.displayName = 'ScrollViewEnd'
 ScrollViewEnd.propTypes = {
   onScrollEnd: PropTypes.func.isRequired
 }
-
-export default ScrollViewEnd

package/src/HorizontalScroll/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     // English text from TDS Community `Tabs`
     previousLabel: 'Move menu to the left',

package/src/Icon/Icon.jsx

@@ -2,10 +2,11 @@ import React from 'react'
 import { Platform, View, useWindowDimensions } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
 
-const Icon = React.forwardRef(
+export const Icon = React.forwardRef(
   (
     {
       icon: IconComponent,
@@ -122,5 +123,3 @@ Icon.propTypes = {
    */
   icon: PropTypes.elementType.isRequired
 }
-
-export default Icon

package/src/Icon/IconText.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, View, Text, StyleSheet } from 'react-native'
-import Icon, { iconComponentPropTypes } from './Icon'
-import { getStackedContent } from '../StackView'
-import { spacingProps } from '../utils'
+import { Icon, iconComponentPropTypes } from './Icon'
+import { getStackedContent } from '../StackView/getStackedContent'
+import { spacingProps } from '../utils/props/spacingProps'
 
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component
@@ -13,7 +13,7 @@ import { spacingProps } from '../utils'
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
  */
-const IconText = React.forwardRef(
+export const IconText = React.forwardRef(
   ({ space, iconPosition = 'left', icon: IconComponent, iconProps, children }, ref) => {
     const iconContent = IconComponent && (
       <Icon ref={ref} icon={IconComponent} scalesWithText {...iconProps} />
@@ -97,5 +97,3 @@ const staticStyles = StyleSheet.create({
     position: 'absolute'
   }
 })
-
-export default IconText

package/src/IconButton/IconButton.jsx

@@ -2,21 +2,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform, StyleSheet, View } from 'react-native'
 
-import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
-import {
-  a11yProps,
-  clickProps,
-  getTokensPropType,
-  hrefAttrsProp,
-  linkProps,
-  resolvePressableState,
-  selectSystemProps,
-  selectTokens,
-  variantProp,
-  viewProps,
-  withLinkRouter
-} from '../utils'
-import Icon from '../Icon'
+import { applyOuterBorder, applyShadowToken } from '../ThemeProvider/utils/styles'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { clickProps } from '../utils/props/clickProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { linkProps } from '../utils/props/linkProps'
+import { resolvePressableState } from '../utils/pressability'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { Icon } from '../Icon/Icon'
 
 // function to get the dimentionals of the conditionals
 const getPasswordDimensions = (password, width, height) => {
@@ -138,7 +136,7 @@ const selectInnerStyle = (
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const IconButton = React.forwardRef(
+const IconButtonBase = React.forwardRef(
   (
     {
       tokens,
@@ -195,9 +193,9 @@ const IconButton = React.forwardRef(
     )
   }
 )
-IconButton.displayName = 'IconButton'
+IconButtonBase.displayName = 'IconButton'
 
-IconButton.propTypes = {
+IconButtonBase.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
@@ -234,4 +232,7 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default withLinkRouter(IconButton)
+// Export unwrapped component for react-docgen to extract info for docsite
+export { IconButtonBase }
+
+export const IconButton = withLinkRouter(IconButtonBase)

package/src/InputLabel/InputLabel.jsx

@@ -2,19 +2,18 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  selectTokens,
-  variantProp,
-  viewProps
-} from '../utils'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
 
-import LabelContent from './LabelContent'
-import Tooltip from '../Tooltip'
-import tooltipPropTypes from '../Tooltip/shared'
+import { LabelContent } from './LabelContent'
+import { Tooltip } from '../Tooltip/Tooltip.native'
+import { propTypes as tooltipPropTypes } from '../Tooltip/shared'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -36,7 +35,7 @@ const selectHintStyles = (
 
 const selectGapStyles = ({ gap }) => ({ marginRight: gap })
 
-const InputLabel = React.forwardRef(
+export const InputLabel = React.forwardRef(
   (
     {
       copy = 'en',
@@ -174,8 +173,6 @@ InputLabel.propTypes = {
   variant: variantProp.propType
 }
 
-export default InputLabel
-
 const staticStyles = StyleSheet.create({
   container: {
     flexShrink: 1,

package/src/InputLabel/LabelContent.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LabelContent = React.forwardRef(({ children, forId }, ref) => (
+export const LabelContent = React.forwardRef(({ children, forId }, ref) => (
   <label ref={ref} htmlFor={forId} style={staticStyles.inheritCursor}>
     {children}
   </label>
@@ -17,5 +17,3 @@ LabelContent.propTypes = {
 const staticStyles = {
   inheritCursor: { cursor: 'inherit' }
 }
-
-export default LabelContent

package/src/InputLabel/LabelContent.native.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-const LabelContent = React.forwardRef(({ children }, ref) =>
+export const LabelContent = React.forwardRef(({ children }, ref) =>
   ref ? <View ref={ref}>{children}</View> : children
 )
 LabelContent.displayName = 'LabelContent'
@@ -11,5 +11,3 @@ LabelContent.displayName = 'LabelContent'
 LabelContent.propTypes = {
   children: PropTypes.node
 }
-
-export default LabelContent

package/src/InputSupports/InputSupports.jsx

@@ -1,16 +1,17 @@
 import React from 'react'
 
 import PropTypes from 'prop-types'
-import InputLabel from '../InputLabel'
-import Feedback from '../Feedback'
-import StackView from '../StackView'
-import { useThemeTokens } from '../ThemeProvider'
-import useInputSupports from './useInputSupports'
-import { getTokensPropType, useCopy } from '../utils'
-import dictionary from './dictionary'
-import tooltipPropTypes from '../Tooltip/shared'
+import { InputLabel } from '../InputLabel/InputLabel'
+import { Feedback } from '../Feedback/Feedback'
+import { StackView } from '../StackView/StackView'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useInputSupports } from './useInputSupports'
+import { getTokensPropType } from '../utils/props/tokens'
+import { useCopy } from '../utils/useCopy'
+import { dictionary } from './dictionary'
+import { propTypes as tooltipPropTypes } from '../Tooltip/shared'
 
-const InputSupports = React.forwardRef(
+export const InputSupports = React.forwardRef(
   (
     {
       children,
@@ -144,5 +145,3 @@ InputSupports.propTypes = {
    */
   maxCharacterAllowed: PropTypes.number
 }
-
-export default InputSupports

package/src/InputSupports/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     maxCharacters: 'Maximum %{charCount} characters',
     charactersRemaining: '%{charCount} characters remaining',

package/src/InputSupports/useInputSupports.js

@@ -1,10 +1,10 @@
-import useUniqueId from '../utils/useUniqueId'
-import { useCopy } from '../utils'
-import dictionary from './dictionary'
+import { useUniqueId } from '../utils/useUniqueId'
+import { useCopy } from '../utils/useCopy'
+import { dictionary } from './dictionary'
 
 const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
 
-const useInputSupports = ({
+export const useInputSupports = ({
   label,
   feedback,
   validation,
@@ -47,5 +47,3 @@ const useInputSupports = ({
     a11yProps
   }
 }
-
-export default useInputSupports

package/src/Link/ChevronLink.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
-import { selectTokens, getTokensPropType, linkProps } from '../utils'
-import LinkBase from './LinkBase'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { selectTokens, getTokensPropType } from '../utils/props/tokens'
+import { linkProps } from '../utils/props/linkProps'
+import { LinkBase } from './LinkBase'
 
 /**
  * `ChevronLink` is a convenience wrapper around the `Link` component to enable "directional" links.
@@ -11,7 +12,7 @@ import LinkBase from './LinkBase'
  *
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
-const ChevronLink = React.forwardRef(
+export const ChevronLink = React.forwardRef(
   ({ direction = 'right', children, tokens = {}, variant, dataSet, ...otherlinkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
@@ -34,6 +35,7 @@ const ChevronLink = React.forwardRef(
     return (
       <LinkBase
         {...otherlinkProps}
+        useMeasuredMobileIconLayout
         iconPosition={direction}
         tokens={getTokens}
         dataSet={dataSet}
@@ -61,5 +63,3 @@ ChevronLink.propTypes = {
    */
   direction: PropTypes.oneOf(['left', 'right'])
 }
-
-export default ChevronLink

package/src/Link/InlinePressable.jsx

@@ -14,7 +14,7 @@ import PropTypes from 'prop-types'
  *
  * @param {PressableProps} PressableProps
  */
-const InlinePressable = React.forwardRef(
+export const InlinePressable = React.forwardRef(
   ({ children, inlineFlex = true, style, ...props }, ref) => (
     <Pressable
       ref={ref}
@@ -46,5 +46,3 @@ const staticStyles = StyleSheet.create({
     display: 'inline-flex'
   }
 })
-
-export default InlinePressable

package/src/Link/InlinePressable.native.jsx

@@ -37,7 +37,7 @@ const pressablePropsToTouchable = ({
  *
  * @param {PressableProps} PressableProps
  */
-const InlinePressable = React.forwardRef(({ onPress, children, style, ...rest }, ref) => {
+export const InlinePressable = React.forwardRef(({ onPress, children, style, ...rest }, ref) => {
   const [isFocused, setIsFocused] = React.useState(false)
   const handleFocus = () => setIsFocused(true)
   const handleBlur = () => setIsFocused(false)
@@ -77,5 +77,3 @@ InlinePressable.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
   onPress: PropTypes.func
 }
-
-export default InlinePressable