@telus-uds/components-base 1.3.0 → 1.3.1

package/src/TextInput/TextArea.jsx

@@ -1,13 +1,25 @@
 import React, { forwardRef, useState } from 'react'
 
 import { Platform } from 'react-native'
-import { getTokensPropType, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  inputSupportsProps,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils'
 import InputSupports from '../InputSupports'
 import TextInputBase from './TextInputBase'
 import { useThemeTokens } from '../ThemeProvider'
-import inputSupportProps from '../InputSupports/propTypes'
 import textInputPropTypes from './propTypes'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  inputSupportsProps,
+  viewProps
+])
+
 /**
  * Use to collect long-form information such as product feedback or support queries.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -32,7 +44,7 @@ import textInputPropTypes from './propTypes'
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-const TextArea = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref) => {
+const TextArea = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   const themeTokens = useThemeTokens('TextArea', tokens, variant)
   const [inputHeight, setInputHeight] = useState()
 
@@ -48,10 +60,10 @@ const TextArea = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref) =
     }
   }
 
-  const { props: supportsProps, rest } = inputSupportProps.select(remainingProps)
+  const { props: supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
-    ...rest,
+    ...selectedProps,
     variant: { ...variant, validation: supportsProps.validation },
     multiline: true,
     onContentSizeChange: onHeightChange,
@@ -61,8 +73,8 @@ const TextArea = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref) =
 
   return (
     <InputSupports {...supportsProps}>
-      {({ a11yProps, inputId }) => (
-        <TextInputBase ref={ref} {...inputProps} {...a11yProps} nativeID={inputId} />
+      {({ inputId, ...props }) => (
+        <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
       )}
     </InputSupports>
   )
@@ -70,7 +82,7 @@ const TextArea = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref) =
 TextArea.displayName = 'TextArea'
 
 TextArea.propTypes = {
-  ...inputSupportProps.types,
+  ...selectedSystemPropTypes,
   ...textInputPropTypes,
   tokens: getTokensPropType('TextArea', 'TextInput'), // TODO: support both TextArea and TextInput tokens
   variant: variantProp.propType

package/src/TextInput/TextInput.jsx

@@ -1,11 +1,23 @@
 import React, { forwardRef } from 'react'
 
-import { getTokensPropType, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  inputSupportsProps,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils'
 import InputSupports from '../InputSupports'
 import TextInputBase from './TextInputBase'
-import inputSupportProps from '../InputSupports/propTypes'
 import textInputPropTypes from './propTypes'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  inputSupportsProps,
+  viewProps
+])
+
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -24,19 +36,19 @@ import textInputPropTypes from './propTypes'
  * 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 = {}, ...remainingProps }, ref) => {
-  const { props: supportsProps, rest } = inputSupportProps.select(remainingProps)
+const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
+  const { props: supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
-    ...rest,
+    ...selectedProps,
     tokens,
     variant: { ...variant, validation: supportsProps.validation }
   }
 
   return (
     <InputSupports {...supportsProps}>
-      {({ a11yProps, inputId }) => (
-        <TextInputBase ref={ref} {...inputProps} {...a11yProps} nativeID={inputId} />
+      {({ inputId, ...props }) => (
+        <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
       )}
     </InputSupports>
   )
@@ -44,7 +56,7 @@ const TextInput = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref)
 TextInput.displayName = 'TextInput'
 
 TextInput.propTypes = {
-  ...inputSupportProps.types,
+  ...selectedSystemPropTypes,
   ...textInputPropTypes,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType

package/src/TextInput/TextInputBase.jsx

@@ -3,7 +3,16 @@ import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-
 
 import PropTypes from 'prop-types'
 import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
-import { getTokensPropType, useInputValue, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useInputValue,
+  variantProp,
+  viewProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectInputStyles = (
   {
@@ -114,7 +123,7 @@ const TextInputBase = forwardRef(
       onMouseOut,
       tokens,
       variant = {},
-      ...remainingProps
+      ...rest
     },
     ref
   ) => {
@@ -158,7 +167,7 @@ const TextInputBase = forwardRef(
     const { icon: IconComponent } = themeTokens
 
     const inputProps = {
-      ...remainingProps,
+      ...selectProps(rest),
       editable: !inactive,
       onFocus: handleFocus,
       onBlur: handleBlur,
@@ -191,6 +200,7 @@ const TextInputBase = forwardRef(
 TextInputBase.displayName = 'TextInputBase'
 
 TextInputBase.propTypes = {
+  ...selectedSystemPropTypes,
   value: PropTypes.string,
   height: PropTypes.number,
   initialValue: PropTypes.string,

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -6,9 +6,19 @@ import InputLabel from '../InputLabel'
 import ButtonBase from '../Button/ButtonBase'
 import StackView from '../StackView'
 import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
-import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/props'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectTokens,
+  pressProps,
+  selectSystemProps,
+  useUniqueId,
+  variantProp,
+  viewProps
+} from '../utils'
 import { useInputValue } from '../utils/input'
-import { useUniqueId } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
 
 const selectButtonTokens = (tokens) =>
   selectTokens('Button', {
@@ -79,7 +89,8 @@ const ToggleSwitch = forwardRef(
       tooltip,
       variant,
       accessibilityRole = 'switch',
-      accessibilityLabel = label
+      accessibilityLabel = label,
+      ...rest
     },
     ref
   ) => {
@@ -119,6 +130,7 @@ const ToggleSwitch = forwardRef(
           accessibilityRole={accessibilityRole}
           accessibilityState={{ checked: currentValue }}
           onPress={handlePress}
+          {...selectProps(rest)}
         >
           {(buttonState) => {
             const stateTokens = getTokens(buttonState)
@@ -151,8 +163,7 @@ const ToggleSwitch = forwardRef(
 ToggleSwitch.displayName = 'ToggleSwitch'
 
 ToggleSwitch.propTypes = {
-  ...a11yProps.propTypes,
-  ...pressProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ToggleSwitch'),
   variant: variantProp.propType,
   /**

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -8,9 +8,18 @@ import Fieldset from '../Fieldset'
 import { getStackedContent } from '../StackView'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
-import { a11yProps, pressProps, variantProp, getTokensPropType } from '../utils/props'
+import {
+  a11yProps,
+  getTokensPropType,
+  pressProps,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils/props'
 import { useMultipleInputValues } from '../utils/input'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+
 const ToggleSwitchGroup = forwardRef(
   (
     {
@@ -51,11 +60,11 @@ const ToggleSwitchGroup = forwardRef(
       readOnly
     })
 
-    const a11y = a11yProps.select({
+    const selectedProps = selectProps({
       accessibilityRole,
       ...rest
     })
-    const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'switch'
+    const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch'
 
     const toggleSwitches = items.map(
       (
@@ -111,7 +120,7 @@ const ToggleSwitchGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
-        {...a11y}
+        {...selectedProps}
       >
         {getStackedContent(toggleSwitches, { space, direction: 'column' })}
       </Fieldset>
@@ -121,8 +130,7 @@ const ToggleSwitchGroup = forwardRef(
 ToggleSwitchGroup.displayName = 'ToggleSwitchGroup'
 
 ToggleSwitchGroup.propTypes = {
-  ...a11yProps.propTypes,
-  ...pressProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ToggleSwitchGroup'),
   variant: variantProp.propType,
   /**

package/src/Tooltip/Tooltip.jsx

@@ -3,13 +3,22 @@ import { Dimensions, Platform, Pressable, StyleSheet, Text, View } from 'react-n
 
 import PropTypes from 'prop-types'
 import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, selectTokens, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  selectTokens,
+  variantProp,
+  viewProps
+} from '../utils'
 import Backdrop from './Backdrop'
 import getTooltipPosition from './getTooltipPosition'
 import TooltipButton from '../TooltipButton'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectTooltipStyles = ({
   backgroundColor,
   paddingTop,
@@ -100,7 +109,7 @@ const defaultControl = (pressableState, variant) => (
  * - Tooltips may also be useful when vertical space is an issue.
  */
 const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant }, ref) => {
+  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isOpen, setIsOpen] = useState(false)
 
     const controlRef = useRef()
@@ -209,7 +218,7 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container}>
+      <View style={staticStyles.container} {...selectProps(rest)}>
         <Pressable
           onPress={toggleIsOpen}
           ref={controlRef}
@@ -256,6 +265,7 @@ const Tooltip = forwardRef(
 Tooltip.displayName = 'Tooltip'
 
 Tooltip.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.

package/src/TooltipButton/TooltipButton.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { View } from 'react-native'
-
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyOuterBorder } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import Icon from '../Icon'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectInnerContainerStyles = ({ borderRadius, width }) => ({ borderRadius, width })
 
 const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
@@ -19,13 +20,13 @@ const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = ({ pressableState, tokens, variant }) => {
+const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
   const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState)
 
   const { icon: IconComponent } = themeTokens
 
   return (
-    <View style={applyOuterBorder(themeTokens)}>
+    <View style={applyOuterBorder(themeTokens)} {...selectProps(rest)}>
       <View style={selectInnerContainerStyles(themeTokens)}>
         {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
       </View>
@@ -34,6 +35,7 @@ const TooltipButton = ({ pressableState, tokens, variant }) => {
 }
 
 TooltipButton.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Used as appearances when resolving theme tokens.
    */

package/src/Typography/Typography.jsx

@@ -11,13 +11,17 @@ import {
   getTokensPropType,
   getMaxFontMultiplier,
   headingTags,
+  selectSystemProps,
   textTags,
+  viewProps,
   getA11yPropsFromHtmlTag
 } from '../utils'
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -64,17 +68,17 @@ const Typography = forwardRef(
       maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
     }
 
-    const a11y = {
+    const selectedProps = selectProps({
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...a11yProps.select(rest)
-    }
+      ...rest
+    })
 
     return block ? (
-      <View ref={ref} {...a11y}>
+      <View ref={ref} {...selectedProps}>
         <Text {...textProps}>{children}</Text>
       </View>
     ) : (
-      <Text ref={ref} {...textProps} {...a11y}>
+      <Text ref={ref} {...textProps} {...selectedProps}>
         {children}
       </Text>
     )
@@ -83,7 +87,7 @@ const Typography = forwardRef(
 Typography.displayName = 'Typography'
 
 Typography.propTypes = {
-  ...a11yProps.types,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
   /**

package/src/index.js

@@ -44,7 +44,7 @@ export { default as Typography } from './Typography'
 
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
 export { default as BaseProvider } from './BaseProvider'
-export { default as ViewportProvider, useViewport } from './ViewportProvider'
+export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider'
 export {
   default as ThemeProvider,
   useTheme,

package/src/utils/children.jsx

@@ -47,7 +47,8 @@ export const unpackFragment = (child) => {
 
 const isStringOrNumber = (child) => typeof child === 'string' || typeof child === 'number'
 // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-const isWrapable = (child) => isStringOrNumber(child) || child.type === A11yText
+const isWrapable = (child) =>
+  isStringOrNumber(child) || child.type === A11yText || child.type?.name === 'FootnoteLink'
 const combineKeys = (childrenArray) =>
   childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '')
 

package/src/utils/index.js

@@ -13,3 +13,4 @@ export { default as useResponsiveProp } from './useResponsiveProp'
 export * from './useResponsiveProp'
 export { default as useUniqueId } from './useUniqueId'
 export { default as withLinkRouter } from './withLinkRouter'
+export * from './ssr'

package/src/utils/props/index.js

@@ -4,6 +4,7 @@ export { default as clickProps } from './clickProps'
 export { default as copyPropTypes } from './copyPropTypes'
 export { default as componentPropType } from './componentPropType'
 export { default as hrefAttrsProp } from './hrefAttrsProp'
+export { default as inputSupportsProps } from './inputSupportsProps'
 export { default as linkProps } from './linkProps'
 export { default as pressProps } from './pressProps'
 export { default as paddingProp } from './paddingProp'

package/src/{InputSupports/propTypes.js → utils/props/inputSupportsProps.js}

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 
-const inputSupportProps = {
+export default {
   types: {
     /**
      * The input label.
@@ -37,8 +37,6 @@ const inputSupportProps = {
       tooltip,
       validation
     },
-    rest
+    ...rest
   })
 }
-
-export default inputSupportProps

package/src/utils/ssr.js

@@ -0,0 +1,35 @@
+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
+  ]
+}

package/release-context.json

@@ -1,7 +0,0 @@
-{
-  "previousReleaseTag": "@telus-uds/components-base/v1.2.0",
-  "changelog": "## [1.3.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.2.0...@telus-uds/components-base/v1.3.0) (2022-03-21)\n\n\n### Features\n\n* **components-base:** add common system props handler and restructure props-related utils ([#1444](https://github.com/telus/universal-design-system/issues/1444)) ([ab655ec](https://github.com/telus/universal-design-system/commit/ab655ec61796b6a6d7094c2c42ceef8b5197c634))\n* **docs:** add tokens override documentation ([#1330](https://github.com/telus/universal-design-system/issues/1330)) ([49092e5](https://github.com/telus/universal-design-system/commit/49092e5d5f6c2d3a85de930a74a03afff8a60062))\n\n\n### Bug Fixes\n\n* **base:** inherit FlexGrid.Col responsive size if 0 ([#1419](https://github.com/telus/universal-design-system/issues/1419)) ([9defeb0](https://github.com/telus/universal-design-system/commit/9defeb0da08099afb83df9e7ee902f037cb4de02))\n* **ds-allium:** fix some errors in RN builds ([#1448](https://github.com/telus/universal-design-system/issues/1448)) ([8bc4778](https://github.com/telus/universal-design-system/commit/8bc477890f0183584fdc1009d7929b71d23820a3))\n",
-  "releaseTag": "@telus-uds/components-base/v1.3.0",
-  "newVersion": "1.3.0",
-  "packageName": "@telus-uds/components-base"
-}