@telus-uds/components-base 1.14.2 → 1.16.0

package/src/RadioCard/RadioCard.jsx

@@ -98,6 +98,12 @@ const RadioCard = forwardRef(
     const getCardTokens = (cardState) => selectPressableCardTokens(getTokens(cardState))
     const { themeOptions } = useTheme()
 
+    const selectedProps = selectProps({
+      accessibilityRole: 'radio',
+      accessibilityState: { checked: isChecked, disabled: inactive },
+      ...rest
+    })
+
     return (
       <PressableCardBase
         ref={ref}
@@ -105,9 +111,7 @@ const RadioCard = forwardRef(
         checked={isChecked}
         tokens={getCardTokens}
         onPress={handleChange}
-        accessibilityRole="radio"
-        accessibilityState={{ checked: isChecked, disabled: inactive }}
-        {...selectProps(rest)}
+        {...selectedProps}
       >
         {(cardState) => {
           const { radioSpace, contentSpace, ...themeTokens } = getTokens(cardState)

package/src/Select/Select.jsx

@@ -215,7 +215,7 @@ const Select = forwardRef(
     const { themeOptions } = useTheme()
 
     return (
-      <InputSupports {...supportsProps} {...selectedProps}>
+      <InputSupports {...supportsProps} {...selectedProps} validation={validation}>
         {({ inputId, ...props }) => (
           <View style={selectOuterBorderStyles(themeTokens)}>
             <Picker

package/src/Skeleton/Skeleton.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Animated, Platform } from 'react-native'
+import { Animated, Platform, StyleSheet, View } from 'react-native'
 import propTypes from 'prop-types'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
@@ -19,11 +19,10 @@ import skeletonWebAnimation from './skeletonWebAnimation'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectSkeletonStyles = ({ color, radius, fadeAnimation }) => ({
+const selectSkeletonStyles = ({ color, radius }) => ({
   backgroundColor: color,
   borderRadius: radius,
-  maxWidth: '100%',
-  ...fadeAnimation
+  maxWidth: '100%'
 })
 
 const selectLineStyles = ({ skeletonHeight, lineWidth }) => ({
@@ -66,12 +65,13 @@ const Skeleton = forwardRef(
     const skeletonHeight = useSpacingScale(spacingScaleValue)
     const nativeAnimation = useSkeletonNativeAnimation()
 
-    const getAnimationBaseOnPlatform = () => {
-      if (Platform.OS !== 'web') {
-        return nativeAnimation
-      }
+    const getAnimationBasedOnPlatform = () => {
+      const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation
+      // We must pass the animation styles through `StyleSheet.create`
+      // @see https://github.com/necolas/react-native-web/issues/2387
+      const styles = StyleSheet.create({ animation })
 
-      return skeletonWebAnimation
+      return styles.animation
     }
 
     const getLineWidth = () => {
@@ -97,16 +97,22 @@ const Skeleton = forwardRef(
       return selectLineStyles({ skeletonHeight, lineWidth: getLineWidth() })
     }
 
-    const renderSkeleton = (index = 0) => (
-      <Animated.View
-        testID="skeleton"
-        key={`skeleton-${index + 1}`}
-        style={[
-          selectSkeletonStyles({ ...themeTokens, fadeAnimation: getAnimationBaseOnPlatform() }),
-          getStyledBasedOnShape()
-        ]}
-      />
-    )
+    const renderSkeleton = (index = 0) => {
+      // @see https://github.com/necolas/react-native-web/issues/2387
+      const Component = Platform.OS === 'web' ? View : Animated.View
+
+      return (
+        <Component
+          testID="skeleton"
+          key={`skeleton-${index + 1}`}
+          style={[
+            selectSkeletonStyles(themeTokens),
+            getAnimationBasedOnPlatform(),
+            getStyledBasedOnShape()
+          ]}
+        />
+      )
+    }
 
     return (
       <StackView space={themeTokens.spaceBetweenLines} ref={ref} {...selectProps(rest)}>

package/src/Skeleton/useSkeletonNativeAnimation.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { Animated } from 'react-native'
+import { Animated, Platform } from 'react-native'
 import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
 
 const useSkeletonNativeAnimation = () => {
@@ -10,12 +10,12 @@ const useSkeletonNativeAnimation = () => {
       Animated.timing(fadeAnimation, {
         toValue: OPACITY_STOP,
         duration: ANIMATION_DURATION,
-        useNativeDriver: true
+        useNativeDriver: Platform.OS !== 'web'
       }),
       Animated.timing(fadeAnimation, {
         toValue: DEFAULT_OPACITY,
         duration: ANIMATION_DURATION,
-        useNativeDriver: true
+        useNativeDriver: Platform.OS !== 'web'
       })
     ])
     Animated.loop(fade).start()

package/src/Tabs/Tabs.jsx

@@ -6,6 +6,8 @@ import StackView from '../StackView'
 import {
   a11yProps,
   getTokensPropType,
+  focusHandlerProps,
+  pressProps,
   selectSystemProps,
   useHash,
   useInputValue,
@@ -20,6 +22,12 @@ import HorizontalScroll, {
 import TabsItem from './TabsItem'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  pressProps,
+  viewProps
+])
 
 const { selectHorizontalScrollTokens, useItemPositions } = horizontalScrollUtils
 
@@ -99,15 +107,22 @@ const Tabs = forwardRef(
                 label,
                 id,
                 accessibilityRole = defaultTabItemAccessibiltyRole,
+                onPress,
                 ref: itemRef,
                 LinkRouter: ItemLinkRouter = LinkRouter,
-                linkRouterProps: itemLinkRouterProps
+                linkRouterProps: itemLinkRouterProps,
+                ...itemRest
               },
               index
             ) => {
               const itemId = id ?? label
               const isSelected = Boolean(currentValue && currentValue === itemId)
-              const handlePress = (event) => setValue(itemId, event)
+              const handlePress = (event) => {
+                if (typeof onPress === 'function') onPress(event)
+                setValue(itemId, event)
+              }
+
+              const itemProps = selectItemProps(itemRest)
               return (
                 <TabsItem
                   ref={itemRef}
@@ -122,6 +137,7 @@ const Tabs = forwardRef(
                   accessibilityRole={accessibilityRole}
                   LinkRouter={ItemLinkRouter}
                   linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                  {...itemProps}
                 >
                   {label}
                 </TabsItem>
@@ -140,6 +156,7 @@ Tabs.propTypes = {
   ...withLinkRouter.PropTypes,
   items: PropTypes.arrayOf(
     PropTypes.shape({
+      ...selectedItemPropTypes,
       ...withLinkRouter.PropTypes,
       href: PropTypes.string,
       label: PropTypes.string,

package/src/Tags/Tags.jsx

@@ -127,12 +127,12 @@ const Tags = forwardRef(
             toggleOneValue(id, event)
           }
 
-          const itemProps = {
+          const itemProps = selectItemProps({
             accessibilityState: { checked: isSelected },
             accessibilityRole: itemA11yRole,
             ...a11yProps.getPositionInSet(items.length, index),
-            ...selectItemProps(itemRest)
-          }
+            ...itemRest
+          })
 
           return (
             <ButtonBase

package/src/TextInput/TextInput.jsx

@@ -41,7 +41,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
+const TextInput = forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref) => {
   const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
@@ -51,9 +51,9 @@ const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   }
 
   return (
-    <InputSupports nativeID={selectedProps.nativeID} {...supportsProps}>
-      {({ inputId, ...props }) => (
-        <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
+    <InputSupports nativeID={nativeID} {...supportsProps}>
+      {({ inputId, ...propsFromInputSupports }) => (
+        <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
       )}
     </InputSupports>
   )

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -26,7 +26,9 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const selectButtonTokens = (tokens) =>
+// We need to drop the icon before passing it to the `ButtonBase`, because it's
+// being handled separately in this case
+const selectButtonTokens = ({ icon: _, ...tokens }) =>
   selectTokens('Button', {
     ...tokens,
     // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
@@ -215,8 +217,6 @@ ToggleSwitch.propTypes = {
 
 const staticStyles = StyleSheet.create({
   track: {
-    flexGrow: 1,
-    alignSelf: 'stretch',
     flexDirection: 'row'
   },
   switch: {

package/src/ViewportProvider/useViewportListener.js

@@ -28,11 +28,16 @@ const useViewportListenerCSR = (setViewport) => {
     const onChange = ({ window }) => setViewport(viewports.select(window.width))
     const listener = Dimensions.addEventListener('change', onChange)
 
-    // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
-    // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).
-    return listener?.remove || (() => Dimensions.removeEventListener('change', onChange))
-
-    // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+    return () => {
+      if (typeof listener?.remove === 'function') {
+        // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
+        // See https://github.com/facebook/react-native/issues/34508
+        listener.remove()
+        // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value
+      } else if (typeof Dimensions.removeEventListener === 'function') {
+        Dimensions.removeEventListener('change', onChange)
+      }
+    }
   }, [setViewport])
 }
 

package/src/utils/hasOwnProperty.js

@@ -0,0 +1,11 @@
+/**
+ * Linter disallows object instance prototype methods like someObject.hasOwnProperty(key),
+ * but we can use this instead.
+ *
+ * @param {object} object
+ * @param {String} key
+ * @returns {Boolean}
+ */
+export default function hasOwnProperty(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key)
+}

package/src/utils/props/a11yProps.js

@@ -98,6 +98,101 @@ const a11yPropTypes = {
   accessibilityValueText: PropTypes.string
 }
 
+const a11yPropTypesByPlatform = Platform.select({
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  web: a11yPropTypes,
+  // Ignore web-only props in native builds
+  default: nativeA11yPropTypes
+})
+
+// These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
+// so all props work on RN, RNW >=0.18 and RNW <=0.18, regardless of which they were written for:
+// - On native, bundle them into objects, like `accessibilityValue: { max: 100 }`
+// - On web, split them into both of:
+//   - The appropriate aria-* attr, like `aria-valuenow`, which will work regardless of RNW version
+//   - The corresponding RNW >=0.18 prop, like `accessibilityValueNow`, which in some cases does more
+//     than just add the aria-* (e.g. `accessibilityDisabled` adds `disabled` if element supports it,
+//     and future releases might add more features here).
+const rwnPropMappings = {
+  // Former accessibilityValue props.
+  accessibilityValueMax: (value) =>
+    Platform.select({
+      web: { 'aria-valuemax': value, accessibilityValueMax: value },
+      default: { accessibilityValue: { max: value } }
+    }),
+  accessibilityValueMin: (value) =>
+    Platform.select({
+      web: { 'aria-valuemin': value, accessibilityValueMin: value },
+      default: { accessibilityValue: { min: value } }
+    }),
+  accessibilityValueNow: (value) =>
+    Platform.select({
+      web: { 'aria-valuenow': value, accessibilityValueNow: value },
+      default: { accessibilityValue: { now: value } }
+    }),
+  accessibilityValueText: (value) =>
+    Platform.select({
+      web: { 'aria-valuetext': value, accessibilityValueText: value },
+      default: { accessibilityValue: { text: value } }
+    }),
+
+  // Former accessibilityState props
+  accessibilityBusy: (value) =>
+    Platform.select({
+      web: { 'aria-busy': value, accessibilityBusy: value },
+      default: { accessibilityState: { busy: value } }
+    }),
+  accessibilityChecked: (value) =>
+    Platform.select({
+      web: { 'aria-checked': value, accessibilityChecked: value },
+      default: { accessibilityState: { checked: value } }
+    }),
+  accessibilityDisabled: (value) =>
+    Platform.select({
+      web: {
+        'aria-disabled': value,
+        // RNW >= 0.18 maps `accessibilityDisabled` to `disabled` attr if element supports it
+        accessibilityDisabled: value,
+        // As of RNW 0.18.9, Pressable doesn't support `accessibilityDisabled`, only `disabled`,
+        // but everything else supports `accessibilityDisabled` but not `disabled`.
+        disabled: value
+      },
+      default: { accessibilityState: { disabled: value } }
+    }),
+  accessibilityExpanded: (value) =>
+    Platform.select({
+      web: { 'aria-expanded': value, accessibilityExpanded: value },
+      default: { accessibilityState: { expanded: value } }
+    }),
+  accessibilitySelected: (value) =>
+    Platform.select({
+      web: { 'aria-selected': value, accessibilitySelected: value },
+      default: { accessibilityState: { selected: value } }
+    })
+}
+if (Platform.OS === 'web') {
+  const mapIfDefined = (value, fn) => (value === undefined ? undefined : fn(value))
+
+  // On Web only, these React Native object props need manual mapping in RNW >=0.18
+  // which dropped support for the React Native shape of these props.
+  // Re-use our RNW 0.18 prop mappings to support both RNW <0.18 (aria-*) and
+  // new features added in >=0.18 (e.g. for accessibilityDisabled).
+  rwnPropMappings.accessibilityValue = ({ max, min, now, text } = {}) => ({
+    ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
+    ...mapIfDefined(min, rwnPropMappings.accessibilityValueMin),
+    ...mapIfDefined(now, rwnPropMappings.accessibilityValueNow),
+    ...mapIfDefined(text, rwnPropMappings.accessibilityValueText)
+  })
+  rwnPropMappings.accessibilityState = ({ busy, checked, disabled, expanded, selected } = {}) => ({
+    ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
+    ...mapIfDefined(checked, rwnPropMappings.accessibilityChecked),
+    ...mapIfDefined(disabled, rwnPropMappings.accessibilityDisabled),
+    ...mapIfDefined(expanded, rwnPropMappings.accessibilityExpanded),
+    ...mapIfDefined(selected, rwnPropMappings.accessibilitySelected)
+  })
+}
+
 export default {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
@@ -110,7 +205,18 @@ export default {
    * Where components accept React Native a11y props, pass { ...rest } from its props to this,
    * then spread the returned object into the component's props (usually its outer container).
    */
-  select: getPropSelector(a11yPropTypes, /^aria-/),
+  select: getPropSelector(
+    // Allow all React Native accessibility props
+    a11yPropTypesByPlatform,
+    // Allow any `aria-*` attribute on web; ignore them on native
+    Platform.OS === 'web' && /^aria-/,
+    // For the props added and deprecated in React Native Web 0.18, convert them to
+    // a form that is platform-appropriate and RNW-version safe
+    (key, value) => {
+      const rnwPropMapper = rwnPropMappings[key]
+      return rnwPropMapper ? rnwPropMapper(value) : undefined
+    }
+  ),
   /**
    * Use this to disable focus for elements which are visually hidden but still rendered.
    */

package/src/utils/props/getPropSelector.js

@@ -1,14 +1,55 @@
-export default function getPropSelector(propTypes, regexp) {
-  const keys = Object.keys(propTypes)
+import merge from 'lodash.merge'
+import hasOwnProperty from '../hasOwnProperty'
+
+/**
+ * @callback PropSelectorCallback - a callback called for each prop passed to a component
+ * @param {string} key - the key for the prop to be tested
+ * @param {*} value - the value of the prop being passed in to the component
+ * @returns {object|undefined}
+ */
+
+/**
+ * @param {PropSelectorCallback} callback
+ * @param {object} items
+ * @param {string} key
+ * @param {*} value
+ * @returns {object|undefined}
+ */
+const applyCallback = (callback, items, key, value) => {
+  // If there's no callback, continue and look up keys as normal
+  if (typeof callback !== 'function') return undefined
+
+  const newItems = callback(key, value)
+
+  // If the callback doesn't return anything, continue and look up keys as normal
+  if (!newItems) return undefined
+
+  // If the callback returns items, merge them in, deep merging props that are objects
+  return merge({}, items, newItems)
+}
+
+/**
+ * Generates a function to filter an object of props down to a subset of allowed props, with
+ * optional prop alteration and re-mapping via an optional callback.
+ *
+ * @param {object} propTypes - an object where every defined key is a valid prop
+ * @param {*} [regexp] - an optional regular expression where any match is a valid prop
+ * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
+ * @returns {object} - valid props for this component
+ */
+export default function getPropSelector(propTypes, regexp, callback) {
   return (props) =>
     Object.entries(props).reduce(
       (items, [key, value]) =>
-        keys.includes(key) || (regexp && regexp.test(key))
+        // If there's a callback and it matches something, applyCallback merges it in; return that
+        applyCallback(callback, items, key, value) ||
+        // If there's no callback match, check if this prop is valid and merge it in if it is
+        (hasOwnProperty(propTypes, key) || (regexp && regexp.test(key))
           ? {
               ...items,
               [key]: value
             }
-          : items,
+          : items),
       {}
     )
 }

package/src/utils/ssr.jsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { AppRegistry } from 'react-native'
+/** @typedef {import('react').ComponentType} ReactComponent */
+/** @typedef {import('react').ReactElement} ReactElement */
+
+/**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+export const ssrStyles = (appName = 'UDS app', { styleGetters = [], collectStyles } = {}) => {
+  let hasAppRendered = false
+  return {
+    /**
+     * Server-side-renders the provided app in a way that supports collecting
+     * styles for Styled Components and React Native Web stylesheets.
+     *
+     * @param {ReactComponent} App - the root component for the app
+     * @param {object} [props] - props for this render e.g. page routing props
+     * @param {object} [options] -
+     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
+     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
+     * @param {boolean} [options.renderedByRNW]
+     * @param {ReactComponent} [options.WrapperComponent]
+     *
+     * @returns {ReactElement} - the rendered app output
+     */
+    renderApp: (App, props, { renderedByRNW = false, WrapperComponent } = {}) => {
+      AppRegistry.registerComponent(appName, () => App)
+      // AppRegistry.getApplication renders the app in a container, and collects styles.
+      const { element, getStyleElement } = AppRegistry.getApplication(appName, {
+        WrapperComponent,
+        initialProps: props
+      })
+
+      let renderedApp =
+        // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+        // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
+        // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
+        // So, use that IF user says AppRegistry.runApplication will do the client-side render.
+        (renderedByRNW && element) ||
+        // If the live app is not rendered using AppRegistry.runApplication, we need to
+        // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
+        // Default to this as many platforms (e.g. NextJS) will use their own renderers.
+        WrapperComponent ? (
+          <WrapperComponent>
+            <App {...props} />
+          </WrapperComponent>
+        ) : (
+          <App {...props} />
+        )
+
+      const getRNWStyle = () => getStyleElement({ key: 'react-native-stylesheet' })
+      styleGetters.push(getRNWStyle)
+
+      if (typeof collectStyles === 'function') {
+        renderedApp = collectStyles(renderedApp)
+      }
+      hasAppRendered = true
+      return renderedApp
+    },
+    /**
+     * Turns styles collected during renderApp into an array of React elements of
+     * HTML <style> tags ready for insertion into the SSR HTML's <head>.
+     *
+     * Must be called after `renderApp` has completed.
+     *
+     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
+     * @returns {ReactElement[]} - flat array of <style> React elements
+     */
+    getStyles: (...existingStyles) => {
+      if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles')
+      return [...existingStyles, ...styleGetters.flatMap((getter) => getter())]
+    }
+  }
+}
+
+export default ssrStyles
+
+/**
+ * @deprecated - use ssrStyles instead
+ *
+ * Registers the app's root component with React Native Web and generates
+ * the main <style> tag containing React Native Web stylesheet styles.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @returns {ReactElement[]}
+ */
+
+export const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
+  AppRegistry.registerComponent(appName, () => AppRoot)
+  const { getStyleElement } = AppRegistry.getApplication(appName)
+  return [getStyleElement()]
+}
+
+/**
+ * @deprecated - use ssrStyles instead
+ *
+ * Gets style tags for each currently supported CSS-in-JS library and returns
+ * them alongside any existing style tags.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @param {ReactElement[]} [existingStyles]
+ * @returns {ReactElement[]}
+ */
+export const getSSRStyles = (AppRoot, appName = 'app', existingStyles = []) => {
+  return [
+    ...existingStyles,
+    ...getReactNativeWebSSRStyles(AppRoot, appName)
+    // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
+  ]
+}

package/src/utils/useResponsiveProp.js

@@ -1,9 +1,9 @@
 import { viewports } from '@telus-uds/system-constants'
 import { useViewport } from '../ViewportProvider'
+import hasOwnProperty from './hasOwnProperty'
 
-const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key)
 const hasResponsiveProperties = (objectProp) =>
-  viewports.keys.some((key) => hasOwn(objectProp, key))
+  viewports.keys.some((key) => hasOwnProperty(objectProp, key))
 
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
@@ -23,7 +23,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
     ? // If there's a current viewport, return the closest match at or below it
       viewports.inherit(prop)[viewport]
     : // If no current viewport is available, default to smallest viewport
-      prop[viewports.keys.find((key) => hasOwn(prop, key))]
+      prop[viewports.keys.find((key) => hasOwnProperty(prop, key))]
 
   return value === undefined ? defaultValue : value
 }

package/src/utils/withLinkRouter.jsx

@@ -1,8 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-
-// Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
-const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop)
+import hasOwnProperty from './hasOwnProperty'
 
 /**
  * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.

package/src/utils/ssr.js

@@ -1,35 +0,0 @@
-import { AppRegistry } from 'react-native'
-/** @typedef {import('react').ComponentType} ReactComponent */
-/** @typedef {import('react').ReactElement} ReactElement */
-
-/**
- * Registers the app's root component with React Native Web and generates
- * the main <style> tag containing React Native Web stylesheet styles.
- *
- * @param {ReactComponent} AppRoot
- * @param {string} [appName]
- * @returns {ReactElement[]}
- */
-
-export const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
-  AppRegistry.registerComponent(appName, () => AppRoot)
-  const { getStyleElement } = AppRegistry.getApplication(appName)
-  return [getStyleElement()]
-}
-
-/**
- * Gets style tags for each currently supported CSS-in-JS library and returns
- * them alongside any existing style tags.
- *
- * @param {ReactComponent} AppRoot
- * @param {string} [appName]
- * @param {ReactElement[]} [existingStyles]
- * @returns {ReactElement[]}
- */
-export const getSSRStyles = (AppRoot, appName = 'app', existingStyles = []) => {
-  return [
-    ...existingStyles,
-    ...getReactNativeWebSSRStyles(AppRoot, appName)
-    // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
-  ]
-}