@telus-uds/components-base 1.18.1 → 1.20.0

package/src/Search/Search.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
@@ -17,7 +17,6 @@ import {
 } from '../utils'
 import TextInputBase from '../TextInput/TextInputBase'
 import ButtonBase from '../Button/ButtonBase'
-import StackView from '../StackView'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
@@ -42,7 +41,6 @@ const selectInputTokens = ({ searchTokens, buttonTokens, buttonsGapSize }) => {
 }
 const selectButtonTokens = (tokens) => selectTokens('Button', tokens)
 
-const selectIconsContainerStyle = ({ paddingRight }) => ({ paddingRight })
 const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size: iconSize })
 
 /**
@@ -110,7 +108,8 @@ const Search = forwardRef(
 
     const handleClear = (event) => {
       setValue('', event)
-      if (onClear !== undefined) onClear('', event)
+      onClear?.('', event)
+      ref?.current?.focus()
     }
 
     const handleFocus = (event) => {
@@ -126,7 +125,7 @@ const Search = forwardRef(
     const { nativeID, testID, ...containerProps } = selectContainerProps(rest)
 
     return (
-      <View style={staticStyles.container} {...containerProps}>
+      <View {...containerProps}>
         <TextInputBase
           nativeID={nativeID}
           testID={testID}
@@ -150,28 +149,28 @@ const Search = forwardRef(
           onSubmitEditing={handleSubmit}
           onFocus={handleFocus}
           accessibilityLabel={a11yLabelText}
-        />
-        <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
-          <StackView direction="row" space={buttonsGap}>
-            {ClearButtonIcon && !isEmpty && (
+          buttons={[
+            ClearButtonIcon && !isEmpty && (
               <ButtonBase
-                onPress={handleClear}
-                inactive={inactive}
-                accessibilityRole="button"
                 accessibilityLabel={getCopy('clearButtonAccessibilityLabel')}
+                accessibilityRole="button"
+                inactive={inactive}
+                key="clear"
+                onPress={handleClear}
                 tokens={(appearances) => selectButtonTokens(getButtonTokens(appearances))}
               >
                 {(buttonState) => (
                   <ClearButtonIcon {...selectIconTokens(getButtonTokens(buttonState))} />
                 )}
               </ButtonBase>
-            )}
-            {SubmitButtonIcon && (
+            ),
+            SubmitButtonIcon && (
               <ButtonBase
-                onPress={handleSubmit}
-                inactive={inactive}
-                accessibilityRole="button"
                 accessibilityLabel={getCopy('submitButtonAccessibilityLabel')}
+                accessibilityRole="button"
+                inactive={inactive}
+                key="submit"
+                onPress={handleSubmit}
                 tokens={(buttonState) =>
                   selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
                 }
@@ -182,9 +181,9 @@ const Search = forwardRef(
                   />
                 )}
               </ButtonBase>
-            )}
-          </StackView>
-        </View>
+            )
+          ]}
+        />
       </View>
     )
   }
@@ -248,16 +247,3 @@ Search.propTypes = {
 }
 
 export default Search
-
-const staticStyles = StyleSheet.create({
-  container: {
-    // No styles needed here except the View defaults (position: relative etc)
-  },
-  iconsContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-})

package/src/Select/Picker.native.jsx

@@ -6,28 +6,43 @@ import NativePicker from 'react-native-picker-select'
 import { a11yProps, componentPropType } from '../utils'
 import Group from './Group'
 
-// styling of the native input is very limited, most of the styles have to be applied to an additional View
-const selectAndroidInputStyles = ({
-  height = 0,
-  paddingBottom = 0,
-  paddingTop = 0,
-  borderWidth = 0,
-  color
-}) => ({
-  height: height - paddingTop - paddingBottom - 2 * borderWidth,
+import {
+  ANDROID_HEIGHT_OFFSET,
+  ANDROID_HORIZONTAL_PADDING_OFFSET,
+  ANDROID_DEFAULT_PADDING
+} from './constants'
+
+// Styling of the native input is very limited, most of the styles have to be applied to an additional View
+const selectAndroidInputStyles = ({ height = 0, color }) => ({
+  height,
+  paddingBottom: 0,
+  paddingTop: 0,
   color
 })
 
-// the native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
-const selectAndroidContainerStyles = ({ paddingLeft = 0, paddingRight = 0, ...rest }) => ({
-  paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
-  paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
+// The native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
+const selectAndroidContainerStyles = ({
+  paddingLeft = ANDROID_DEFAULT_PADDING,
+  paddingRight = ANDROID_DEFAULT_PADDING,
   ...rest
+}) => ({
+  ...rest,
+  paddingLeft:
+    paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET
+      ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET
+      : ANDROID_DEFAULT_PADDING,
+  paddingRight:
+    paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET
+      ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET
+      : ANDROID_DEFAULT_PADDING,
+  paddingBottom: ANDROID_DEFAULT_PADDING,
+  paddingTop: ANDROID_DEFAULT_PADDING,
+  height: rest.height + ANDROID_HEIGHT_OFFSET
 })
 
 const Picker = forwardRef(
   ({ value, onChange, onFocus, onBlur, style, inactive, children, placeholder, ...rest }, ref) => {
-    // ungroup items, since there's no way to support groups on native
+    // Ungroup items, since there's no way to support groups on native
     const flatChildren = Children.toArray(children).flatMap((child) => {
       if (child.type === Group) {
         return child.props.children

package/src/Select/Select.jsx

@@ -16,6 +16,8 @@ import {
 import Picker from './Picker'
 import InputSupports from '../InputSupports'
 
+import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
   inputSupportsProps,
@@ -133,7 +135,11 @@ const selectValidationIconContainerStyles = ({
   paddingBottom
 }) => ({
   paddingRight: icon ? paddingRight + iconSize : paddingRight,
-  paddingBottom
+  ...(Platform.OS === 'android'
+    ? {
+        paddingBottom: paddingBottom + ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
+      }
+    : { paddingBottom })
 })
 
 /**

package/src/Select/constants.js

@@ -0,0 +1,5 @@
+// Because Android
+export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5
+export const ANDROID_HEIGHT_OFFSET = 12
+export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8
+export const ANDROID_DEFAULT_PADDING = 0

package/src/StepTracker/Step.jsx

@@ -138,7 +138,11 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
       accessibilityCurrent={status === stepIndex}
       {...selectProps(rest)}
     >
-      <StackView direction="row" space={0} tokens={{ alignItems: 'center', flexGrow: 0 }}>
+      <StackView
+        direction="row"
+        space={0}
+        tokens={{ alignItems: 'center', flexGrow: 0, justifyContent: 'center' }}
+      >
         <View
           style={[staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]}
         />

package/src/Tags/Tags.jsx

@@ -30,39 +30,49 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const selectIconTextTokens = ({
-  icon,
-  iconPosition,
-  iconSpace,
-  iconSize,
-  iconColor,
-  iconBackground,
-  iconBorderRadius,
-  iconAlignSelf,
-  iconPadding,
-  iconTranslateX,
-  iconTranslateY
-}) => ({
-  icon,
-  iconPosition,
-  iconSpace,
-  iconWrapperStyle: {
-    backgroundColor: iconBackground,
-    borderRadius: iconBorderRadius,
-    alignSelf: iconAlignSelf,
-    padding: iconPadding,
-    ...Platform.select({
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      web: { transition: 'color 200ms, background 200ms' }
-    })
+const separateIconTextTokens = (
+  {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconSize,
+    iconColor,
+    iconBackground,
+    iconBorderRadius,
+    iconAlignSelf,
+    iconPadding,
+    iconTranslateX,
+    iconTranslateY,
+    ...rest
   },
-  iconTokens: {
-    size: iconSize,
-    color: iconColor,
-    translateX: iconTranslateX,
-    translateY: iconTranslateY
-  }
-})
+  returnRest
+) =>
+  returnRest
+    ? rest
+    : {
+        icon,
+        iconPosition,
+        iconSpace,
+        iconWrapperStyle: {
+          backgroundColor: iconBackground,
+          borderRadius: iconBorderRadius,
+          alignSelf: iconAlignSelf,
+          padding: iconPadding,
+          ...Platform.select({
+            // TODO: https://github.com/telus/universal-design-system/issues/487
+            web: { transition: 'color 200ms, background 200ms' }
+          })
+        },
+        iconTokens: {
+          size: iconSize,
+          color: iconColor,
+          translateX: iconTranslateX,
+          translateY: iconTranslateY
+        }
+      }
+
+const selectIconTextTokens = (tokens) => separateIconTextTokens(tokens, false)
+const selectNonIconTextTokens = (tokens) => separateIconTextTokens(tokens, true)
 
 const Tags = forwardRef(
   (
@@ -87,7 +97,10 @@ const Tags = forwardRef(
     const { direction, space } = themeTokens
 
     const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant)
-    const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
+
+    const getButtonTokens = (buttonState) =>
+      // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+      selectTokens('Button', selectNonIconTextTokens(getItemTokens(buttonState)))
 
     const { currentValues, toggleOneValue } = useMultipleInputValues({
       initialValues,

package/src/TextInput/TextInput.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
 import {
   a11yProps,
   focusHandlerProps,
@@ -63,6 +64,10 @@ TextInput.displayName = 'TextInput'
 TextInput.propTypes = {
   ...selectedSystemPropTypes,
   ...textInputPropTypes,
+  /**
+   * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
+   */
+  onClear: PropTypes.func,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
 }

package/src/TextInput/TextInputBase.jsx

@@ -1,18 +1,22 @@
-import React, { forwardRef, useEffect, useState } from 'react'
-import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
-
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
+import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
+import StackView from '../StackView'
+import IconButton from '../IconButton'
 import {
   a11yProps,
   getTokensPropType,
   selectSystemProps,
   textInputHandlerProps,
   textInputProps,
+  useCopy,
   useInputValue,
+  useSpacingScale,
   variantProp,
   viewProps
 } from '../utils'
+import dictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -116,27 +120,37 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({
   color: iconColor
 })
 
-const selectIconContainerStyles = ({ paddingRight, paddingBottom }) => ({
-  paddingRight,
+const selectIconContainerStyles = (
+  { buttonSize, buttonsGapSize, paddingRight, paddingBottom },
+  buttonCount
+) => ({
+  paddingRight: paddingRight + buttonCount * (buttonSize + buttonsGapSize),
   paddingBottom
 })
 
+const selectButtonsContainerStyle = ({ buttonsPaddingRight }) => ({
+  paddingRight: buttonsPaddingRight
+})
+
 const TextInputBase = forwardRef(
   (
     {
-      value,
+      buttons = [],
+      copy = 'en',
       height,
-      initialValue,
       inactive,
-      readOnly,
+      initialValue,
+      onBlur,
       onChange,
       onChangeText,
+      onClear,
       onFocus,
-      onBlur,
-      onMouseOver,
       onMouseOut,
+      onMouseOver,
       pattern,
+      readOnly,
       tokens,
+      value,
       variant = {},
       ...rest
     },
@@ -162,14 +176,18 @@ const TextInputBase = forwardRef(
       if (typeof onMouseOut === 'function') onMouseOut(event)
     }
 
-    const { currentValue, setValue, isControlled } = useInputValue({
+    const defaultRef = useRef()
+    const inputRef = ref ?? defaultRef
+
+    const { currentValue, resetValue, setValue, isControlled, isDirty } = useInputValue({
       value,
       initialValue,
+      inputRef,
       onChange,
       readOnly
     })
 
-    const element = ref?.current
+    const element = inputRef?.current
     useEffect(() => {
       if (Platform.OS === 'web' && pattern && element) {
         // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
@@ -188,7 +206,25 @@ const TextInputBase = forwardRef(
 
     const themeTokens = useThemeTokens('TextInput', tokens, variant, states)
 
-    const { icon: IconComponent } = themeTokens
+    const { buttonsGap, clearButtonIcon: ClearButtonIcon, icon: IconComponent } = themeTokens
+    const buttonsGapSize = useSpacingScale(buttonsGap)
+    const getCopy = useCopy({ dictionary, copy })
+    if (onClear && isDirty) {
+      const handleClear = (event) => {
+        onClear?.(event)
+        resetValue(event)
+        inputRef?.current?.focus()
+      }
+      buttons?.unshift(
+        <IconButton
+          accessibilityLabel={getCopy('clearButtonAccessibilityLabel')}
+          icon={ClearButtonIcon}
+          key="clear"
+          onPress={handleClear}
+          variant={{ compact: true }}
+        />
+      )
+    }
 
     const inputProps = {
       ...selectProps(rest),
@@ -209,15 +245,25 @@ const TextInputBase = forwardRef(
 
     return (
       <View style={selectOuterBorderStyles(themeTokens)}>
-        <NativeTextInput ref={ref} style={nativeInputStyle} {...inputProps} />
+        <NativeTextInput ref={inputRef} style={nativeInputStyle} {...inputProps} />
         {IconComponent && (
           <View
             pointerEvents="none" // avoid hijacking input press events
-            style={[staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]}
+            style={[
+              staticStyles.iconContainer,
+              selectIconContainerStyles({ ...themeTokens, buttonsGapSize }, buttons?.length)
+            ]}
           >
             <IconComponent {...selectIconTokens(themeTokens)} />
           </View>
         )}
+        {buttons?.length > 0 && (
+          <View style={[staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)]}>
+            <StackView direction="row" space={buttonsGap}>
+              {buttons}
+            </StackView>
+          </View>
+        )}
       </View>
     )
   }
@@ -226,24 +272,43 @@ TextInputBase.displayName = 'TextInputBase'
 
 TextInputBase.propTypes = {
   ...selectedSystemPropTypes,
-  value: PropTypes.string,
+  buttons: PropTypes.arrayOf(PropTypes.node),
+  /**
+   * Select English or French copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: PropTypes.oneOfType([
+    PropTypes.oneOf(['en', 'fr']),
+    PropTypes.shape({
+      clearButtonAccessibilityLabel: PropTypes.string
+    })
+  ]),
   height: PropTypes.number,
-  initialValue: PropTypes.string,
   inactive: PropTypes.bool,
-  readOnly: PropTypes.bool,
+  initialValue: PropTypes.string,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onChangeText: PropTypes.func,
+  onClear: PropTypes.func,
   onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  readOnly: PropTypes.bool,
   tokens: getTokensPropType('TextInput', 'TextArea'),
+  value: PropTypes.string,
   variant: variantProp.propType
 }
 
 export default TextInputBase
 
 const staticStyles = StyleSheet.create({
+  buttonsContainer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  },
   iconContainer: {
     position: 'absolute',
     right: 0,

package/src/TextInput/dictionary.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    clearButtonAccessibilityLabel: 'Clear'
+  },
+  fr: {
+    clearButtonAccessibilityLabel: 'Effacer'
+  }
+}

package/src/ThemeProvider/ThemeProvider.jsx

@@ -12,7 +12,8 @@ const ThemeProvider = ({
   children,
   defaultTheme,
   // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
-  themeOptions = { forceAbsoluteFontSizing: true }
+  // TODO: switch `forceZIndex` to be false by default in the next major version
+  themeOptions = { forceAbsoluteFontSizing: true, forceZIndex: true }
 }) => {
   const [theme, setTheme] = useState(defaultTheme)
 
@@ -43,9 +44,12 @@ ThemeProvider.propTypes = {
    *   relative sizing (in `rem`, scales depending on the browser settings)
    * - `contentMaxWidth`: allows configuration of the content max width to be used in components
    *   such as Footnote and Notification to avoid content to stretch width more then the page's width
+   * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
+   *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool,
     contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
   })
 }

package/src/index.js

@@ -21,6 +21,7 @@ export { default as InputSupports } from './InputSupports'
 export * from './Link'
 export { default as List, ListItem, ListBase } from './List'
 export { default as Modal } from './Modal'
+export { default as MultiSelectFilter } from './MultiSelectFilter'
 export { default as Notification } from './Notification'
 export { default as Pagination } from './Pagination'
 export { default as Progress } from './Progress'
@@ -29,6 +30,7 @@ export { default as Radio } from './Radio'
 export * from './Radio'
 export { default as RadioCard } from './RadioCard'
 export * from './RadioCard'
+export { default as Responsive } from './Responsive'
 export { default as Search } from './Search'
 export { default as Select } from './Select'
 export { default as SideNav } from './SideNav'

package/src/utils/BaseView/BaseView.jsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react'
+import { View as NativeView, StyleSheet } from 'react-native'
+import PropTypes from 'prop-types'
+import { useTheme } from '../../ThemeProvider'
+
+/**
+ * Identical to React Native's View and supporting all the same props, but with:
+ *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
+ */
+const BaseView = forwardRef(({ children, style, ...rest }, ref) => {
+  const { themeOptions } = useTheme()
+  const styleProp = Array.isArray(style) ? [...style] : [style]
+
+  if (!themeOptions.forceZIndex) {
+    styleProp.unshift(styles.resetZIndex)
+  }
+
+  return (
+    <NativeView {...rest} style={styleProp} ref={ref}>
+      {children}
+    </NativeView>
+  )
+})
+
+BaseView.displayName = 'BaseView'
+
+const styles = StyleSheet.create({
+  resetZIndex: {
+    zIndex: 'auto'
+  }
+})
+
+BaseView.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+}
+
+export default BaseView

package/src/utils/BaseView/BaseView.native.jsx

@@ -0,0 +1,6 @@
+import { View as BaseView } from 'react-native'
+
+/**
+ * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
+ */
+export default BaseView

package/src/utils/BaseView/index.js

@@ -0,0 +1,3 @@
+import BaseView from './BaseView'
+
+export default BaseView

package/src/utils/index.js

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

package/src/utils/input.js

@@ -66,7 +66,7 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
   const [isControlled] = useState(isCurrentlyControlled)
   validateProps(props, { isControlled, isCurrentlyControlled }, hookName)
 
-  const { value, initialValue, onChange, readOnly = false } = props
+  const { value, initialValue, inputRef, onChange, readOnly = false } = props
   const [ownValue, setOwnValue] = useState(!isControlled && initialValue)
   const currentValue = isControlled ? value : ownValue
 
@@ -76,19 +76,24 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
   // Make current value accessible inside useCallback without rememoizing every time the value changes
   valueRef.current.value = currentValue
 
+  const isDirty = currentValue !== valueRef.current.initial
+
   const setValue = useCallback(
     (arg, event) => {
       if (readOnly) return
       const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg
-      if (!isControlled) setOwnValue(newValue)
+      if (!isControlled) {
+        setOwnValue(newValue)
+        if (inputRef?.current) inputRef.current.value = newValue ?? ''
+      }
       // Call onChange handler if there's something for it to handle (event or a changed value)
       if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event)
     },
-    [isControlled, onChange, readOnly]
+    [inputRef, isControlled, onChange, readOnly]
   )
   const resetValue = useCallback((event) => setValue(valueRef.current.initial, event), [setValue])
 
-  return { currentValue, setValue, resetValue, isControlled }
+  return { currentValue, setValue, resetValue, isControlled, isDirty }
 }
 
 /**

package/src/utils/props/handlerProps.js

@@ -26,6 +26,10 @@ const textInputHandlerProps = {
      * onChangeText handler
      */
     onChangeText: PropTypes.func,
+    /**
+     * onClear handler
+     */
+    onClear: PropTypes.func,
     /**
      * onSubmit handler
      */