@telus-uds/components-base 0.0.2-prerelease.9 → 1.1.0

package/src/Search/Search.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { forwardRef, useState } from 'react'
 import { View, StyleSheet } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -41,117 +41,124 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size:
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-const Search = ({
-  initialValue = '',
-  placeholder = 'Search',
-  inactive,
-  onChange,
-  onSubmit,
-  onClear,
-  accessibilityLabel,
-  copy = 'en',
-  tokens,
-  variant
-}) => {
-  const [value, setValue] = useState(initialValue)
-  const themeTokens = useThemeTokens('Search', tokens, variant)
-  const buttonTokens = useThemeTokens('SearchButton', tokens, variant)
-
-  const getThemeTokens = useThemeTokensCallback('Search', tokens, variant)
-  const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant)
-
-  // TODO: support overriding the a11y props using a custom dictionary
-  const getCopy = useCopy({ dictionary, copy })
-
-  const {
-    placeholderColor,
-    buttonsGap,
-    clearButtonIcon: ClearButtonIcon,
-    submitButtonIcon: SubmitButtonIcon
-  } = themeTokens
-
-  // get the actual gap value for the current viewport
-  const buttonsGapSize = useSpacingScale(buttonsGap)
-
-  const handleSubmit = () => {
-    if (onSubmit !== undefined) {
-      onSubmit(value)
+const Search = forwardRef(
+  (
+    {
+      initialValue = '',
+      placeholder = 'Search',
+      inactive,
+      onChange,
+      onSubmit,
+      onClear,
+      accessibilityLabel,
+      copy = 'en',
+      tokens,
+      variant
+    },
+    ref
+  ) => {
+    const [value, setValue] = useState(initialValue)
+    const themeTokens = useThemeTokens('Search', tokens, variant)
+    const buttonTokens = useThemeTokens('SearchButton', tokens, variant)
+
+    const getThemeTokens = useThemeTokensCallback('Search', tokens, variant)
+    const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant)
+
+    // TODO: support overriding the a11y props using a custom dictionary
+    const getCopy = useCopy({ dictionary, copy })
+
+    const {
+      placeholderColor,
+      buttonsGap,
+      clearButtonIcon: ClearButtonIcon,
+      submitButtonIcon: SubmitButtonIcon
+    } = themeTokens
+
+    // get the actual gap value for the current viewport
+    const buttonsGapSize = useSpacingScale(buttonsGap)
+
+    const handleSubmit = (event) => {
+      if (onSubmit !== undefined) {
+        onSubmit(value, event)
+      }
     }
-  }
 
-  const handleChange = (currentValue) => {
-    setValue(currentValue)
+    const handleChange = (currentValue, event) => {
+      setValue(currentValue, event)
 
-    if (onChange !== undefined) onChange(currentValue)
-  }
+      if (onChange !== undefined) onChange(currentValue, event)
+    }
 
-  const handleClear = () => {
-    setValue('')
+    const handleClear = (event) => {
+      setValue('', event)
 
-    if (onClear !== undefined) onClear()
-    if (onChange !== undefined) onChange('')
-  }
+      if (onClear !== undefined) onClear('', event)
+      if (onChange !== undefined) onChange('', event)
+    }
 
-  const isEmpty = value === ''
-
-  return (
-    <View>
-      <TextInputBase
-        tokens={(appearances) =>
-          selectInputTokens({
-            searchTokens: getThemeTokens(appearances),
-            buttonTokens,
-            buttonsGapSize,
-            isEmpty
-          })
-        }
-        placeholder={placeholder}
-        placeholderTextColor={placeholderColor}
-        inactive={inactive}
-        enablesReturnKeyAutomatically
-        returnKeyType="search"
-        value={value}
-        onChange={handleChange}
-        onSubmitEditing={handleSubmit}
-        accessibilityLabel={accessibilityLabel || getCopy('accessibilityLabel')}
-      />
-      <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
-        <StackView direction="row" space={buttonsGap}>
-          {ClearButtonIcon && !isEmpty && (
-            <ButtonBase
-              onPress={handleClear}
-              inactive={inactive}
-              accessibilityRole="button"
-              accessibilityLabel={getCopy('clearButtonAccessibilityLabel')}
-              tokens={(appearances) => selectButtonTokens(getButtonTokens(appearances))}
-            >
-              {(buttonState) => (
-                <ClearButtonIcon tokens={selectIconTokens(getButtonTokens(buttonState))} />
-              )}
-            </ButtonBase>
-          )}
-          {SubmitButtonIcon && (
-            <ButtonBase
-              onPress={handleSubmit}
-              inactive={inactive}
-              accessibilityRole="button"
-              accessibilityLabel={getCopy('submitButtonAccessibilityLabel')}
-              tokens={(buttonState) =>
-                selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
-              }
-            >
-              {(buttonState) => (
-                <SubmitButtonIcon
-                  tokens={selectIconTokens(getButtonTokens({ ...buttonState, priority: 'high' }))}
-                />
-              )}
-            </ButtonBase>
-          )}
-        </StackView>
+    const isEmpty = value === ''
+
+    return (
+      <View style={staticStyles.container}>
+        <TextInputBase
+          ref={ref}
+          tokens={(appearances) =>
+            selectInputTokens({
+              searchTokens: getThemeTokens(appearances),
+              buttonTokens,
+              buttonsGapSize,
+              isEmpty
+            })
+          }
+          placeholder={placeholder}
+          placeholderTextColor={placeholderColor}
+          inactive={inactive}
+          enablesReturnKeyAutomatically
+          returnKeyType="search"
+          value={value}
+          onChange={handleChange}
+          onSubmitEditing={handleSubmit}
+          accessibilityLabel={accessibilityLabel || getCopy('accessibilityLabel')}
+        />
+        <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
+          <StackView direction="row" space={buttonsGap}>
+            {ClearButtonIcon && !isEmpty && (
+              <ButtonBase
+                onPress={handleClear}
+                inactive={inactive}
+                accessibilityRole="button"
+                accessibilityLabel={getCopy('clearButtonAccessibilityLabel')}
+                tokens={(appearances) => selectButtonTokens(getButtonTokens(appearances))}
+              >
+                {(buttonState) => (
+                  <ClearButtonIcon {...selectIconTokens(getButtonTokens(buttonState))} />
+                )}
+              </ButtonBase>
+            )}
+            {SubmitButtonIcon && (
+              <ButtonBase
+                onPress={handleSubmit}
+                inactive={inactive}
+                accessibilityRole="button"
+                accessibilityLabel={getCopy('submitButtonAccessibilityLabel')}
+                tokens={(buttonState) =>
+                  selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
+                }
+              >
+                {(buttonState) => (
+                  <SubmitButtonIcon
+                    {...selectIconTokens(getButtonTokens({ ...buttonState, priority: 'high' }))}
+                  />
+                )}
+              </ButtonBase>
+            )}
+          </StackView>
+        </View>
       </View>
-    </View>
-  )
-}
+    )
+  }
+)
+Search.displayName = 'Search'
 
 Search.propTypes = {
   /**
@@ -186,7 +193,18 @@ Search.propTypes = {
    * Use to provide an accessible label for the input (visually hidden).
    */
   accessibilityLabel: PropTypes.string,
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.object]),
+  /**
+   * 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({
+      accessibilityLabel: PropTypes.string,
+      clearButtonAccessibilityLabel: PropTypes.string,
+      submitButtonAccessibilityLabel: PropTypes.string
+    })
+  ]),
   tokens: getTokensPropType('Search'),
   variant: variantProp.propType
 }
@@ -194,6 +212,9 @@ 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,

package/src/Select/Picker.jsx

@@ -1,50 +1,57 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import PropTypes from 'prop-types'
 import { componentPropType } from '../utils'
 
-const Picker = ({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  style,
-  inactive,
-  children,
-  placeholder,
-  nativeID,
-  testID,
-  ...rest
-}) => {
-  const { accessibilityLabel, accessibilityDescribedBy, accessibilityInvalid } = rest
+const Picker = forwardRef(
+  (
+    {
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      onMouseOver,
+      onMouseOut,
+      style,
+      inactive,
+      children,
+      placeholder,
+      nativeID,
+      testID,
+      ...rest
+    },
+    ref
+  ) => {
+    const { accessibilityLabel, accessibilityDescribedBy, accessibilityInvalid } = rest
 
-  return (
-    <select
-      style={style}
-      onMouseOver={onMouseOver}
-      onMouseOut={onMouseOut}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      disabled={inactive}
-      value={value || (placeholder !== undefined ? placeholder.value : undefined)}
-      onChange={(event) => onChange(event.target.value)}
-      id={nativeID}
-      aria-label={accessibilityLabel}
-      aria-describedby={accessibilityDescribedBy}
-      aria-invalid={accessibilityInvalid}
-      data-testid={testID}
-    >
-      {placeholder !== undefined && (
-        <option value={placeholder.value} disabled hidden>
-          {placeholder.label}
-        </option>
-      )}
-      {children}
-    </select>
-  )
-}
+    return (
+      <select
+        ref={ref}
+        style={style}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        disabled={inactive}
+        value={value || (placeholder !== undefined ? placeholder.value : undefined)}
+        onChange={(event) => onChange(event.target.value, event)}
+        id={nativeID}
+        aria-label={accessibilityLabel}
+        aria-describedby={accessibilityDescribedBy}
+        aria-invalid={accessibilityInvalid}
+        data-testid={testID}
+      >
+        {placeholder !== undefined && (
+          <option value={placeholder.value} disabled hidden>
+            {placeholder.label}
+          </option>
+        )}
+        {children}
+      </select>
+    )
+  }
+)
+Picker.displayName = 'Picker'
 
 export default Picker
 

package/src/Select/Picker.native.jsx

@@ -1,4 +1,4 @@
-import React, { Children } from 'react'
+import React, { forwardRef, Children } from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
 import NativePicker from 'react-native-picker-select'
@@ -25,58 +25,65 @@ const selectAndroidContainerStyles = ({ paddingLeft = 0, paddingRight = 0, ...re
   ...rest
 })
 
-const Picker = ({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  style,
-  inactive,
-  children,
-  placeholder,
-  ...rest
-}) => {
-  // 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
-    }
+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
+    const flatChildren = Children.toArray(children).flatMap((child) => {
+      if (child.type === Group) {
+        return child.props.children
+      }
 
-    return child
-  })
+      return child
+    })
 
-  const items = flatChildren.map(({ props }) => ({
-    label: props.children,
-    value: props.value
-  }))
+    const items = flatChildren.map(({ props }) => ({
+      label: props.children,
+      value: props.value
+    }))
 
-  const picker = (
-    <NativePicker
-      touchableWrapperProps={a11yProps.select(rest)}
-      onOpen={onFocus}
-      onClose={onBlur}
-      disabled={inactive}
-      items={items}
-      value={value}
-      onValueChange={onChange}
-      style={{
-        inputIOS: style,
-        inputAndroid: selectAndroidInputStyles(style)
-      }}
-      placeholder={placeholder !== undefined ? placeholder : {}}
-    />
-  )
+    // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
+    const handleChange = (newValue, index) => {
+      if (onChange)
+        onChange(newValue, {
+          // TODO: see if it's possible to pass a real React SyntheticEvent here. For now, just pass an
+          // object with a shape where if an onChange deconstructs `event.nativeEvent`, it won't crash.
+          nativeEvent: {
+            index,
+            value: newValue
+          }
+        })
+    }
 
-  return (
-    <>
-      {Platform.OS === 'android' ? (
-        <View style={selectAndroidContainerStyles(style)}>{picker}</View>
-      ) : (
-        picker
-      )}
-    </>
-  )
-}
+    const picker = (
+      <NativePicker
+        pickerProps={{ ref }}
+        touchableWrapperProps={a11yProps.select(rest)}
+        onOpen={onFocus}
+        onClose={onBlur}
+        disabled={inactive}
+        items={items}
+        value={value}
+        onValueChange={handleChange}
+        style={{
+          inputIOS: style,
+          inputAndroid: selectAndroidInputStyles(style)
+        }}
+        placeholder={placeholder !== undefined ? placeholder : {}}
+      />
+    )
+
+    return (
+      <>
+        {Platform.OS === 'android' ? (
+          <View style={selectAndroidContainerStyles(style)}>{picker}</View>
+        ) : (
+          picker
+        )}
+      </>
+    )
+  }
+)
+Picker.displayName = 'Picker'
 
 export default Picker