@telus-uds/components-base 1.64.0 → 1.66.0

package/lib-module/Tabs/Tabs.js

@@ -1,4 +1,5 @@
 import React, { forwardRef, useCallback } from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { useThemeTokens } from '../ThemeProvider';
@@ -26,6 +27,17 @@ const getDefaultTabItemAccessibilityRole = parentRole => {
       return undefined;
   }
 };
+
+const getStackViewTokens = variant => {
+  const equalWidth = variant === null || variant === void 0 ? void 0 : variant.equalWidth;
+  return Platform.select({
+    web: {
+      justifyContent: equalWidth ? 'space-evenly' : 'flex-start',
+      width: equalWidth ? '100%' : 'auto'
+    },
+    default: {}
+  });
+};
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
@@ -76,6 +88,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   const restProps = selectProps(rest);
   const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist';
   const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
+  const stackViewTokens = getStackViewTokens(variant);
   return /*#__PURE__*/_jsx(HorizontalScroll, {
     ref: ref,
     ScrollButton: HorizontalScrollButton,
@@ -87,6 +100,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
     children: /*#__PURE__*/_jsx(StackView, {
       space: space,
       direction: "row",
+      tokens: stackViewTokens,
       children: items.map((_ref3, index) => {
         let {
           href,

package/lib-module/TextInput/TextInputBase.js

@@ -7,13 +7,14 @@ import View from "react-native-web/dist/exports/View";
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
 import StackView from '../StackView';
 import IconButton from '../IconButton';
+import Icon from '../Icon';
 import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useCopy, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
 
-const selectInputStyles = (_ref, themeOptions, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive, type) => {
   let {
     backgroundColor,
     color,
@@ -72,7 +73,7 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
+    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -126,16 +127,64 @@ const selectIconContainerStyles = (_ref4, buttonCount) => {
   };
 };
 
-const selectButtonsContainerStyle = _ref5 => {
+const selectLeftIconContainerStyles = _ref5 => {
   let {
-    buttonsPaddingRight
+    leftIconPaddingBottom
   } = _ref5;
+  return {
+    // not tokenizing paddingLeft as it remains same across brands for now
+    paddingLeft: 10,
+    paddingBottom: leftIconPaddingBottom
+  };
+};
+
+const selectButtonsContainerStyle = _ref6 => {
+  let {
+    buttonsPaddingRight
+  } = _ref6;
   return {
     paddingRight: buttonsPaddingRight
   };
 };
 
-const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const getIcon = function () {
+  let cardNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let {
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon
+  } = arguments.length > 1 ? arguments[1] : undefined;
+  const cardType = {
+    1: {
+      icon: visaIcon,
+      testID: 'visa'
+    },
+    2: {
+      icon: amexIcon,
+      testID: 'amex'
+    },
+    4: {
+      icon: masterCardIcon,
+      testID: 'mastercard'
+    }
+  };
+  const firstDigit = cardNumber ? cardNumber[0] : '';
+  const defaultIcon = {
+    icon: defaultCreditIcon,
+    testID: 'default'
+  };
+  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon;
+  return /*#__PURE__*/_jsx(Icon, {
+    icon: selectedIcon.icon,
+    variant: {
+      size: 'large'
+    },
+    testID: selectedIcon.testID
+  });
+};
+
+const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -154,8 +203,9 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     tokens,
     value,
     variant = {},
+    type,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isFocused, setIsFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
 
@@ -196,6 +246,12 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     onChange,
     readOnly
   });
+  const {
+    password,
+    numeric
+  } = variant;
+  const isNumeric = numeric || type === 'card' || type === 'number';
+  const isPassword = password || type === 'password';
   const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
   useEffect(() => {
     if (Platform.OS === 'web' && pattern && element) {
@@ -208,11 +264,16 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;
 
-    const {
-      numeric
-    } = variant;
     const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    const filteredText = numeric ? text.replace(/[^\d]/g, '') : text;
+    let filteredText = isNumeric ? text === null || text === void 0 ? void 0 : text.replace(/[^\d]/g, '') : text;
+
+    if (type === 'card' && filteredText) {
+      const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
+      const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g'); // Add a space every 4 digits starting from the 5th position
+
+      filteredText = formattedValue.replace(regex, '$1 ').trim();
+    }
+
     setValue(filteredText, event);
     if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
@@ -241,7 +302,11 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     clearButtonIcon: ClearButtonIcon,
     icon: IconComponent,
     passwordShowButtonIcon,
-    passwordHideButtonIcon
+    passwordHideButtonIcon,
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon
   } = themeTokens;
   const buttonsGapSize = useSpacingScale(buttonsGap);
   const getCopy = useCopy({
@@ -261,7 +326,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     }, "clear"));
   }
 
-  if (variant.password) {
+  if (isPassword) {
     textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: !showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
@@ -287,6 +352,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
+    maxLength: type === 'card' ? 19 : undefined,
     value: isControlled ? currentValue : undefined
   };
   const {
@@ -294,20 +360,29 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   } = useTheme();
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
-  }, themeOptions, inactive);
+  }, themeOptions, inactive, type);
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
-    children: [/*#__PURE__*/_jsx(NativeTextInput, {
+    children: [type === 'card' && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)],
+      children: getIcon(currentValue, {
+        defaultCreditIcon,
+        amexIcon,
+        visaIcon,
+        masterCardIcon
+      })
+    }), /*#__PURE__*/_jsx(NativeTextInput, {
       ref: inputRef,
-      keyboardType: variant.numeric && 'numeric',
-      inputMode: variant.numeric && 'numeric',
+      keyboardType: isNumeric && 'numeric',
+      inputMode: isNumeric && 'numeric',
       style: nativeInputStyle,
-      secureTextEntry: variant.password && !showPassword,
+      secureTextEntry: isPassword && !showPassword,
       ...inputProps
     }), IconComponent && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
+      style: [staticStyles.rightIconContainer, selectIconContainerStyles({ ...themeTokens,
         buttonsGapSize
       }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
       children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
@@ -333,6 +408,7 @@ TextInputBase.propTypes = { ...selectedSystemPropTypes,
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
     clearButtonAccessibilityLabel: PropTypes.string
   })]),
+  type: PropTypes.oneOfType([PropTypes.oneOf(['password', 'card', 'number'])]),
   height: PropTypes.number,
   inactive: PropTypes.bool,
   initialValue: PropTypes.string,
@@ -359,9 +435,15 @@ const staticStyles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center'
   },
-  iconContainer: {
+  rightIconContainer: {
     position: 'absolute',
     right: 0,
     bottom: 0
+  },
+  leftIconContainer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
   }
 });

package/lib-module/TextInput/propTypes.js

@@ -8,6 +8,11 @@ const textInputPropTypes = {
    */
   value: PropTypes.string,
 
+  /**
+   * Use this to set the type of the input. Defaults to `text`.
+   */
+  type: PropTypes.string,
+
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.

package/lib-module/index.js

@@ -8,6 +8,7 @@ export * from './Carousel';
 export { default as Listbox } from './Listbox';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
+export { default as CheckboxCard } from './CheckboxCard';
 export { default as Divider } from './Divider';
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
 export { default as Feedback } from './Feedback';

package/lib-module/utils/props/textInputProps.js

@@ -19,6 +19,7 @@ const textProps = {
 
 const inputValueProps = {
   value: PropTypes.string,
+  type: PropTypes.string,
   initialValue: PropTypes.string,
   readOnly: PropTypes.bool,
   inactive: PropTypes.bool

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.41.1",
+    "@telus-uds/system-theme-tokens": "^2.43.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -73,5 +73,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.64.0"
+  "version": "1.66.0"
 }

package/src/Checkbox/CheckboxButton.jsx

@@ -0,0 +1,180 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { Platform, StyleSheet, View } from 'react-native'
+
+import CheckboxInput from './CheckboxInput'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
+import {
+  a11yProps,
+  getTokensSetPropType,
+  selectSystemProps,
+  selectTokens,
+  viewProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const selectInputStyles = (
+  {
+    iconBackgroundColor,
+    inputBorderColor,
+    inputBorderRadius,
+    inputBorderWidth,
+    inputBackgroundColor,
+    inputHeight,
+    inputOutlineColor,
+    inputOutlineWidth,
+    inputOutlineOffset,
+    inputShadow,
+    inputWidth
+  },
+  isChecked
+) => ({
+  borderColor: inputBorderColor,
+  borderWidth: inputBorderWidth,
+  borderRadius: inputBorderRadius,
+  backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
+  height: inputHeight,
+  width: inputWidth,
+  ...applyShadowToken(inputShadow),
+  ...Platform.select({
+    web: {
+      outlineStyle: 'solid',
+      outlineColor: inputOutlineColor,
+      outlineWidth: inputOutlineWidth,
+      outlineOffset: inputOutlineOffset
+    }
+  })
+})
+
+const selectIconTokens = ({ icon, iconColor, iconSize }) => ({
+  icon,
+  color: iconColor,
+  size: iconSize
+})
+
+const tokenKeys = [
+  'checkedBackgroundColor',
+  'checkedSize',
+  'inputBackgroundColor',
+  'inputBorderColor',
+  'inputBorderWidth',
+  'inputOutlineColor',
+  'inputOutlineWidth',
+  'inputSize',
+  'outerBorderColor',
+  'outerBorderWidth',
+  'outerBorderGap',
+  'inputSize'
+]
+
+export const selectCheckboxTokens = (themeTokens, prefix) =>
+  selectTokens(tokenKeys, themeTokens, prefix)
+
+/**
+ * The visual toggle of a checkbox input. Is not interactive on its own, should be used inside
+ * an interactive parent that passes down props when interacted with. Used in CheckboxCard
+ */
+const CheckboxButton = forwardRef(
+  (
+    {
+      isChecked,
+      tokens,
+      inactive,
+      defaultChecked,
+      inputId,
+      iconId,
+      isControlled,
+      handleChange,
+      name: inputName,
+      value,
+      ...rest
+    },
+    ref
+  ) => {
+    const { icon: IconComponent, ...stateTokens } = useThemeTokens(
+      'Checkbox',
+      {},
+      { checked: isChecked }
+    )
+    const iconTokens = selectIconTokens(stateTokens)
+
+    return (
+      <View {...selectProps(rest)}>
+        <View
+          style={[staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)]}
+          testID={inputId}
+        >
+          <CheckboxInput
+            ref={ref}
+            checked={isChecked}
+            defaultChecked={defaultChecked}
+            disabled={inactive}
+            id={inputId}
+            isControlled={isControlled}
+            onChange={handleChange}
+            name={inputName}
+            value={value}
+          />
+          {isChecked && IconComponent && (
+            <View testID={iconId}>
+              <IconComponent {...iconTokens} />
+            </View>
+          )}
+        </View>
+      </View>
+    )
+  }
+)
+CheckboxButton.displayName = 'CheckboxButton'
+
+CheckboxButton.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Use `checked` for controlled Checkbox. For uncontrolled Checkbox, use the `defaultChecked` prop.
+   */
+  isChecked: PropTypes.bool,
+  /**
+   * Checkbox tokens.
+   */
+  tokens: getTokensSetPropType(tokenKeys, { allowFunction: true }),
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * Use `defaultChecked` to provide the initial value for an uncontrolled Checkbox.
+   */
+  defaultChecked: PropTypes.bool,
+  /**
+   * Checkbox input ID.
+   */
+  inputId: PropTypes.string,
+  /**
+   * Checkbox icon ID.
+   */
+  iconId: PropTypes.string,
+  /**
+   * Can control the checkbox on the card.
+   */
+  isControlled: PropTypes.bool,
+  /**
+   * Callback called when a controlled checkbox gets interacted with.
+   */
+  handleChange: PropTypes.func,
+  /**
+   * Associate this checkbox with a group (set as the name attribute).
+   */
+  name: PropTypes.string,
+  /**
+   * The value of the checkbox: true or false
+   */
+  value: PropTypes.bool
+}
+
+export default CheckboxButton
+
+const staticStyles = StyleSheet.create({
+  container: { flexDirection: 'row', alignItems: 'center' },
+  defaultInputStyles: { alignItems: 'center', justifyContent: 'center' }
+})

package/src/CheckboxCard/CheckboxCard.jsx

@@ -0,0 +1,190 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, Text, View } from 'react-native'
+
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider'
+import {
+  a11yProps,
+  focusHandlerProps,
+  getTokensPropType,
+  selectSystemProps,
+  selectTokens,
+  useInputValue,
+  useUniqueId,
+  variantProp,
+  viewProps
+} from '../utils'
+import { PressableCardBase, selectPressableCardTokens } from '../Card'
+import StackView from '../StackView'
+import CheckboxButton, { selectCheckboxTokens } from '../Checkbox/CheckboxButton'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
+
+const CheckboxCard = forwardRef(
+  (
+    {
+      tokens,
+      variant,
+      title,
+      children,
+      inactive,
+      defaultChecked,
+      checked,
+      name: inputName,
+      value,
+      id,
+      iconId,
+      onChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const {
+      currentValue: isChecked,
+      setValue: setIsChecked,
+      isControlled
+    } = useInputValue({
+      value: checked,
+      initialValue: defaultChecked,
+      onChange
+    })
+
+    const handleChange = (event) => {
+      if (!inactive) {
+        setIsChecked(!isChecked, event)
+      }
+    }
+    const uniqueId = useUniqueId('CheckboxCard')
+    const inputId = id ?? uniqueId
+
+    const uniqueIconId = useUniqueId('CheckboxIcon')
+    const iconCheckboxId = iconId ?? uniqueIconId
+
+    const getTokens = useThemeTokensCallback('CheckboxCard', tokens, variant)
+    const getCardTokens = (cardState) => selectPressableCardTokens(getTokens(cardState))
+    const { themeOptions } = useTheme()
+
+    const selectedProps = selectProps({
+      accessibilityRole: 'checkbox',
+      accessibilityState: { checked: isChecked, disabled: inactive },
+      ...rest
+    })
+
+    return (
+      <PressableCardBase
+        ref={ref}
+        inactive={inactive}
+        checked={isChecked}
+        tokens={getCardTokens}
+        onPress={handleChange}
+        {...selectedProps}
+      >
+        {(cardState) => {
+          const { checkboxSpace, contentSpace, ...themeTokens } = getTokens(cardState)
+          const checkboxTokens = selectCheckboxTokens(themeTokens, 'checkbox')
+          const titleTokens = selectTokens('Typography', themeTokens)
+          const textStyle = applyTextStyles({ ...titleTokens, themeOptions })
+          return (
+            <StackView direction="row" space={checkboxSpace}>
+              <View style={[staticStyles.alignWithText, { height: textStyle.lineHeight }]}>
+                <CheckboxButton
+                  tokens={checkboxTokens}
+                  isControlled={isControlled}
+                  isChecked={isChecked}
+                  inactive={inactive}
+                  defaultChecked={defaultChecked}
+                  inputId={inputId}
+                  iconId={iconCheckboxId}
+                  handleChange={handleChange}
+                  name={inputName}
+                  value={value}
+                />
+              </View>
+              <StackView direction="column" space={contentSpace} tokens={{ flexShrink: 1 }}>
+                {title ? <Text style={textStyle}>{title}</Text> : null}
+                {typeof children === 'function' ? children(cardState, textStyle) : children}
+              </StackView>
+            </StackView>
+          )
+        }}
+      </PressableCardBase>
+    )
+  }
+)
+CheckboxCard.displayName = 'CheckboxCard'
+
+CheckboxCard.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Content to be displayed at the top of the card alongside the checkbox
+   */
+  title: PropTypes.string,
+  /**
+   * Additional content to be displayed below the checkbox.
+   */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /**
+   * Use `checked` for controlled checkbox. For uncontrolled checkbox, use the `defaultChecked` prop.
+   */
+  checked: PropTypes.bool,
+  /**
+   * Use `defaultChecked` to provide the initial value for an uncontrolled checkbox.
+   */
+  defaultChecked: PropTypes.bool,
+  /**
+   * An optional checkboxdescription.
+   */
+  description: PropTypes.string,
+  /**
+   * Checkbox card ID.
+   */
+  id: PropTypes.string,
+  /**
+   * Checkbox icon ID.
+   */
+  iconId: PropTypes.string,
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * The label.
+   */
+  label: PropTypes.string,
+  /**
+   * Associate this checkbox card with a group (set as the name attribute).
+   */
+  name: PropTypes.string,
+  /**
+   * Whether the underlying input triggered a validation error or not.
+   */
+  error: PropTypes.bool,
+  /**
+   * The value. Must be unique within the group.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  /**
+   * Callback called when a controlled checkbox card gets interacted with.
+   */
+  onChange: PropTypes.func,
+  /**
+   * checkbox card tokens.
+   */
+  tokens: getTokensPropType('CheckboxCard'),
+  /**
+   * checkbox variant.
+   */
+  variant: variantProp.propType
+}
+
+export default CheckboxCard
+
+const staticStyles = StyleSheet.create({
+  alignWithText: {
+    justifyContent: 'center'
+  }
+})

package/src/CheckboxCard/index.js

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

package/src/StackView/StackView.jsx

@@ -89,9 +89,10 @@ const StackView = forwardRef(
     const content = getStackedContent(children, { direction, divider, space })
     const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
     const flexStyles = selectFlexStyles(themeTokens)
+    const size = { width: themeTokens.width }
 
     return (
-      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction]]}>
+      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction], size]}>
         {content}
       </View>
     )