@telus-uds/components-base 1.5.0 → 1.7.0

package/src/TextInput/TextInput.jsx

@@ -1,10 +1,13 @@
 import React, { forwardRef } from 'react'
-
+import { Platform } from 'react-native'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   inputSupportsProps,
   selectSystemProps,
+  textInputHandlerProps,
+  textInputProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -14,7 +17,10 @@ import textInputPropTypes from './propTypes'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
+  focusHandlerProps,
   inputSupportsProps,
+  textInputHandlerProps,
+  textInputProps,
   viewProps
 ])
 
@@ -36,8 +42,14 @@ 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 { props: supportsProps, ...selectedProps } = selectProps(rest)
+const TextInput = forwardRef(({ tokens, variant = {}, pattern, ...rest }, ref) => {
+  React.useEffect(() => {
+    if (Platform.OS === 'web' && pattern && ref.current) {
+      // eslint-disable-next-line no-param-reassign
+      ref.current.pattern = pattern
+    }
+  }, [ref, pattern])
+  const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
     ...selectedProps,

package/src/TextInput/TextInputBase.jsx

@@ -7,12 +7,19 @@ import {
   a11yProps,
   getTokensPropType,
   selectSystemProps,
+  textInputHandlerProps,
+  textInputProps,
   useInputValue,
   variantProp,
   viewProps
 } from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  textInputHandlerProps,
+  textInputProps,
+  viewProps
+])
 
 const selectInputStyles = (
   {

package/src/TextInput/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
 
 const textInputPropTypes = {
   /**
@@ -23,7 +24,12 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  ...Platform.select({
+    web: {
+      pattern: PropTypes.string
+    }
+  })
 }
 
 export default textInputPropTypes

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -8,6 +8,7 @@ import StackView from '../StackView'
 import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   selectTokens,
   pressProps,
@@ -18,7 +19,12 @@ import {
 } from '../utils'
 import { useInputValue } from '../utils/input'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  pressProps,
+  viewProps
+])
 
 const selectButtonTokens = (tokens) =>
   selectTokens('Button', {
@@ -111,7 +117,7 @@ const ToggleSwitch = forwardRef(
     return (
       <StackView space={2} direction="row">
         {Boolean(label) && (
-          <View style={selectLabelStyles(themeTokens)}>
+          <View style={[selectLabelStyles(themeTokens), staticStyles.containText]}>
             <InputLabel
               forId={inputId}
               label={label}
@@ -210,6 +216,9 @@ const staticStyles = StyleSheet.create({
   switch: {
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  containText: {
+    flexShrink: 1
   }
 })
 

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -10,16 +10,21 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   getTokensPropType,
-  pressProps,
   selectSystemProps,
+  useMultipleInputValues,
   variantProp,
   viewProps
-} from '../utils/props'
-import { useMultipleInputValues } from '../utils/input'
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+} from '../utils'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 const ToggleSwitchGroup = forwardRef(
   (
     {
@@ -66,6 +71,11 @@ const ToggleSwitchGroup = forwardRef(
     })
     const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch'
 
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
     const toggleSwitches = items.map(
       (
         {
@@ -74,7 +84,8 @@ const ToggleSwitchGroup = forwardRef(
           accessibilityLabel = label,
           onChange: itemOnChange,
           ref: itemRef,
-          tooltip: itemTooltip
+          tooltip: itemTooltip,
+          ...itemRest
         },
         index
       ) => {
@@ -104,6 +115,7 @@ const ToggleSwitchGroup = forwardRef(
             label={label}
             tooltip={itemTooltip}
             {...itemA11y}
+            {...selectItemProps(itemRest)}
           />
         )
       }
@@ -143,6 +155,7 @@ ToggleSwitchGroup.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.shape({
+      ...selectedItemPropTypes,
       /**
        * The text displayed to the user on the label.
        */

package/src/Typography/Typography.jsx

@@ -13,6 +13,7 @@ import {
   headingTags,
   selectSystemProps,
   textTags,
+  textProps,
   viewProps,
   getA11yPropsFromHtmlTag
 } from '../utils'
@@ -20,7 +21,8 @@ import {
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps])
 
 const selectTextStyles = ({
   fontWeight,
@@ -62,23 +64,24 @@ const Typography = forwardRef(
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
-    const textProps = {
+    const resolvedTextProps = {
+      ...selectTextProps(rest),
       style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens),
       dataSet,
       maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
     }
 
-    const selectedProps = selectProps({
+    const containerProps = {
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...rest
-    })
+      ...selectContainerProps(rest)
+    }
 
     return block ? (
-      <View ref={ref} {...selectedProps}>
-        <Text {...textProps}>{children}</Text>
+      <View ref={ref} {...containerProps}>
+        <Text {...resolvedTextProps}>{children}</Text>
       </View>
     ) : (
-      <Text ref={ref} {...textProps} {...selectedProps}>
+      <Text ref={ref} {...containerProps} {...resolvedTextProps}>
         {children}
       </Text>
     )
@@ -87,7 +90,8 @@ const Typography = forwardRef(
 Typography.displayName = 'Typography'
 
 Typography.propTypes = {
-  ...selectedSystemPropTypes,
+  ...selectedContainerPropTypes,
+  ...selectedTextPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
   /**

package/src/index.js

@@ -50,7 +50,10 @@ export {
   useTheme,
   useSetTheme,
   useThemeTokens,
-  getThemeTokens
+  getThemeTokens,
+  applyOuterBorder,
+  applyTextStyles,
+  applyShadowToken
 } from './ThemeProvider'
 
 export * from './utils'

package/src/utils/containUniqueFields.js

@@ -0,0 +1,32 @@
+// Returns true if there are no duplicate values of the fields listed
+// in the `fields` array across the objects in the `items` array, false
+// otherwise.
+// Note that if a value of a field in an item is not set, it will be
+// excluded from comparison.
+const containUniqueFields = (items, fields) => {
+  const map = []
+
+  const itemsHaveDuplicateFields = items.some((item) =>
+    fields.some((field) => {
+      if (!map[field]) {
+        map[field] = []
+      }
+
+      if (!item[field]) {
+        // We exclude empty values from comparison
+        return false
+      }
+
+      // Duplicate found!
+      if (map[field][item[field]]) return true
+
+      map[field][item[field]] = true
+
+      return false
+    })
+  )
+
+  return !itemsHaveDuplicateFields
+}
+
+export default containUniqueFields

package/src/utils/index.js

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

package/src/utils/input.js

@@ -1,4 +1,7 @@
 import { useCallback, useRef, useState } from 'react'
+/**
+ * @typedef {import('react').SyntheticEvent} Event
+ */
 
 const pluralHooks = ['useMultipleInputValues']
 
@@ -51,16 +54,13 @@ Consumers of this hook must be one of:
  *
  * @param {string} hookName - optional, used for tailoring error messages
  *
- * @typedef {(oldValue: string|number|null) => string|number|null} UpdaterFunction - `setValue` takes a value or
- *          a function returning a new value from the old value
  * @returns {{
  *   currentValue: string|number|null
- *   setValue: (newValue: string|number|null|UpdaterFunction) => void
+ *   setValue: (newValue: string|number|null|(oldValue: string|number) => string|number, event: Event) => void
  *   resetValue: () => void
  *   isControlled: bool
  * }}
  */
-
 export const useInputValue = (props = {}, hookName = 'useInputValue') => {
   const isCurrentlyControlled = props.value !== undefined
   const [isControlled] = useState(isCurrentlyControlled)
@@ -108,12 +108,10 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
  *
  * @param {string} componentName - optional, used in error messages
  *
- * @typedef {(oldValues: string[]|number[]) => string[]|number[]} UpdaterFunction - `setValues` takes values or
- *          a function returning new values from old values
  * @returns {{
  *   currentValues: any
  *   resetValues: () => void
- *   setValues: (newValues: string[]|number[]|UpdaterFunction) => void
+ *   setValues: (newValues: string[]|number[]|(oldValues: string[]|number[]) => string[]|number[], event: Event) => void
  *   toggleOneValue: (value: string|number) => void
  *   unsetValues: () => void
  * }}

package/src/utils/props/handlerProps.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+
+export const focusHandlerProps = {
+  types: {
+    /**
+     * onBlur handler
+     */
+    onBlur: PropTypes.func,
+    /**
+     * onFocus handler
+     */
+    onFocus: PropTypes.func
+  },
+  select: ({ onBlur, onFocus }) => ({
+    onBlur,
+    onFocus
+  })
+}
+
+export const textInputHandlerProps = {
+  types: {
+    /**
+     * onChange handler
+     */
+    onChange: PropTypes.func,
+    /**
+     * onChangeText handler
+     */
+    onChangeText: PropTypes.func,
+    /**
+     * onSubmit handler
+     */
+    onSubmit: PropTypes.func,
+    /**
+     * onSubmitEditing handler
+     */
+    onSubmitEditing: PropTypes.func
+  },
+  select: ({ onChange, onChangeText, onSubmit, onSubmitEditing }) => ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  })
+}
+
+export default { focusHandlerProps, textInputHandlerProps }

package/src/utils/props/index.js

@@ -1,4 +1,5 @@
 export * from './tokens'
+export * from './handlerProps'
 export { default as a11yProps } from './a11yProps'
 export { default as clickProps } from './clickProps'
 export { default as copyPropTypes } from './copyPropTypes'
@@ -12,5 +13,7 @@ export { default as rectProp } from './rectProp'
 export { default as responsiveProps } from './responsiveProps'
 export { default as spacingProps } from './spacingProps'
 export { default as selectSystemProps } from './selectSystemProps'
+export { default as textInputProps } from './textInputProps'
+export { default as textProps } from './textProps'
 export { default as variantProp } from './variantProp'
 export { default as viewProps } from './viewProps'

package/src/utils/props/inputSupportsProps.js

@@ -28,15 +28,14 @@ export default {
      */
     validation: PropTypes.oneOf(['error', 'success'])
   },
-  select: ({ label, hint, hintPosition, feedback, tooltip, validation, ...rest }) => ({
-    props: {
+  select: ({ label, hint, hintPosition, feedback, tooltip, validation }) => ({
+    supportsProps: {
       label,
       hint,
       hintPosition,
       feedback,
       tooltip,
       validation
-    },
-    ...rest
+    }
   })
 }

package/src/utils/props/linkProps.js

@@ -22,16 +22,13 @@ export default {
    */
   select: getPropSelector(linkPropTypes),
   /**
-   * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
+   * Turn hrefs into press handlers that open links on Native.
    *
    * @param {({ onPress?: () => void, href?: string })}
-   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
-   * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
+   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
+   * handler is provided (expects calling component to render as `<a href={href}>` on web).
    */
   handleHref: ({ onPress, href }) => {
-    if (!href && !onPress) {
-      throw new Error('handleHref requires either href or onPress')
-    }
     return Platform.select({
       web: onPress,
       default: (...args) => {

package/src/utils/props/textInputProps.js

@@ -0,0 +1,177 @@
+import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+import getPropSelector from './getPropSelector'
+
+// This file contains common props for components that render a React Native TextInput
+// It excludes interaction handler functions which are in `./handlerProps.js`
+
+/**
+ * TextInput (web and native) supports some common React Native props
+ * shared with React Native's Text component.
+ */
+const textProps = {
+  maxFontSizeMultiplier: PropTypes.number,
+  nativeId: PropTypes.string,
+  onLayout: PropTypes.func
+}
+
+/**
+ * UDS text inputs accept props related to UDS's useInputValue hook
+ */
+const inputValueProps = {
+  value: PropTypes.string,
+  initialValue: PropTypes.string,
+  readOnly: PropTypes.bool
+}
+
+/**
+ * This collection adds props that can be passed through to both React Native's
+ * and React Native Web's implementations of the React Native TextInput component.
+ */
+const crossPlatform = {
+  ...textProps,
+  ...inputValueProps,
+  /**
+   * Web and Android; 'off' disables device autocomplete, other strings are platform-specific.
+   * Valid values on Native: https://reactnative.dev/docs/textinput#autocomplete-android
+   * Valid values on Web: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
+  autoComplete: PropTypes.string,
+  /**
+   * On Native, default is `true`, passing `false` disables autoCorrect.
+   * On web, only supported by Safari and expects "on" or "off" strings.
+   */
+  autoCorrect: PropTypes.oneOf([true, false, 'on', 'off']),
+  /**
+   * Focuses the element on mount. On Web, only the first form element with autoFocus is focussed.
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * Default is `true` for single line, `false` for multi-line
+   */
+  blurOnSubmit: PropTypes.bool,
+  /**
+   * iOS and Web only, no effect on Android
+   */
+  clearTextOnFocus: PropTypes.bool,
+  /**
+   * Default is `true`. On web, this works by mapping to input's `readonly` attribute
+   */
+  editable: PropTypes.bool,
+  /**
+   * See documentation for allowed values (varies between Web, Android and iOS) and important notes:
+   * - Native: https://reactnative.dev/docs/textinput#keyboardtype
+   * - Web: equivalent to `inputmode` but see https://necolas.github.io/react-native-web/docs/text-input/
+   */
+  keyboardType: PropTypes.string,
+  /**
+   * Uses native tools (no flicker) to cap the maximum number of characters.
+   * On Web, works via `maxlength` attr.
+   */
+  maxLength: PropTypes.number,
+  /**
+   * If passed as true, the text input can be multiple lines.
+   *
+   * > It is important to note that this aligns the text to the top on iOS, and centers it on Android.
+   * > Use with textAlignVertical set to top for the same behavior in both platforms.
+   */
+  multiline: PropTypes.bool,
+  /**
+   * Web and Android only, requires `multiline` to be `true`.
+   */
+  numberOfLines: PropTypes.number,
+  /**
+   * Text to display when no value set.
+   * Accesibility guidelines recommend using labels to describe the input and using
+   * placeholders rarely and sparingly to prompt a particular format.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * Sets placeholder colour. On Web, uses `::placeholder { color: ... }` selector.
+   */
+  placeholderTextColor: PropTypes.string,
+  /**
+   * One of a subset of platform-specific options that controls labelling and presentation
+   * in on-screen keyboards and accessibility tools. Uses `enterkeyhint` attr on Web.
+   *
+   * 'done', 'go', 'next', 'search', and 'send' are available for Web, Android and iOS.
+   */
+  returnKeyType: PropTypes.string,
+  /**
+   * Obscures passwords and similar. Equivalent to type="password" on Web.
+   * Does not work if multiline is true.
+   */
+  secureTextEntry: PropTypes.bool,
+  /**
+   * If true, all text will automatically be selected on focus.
+   */
+  selectTextOnFocus: PropTypes.bool,
+  /**
+   * Web and iOS. On iOS, default inherits from `autoCorrect`.
+   * On Web, equivalent to `spellcheck` attr.
+   */
+  spellCheck: PropTypes.bool
+}
+
+/**
+ * These web-only props all control HTML `input` attributes of the same name.
+ * Refer to general HTML documentation for more details.
+ */
+const webOnly = {
+  disabled: PropTypes.bool,
+  dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
+  lang: PropTypes.string
+}
+
+/**
+ * These props are supported in React Native but not React Native Web.
+ *
+ * React Native text inputs can be quirky, so a full set of props should be allowed to handle edge cases.
+ * Refer to React Native documentation for details, allowed values, and Android/iOS support and versions:
+ * https://reactnative.dev/docs/textinput
+ *
+ * Beware that many React Native text input props apply via complicated logic that chooses a built-in
+ * native component based on the values of multiple boolean flags, and may sometimes appear to pick an
+ * option that is inappropriate for one flag based on the values of one or more other other flags.
+ */
+const nativeOnly = {
+  caretHidden: PropTypes.bool,
+  clearButtonMode: PropTypes.string,
+  contextMenuHidden: PropTypes.bool,
+  dataDetectorTypes: PropTypes.string,
+  disableFullscreenUI: PropTypes.bool,
+  enablesReturnKeyAutomatically: PropTypes.bool,
+  importantForAutofill: PropTypes.string,
+  inlineImageLeft: PropTypes.string,
+  keyboardAppearance: PropTypes.string,
+  returnKeyLabel: PropTypes.string,
+  rejectResponderTermination: PropTypes.bool,
+  scrollEnabled: PropTypes.bool,
+  selection: PropTypes.object,
+  selectionColor: PropTypes.string,
+  showSoftInputOnFocus: PropTypes.bool,
+  textAlign: PropTypes.string,
+  textContentType: PropTypes.string,
+  passwordRules: PropTypes.string,
+  textBreakStrategy: PropTypes.string,
+  underlineColorAndroid: PropTypes.string
+}
+
+export default {
+  /**
+   * Subset of proptypes that can be passed down to a React Native or React Native Web
+   * `TextInput` component. Allow regardless of platform, so cross-platform apps don't warn.
+   */
+  types: { ...crossPlatform, ...webOnly, ...nativeOnly },
+  /**
+   * Filters a props object. Return only platform-appropriate TextInput props, native inputs
+   * may throw errors on receiving unknown props.
+   */
+  select: getPropSelector({
+    ...crossPlatform,
+    ...Platform.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+}

package/src/utils/props/textProps.js

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+import getPropSelector from './getPropSelector'
+
+// These are the props accepted specifically on React Native (Web) `Text` elements.
+// They are generally concerned with the behaviour of multiline text.
+
+const crossPlatform = {
+  /**
+   * Truncates text after this many lines with an ellipsis at the end.
+   * On native, ellipsis behaviour may be changed with `ellipsizeMode` prop.
+   */
+  numberOfLines: PropTypes.number,
+  /**
+   * Default is true on web and false on native
+   */
+  selectable: PropTypes.bool
+}
+
+/**
+ * See React Native docs for latest details on these.
+ * https://reactnative.dev/docs/text
+ */
+const nativeOnly = {
+  ellipsizeMode: PropTypes.string,
+  maxFontSizeMultiplier: PropTypes.number,
+  minimumFontScale: PropTypes.number,
+  onTextLayout: PropTypes.func,
+  suppressHighlighting: PropTypes.bool,
+  textBreakStrategy: PropTypes.string
+}
+
+/**
+ * These set HTML attributes of the same name.
+ */
+const webOnly = {
+  dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
+  lang: PropTypes.string
+}
+
+export default {
+  /**
+   * Set of prop types specific to React Native and React Native Web `Text`,
+   * which largely revolve around the behaviour of multiline non-pressable text.
+   */
+  types: { ...crossPlatform, ...webOnly, ...nativeOnly },
+  /**
+   * Filters a props object, returning only props specific to `Text` elements
+   * on the current platform. Does not include props applicable to `Text` and `View`.
+   */
+  select: getPropSelector({
+    ...crossPlatform,
+    ...Platform.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+}