@telus-uds/components-base 2.5.0 → 3.1.0

package/lib/cjs/TextInput/TextInput.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+var _InputSupports = _interopRequireDefault(require("../InputSupports"));
+var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.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.
+ *
+ * ## Controlled component
+ * If it is required that the state of the `TextInput` be controlled by the application or other external methods,
+ * `value` and `onChange` props must be passed to the `TextInput`.
+ * If the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.
+ *
+ * ## Uncontrolled component
+ * If it is not necessary to control the `TextInput` state, you can create one without a value prop.
+ * In this case its value can be accessed within the `onChange` callback.
+ *
+ * NOTE: In order to support more advanced usages all additional props will be passed down to the React Native's
+ * `TextInput` component. See <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native documentation</a> for
+ * 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 = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    nativeID,
+    variant = {},
+    ...rest
+  } = _ref;
+  const {
+    supportsProps,
+    ...selectedProps
+  } = selectProps(rest);
+  const inputProps = {
+    ...selectedProps,
+    tokens
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+      nativeID: nativeID,
+      ...supportsProps,
+      inputValue: selectedProps?.value,
+      children: _ref2 => {
+        let {
+          inputId,
+          ...propsFromInputSupports
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+          ref: ref,
+          nativeID: inputId,
+          ...propsFromInputSupports,
+          ...inputProps,
+          variant: {
+            ...variant,
+            validation: propsFromInputSupports.validation
+          }
+        });
+      }
+    }), rest.children]
+  });
+});
+TextInput.displayName = 'TextInput';
+TextInput.propTypes = {
+  ...selectedSystemPropTypes,
+  ..._propTypes2.default,
+  /**
+   * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
+   */
+  onClear: _propTypes.default.func,
+  onKeyPress: _propTypes.default.func,
+  tokens: (0, _utils.getTokensPropType)('TextInput'),
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = TextInput;

package/lib/cjs/TextInput/TextInputBase.js

@@ -0,0 +1,473 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _TextInput = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TextInput"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _ThemeProvider = require("../ThemeProvider");
+var _StackView = _interopRequireDefault(require("../StackView"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _utils = require("../utils");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
+const selectInputStyles = function (_ref, themeOptions, inactive, type) {
+  let {
+    backgroundColor,
+    color,
+    borderWidth = 0,
+    borderColor,
+    borderRadius,
+    paddingTop = 0,
+    paddingBottom = 0,
+    paddingLeft,
+    paddingRight = 0,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    icon,
+    minLines,
+    maxLines,
+    width,
+    height
+  } = _ref;
+  let buttonCount = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  let isPassword = arguments.length > 7 ? arguments[7] : undefined;
+  let iconLeftWidth = arguments.length > 8 ? arguments[8] : undefined;
+  let iconLeftGap = arguments.length > 9 ? arguments[9] : undefined;
+  let direction = arguments.length > 10 ? arguments[10] : undefined;
+  // Subtract border width from padding so overall input width/height doesn't
+  // jump around if the border width changes (avoiding NaN and negative padding)
+  const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
+  const textStyles = (0, _ThemeProvider.applyTextStyles)({
+    fontName: isPassword ? undefined : fontName,
+    // In this case, we don't want to apply the fontName to the input if it's a password because Monotype don't have support for the masked characters in mobile.
+    fontSize,
+    lineHeight,
+    fontWeight,
+    themeOptions
+  });
+  function linesToHeight(lines) {
+    const {
+      lineHeight: absoluteLineHeight
+    } = textStyles;
+    return lines !== undefined ? lines * absoluteLineHeight + paddingTop + paddingBottom : undefined;
+  }
+  const minHeight = linesToHeight(minLines);
+  const maxHeight = linesToHeight(maxLines);
+  const webStyles = _Platform.default.select({
+    web: {
+      outline: 'none',
+      cursor: inactive ? 'not-allowed' : undefined,
+      resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
+    }
+  });
+  const getPaddingLeft = () => {
+    if (type === 'card') {
+      return offsetBorder(paddingLeft + 34);
+    }
+    if (direction === 'left') {
+      return offsetBorder(iconLeftWidth + iconLeftGap + staticStyles.iconLeftContainer.paddingLeft);
+    }
+    return offsetBorder(paddingLeft);
+  };
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
+  const paddingWithIcon = buttonSize + adjustedPaddingRight;
+  return {
+    backgroundColor,
+    color,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    paddingLeft: getPaddingLeft(),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
+    paddingTop: offsetBorder(paddingTop),
+    paddingBottom: offsetBorder(paddingBottom),
+    minHeight,
+    maxHeight,
+    width,
+    height,
+    ...textStyles,
+    ...webStyles
+  };
+};
+const selectOuterBorderStyles = _ref2 => {
+  let {
+    outerBackgroundColor,
+    outerBorderWidth,
+    outerBorderColor,
+    borderRadius
+  } = _ref2;
+  return {
+    background: outerBackgroundColor,
+    ...(0, _ThemeProvider.applyOuterBorder)({
+      outerBorderColor,
+      outerBorderWidth,
+      borderRadius
+    })
+  };
+};
+const selectIconTokens = _ref3 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
+const selectIconContainerStyles = (_ref4, buttonCount) => {
+  let {
+    buttonSize,
+    buttonsGapSize,
+    paddingRight,
+    paddingBottom
+  } = _ref4;
+  return {
+    paddingRight: paddingRight + buttonCount * (buttonSize + buttonsGapSize),
+    paddingBottom
+  };
+};
+const selectIconCardLeftContainerStyles = _ref5 => {
+  let {
+    leftIconPaddingBottom
+  } = _ref5;
+  return {
+    paddingBottom: leftIconPaddingBottom
+  };
+};
+const selectIconLeftContainerStyles = _ref6 => {
+  let {
+    iconLeftPaddingBottom
+  } = _ref6;
+  return {
+    paddingBottom: iconLeftPaddingBottom
+  };
+};
+const selectButtonsContainerStyle = _ref7 => {
+  let {
+    buttonsPaddingRight
+  } = _ref7;
+  return {
+    paddingRight: buttonsPaddingRight
+  };
+};
+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 sanitizedCardNumber = cardNumber.replace(/[^0-9]/g, '');
+  const firstFourDigits = sanitizedCardNumber.slice(0, 4);
+  const number = Number(firstFourDigits);
+  const visaRange = number >= 4000 && number <= 4999;
+  const amexRange = number >= 3400 && number <= 3499 || number >= 3700 && number <= 3799;
+  const masterCardRange = number >= 5100 && number <= 5599 || number >= 2221 && number <= 2720;
+  let selectedIcon = {
+    icon: defaultCreditIcon,
+    testID: 'default'
+  };
+  const objVisaIcon = {
+    icon: visaIcon,
+    testID: 'visa'
+  };
+  const objAmexIcon = {
+    icon: amexIcon,
+    testID: 'amex'
+  };
+  const objMasterCardIcon = {
+    icon: masterCardIcon,
+    testID: 'mastercard'
+  };
+  if (visaRange) selectedIcon = objVisaIcon;else if (amexRange) selectedIcon = objAmexIcon;else if (masterCardRange) selectedIcon = objMasterCardIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    icon: selectedIcon.icon,
+    variant: {
+      size: 'large'
+    },
+    testID: selectedIcon.testID
+  });
+};
+const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+  let {
+    buttons = [],
+    copy = 'en',
+    height,
+    inactive,
+    initialValue,
+    onBlur,
+    onChange,
+    onChangeText,
+    onClear,
+    onFocus,
+    onMouseOut,
+    onMouseOver,
+    pattern,
+    readOnly,
+    tokens,
+    value,
+    variant = {},
+    type,
+    onKeyPress,
+    direction,
+    ...rest
+  } = _ref8;
+  const [isFocused, setIsFocused] = _react.default.useState(false);
+  const [showPassword, setShowPassword] = _react.default.useState(false);
+  const handleFocus = event => {
+    setIsFocused(true);
+    if (typeof onFocus === 'function') onFocus(event);
+  };
+  const handleBlur = event => {
+    setIsFocused(false);
+    if (typeof onBlur === 'function') onBlur(event);
+  };
+  const [isHovered, setIsHovered] = _react.default.useState(false);
+  const handleMouseOver = event => {
+    setIsHovered(true);
+    if (typeof onMouseOver === 'function') onMouseOver(event);
+  };
+  const handleMouseOut = event => {
+    setIsHovered(false);
+    if (typeof onMouseOut === 'function') onMouseOut(event);
+  };
+  const defaultRef = _react.default.useRef();
+  const inputRef = ref ?? defaultRef;
+  const {
+    currentValue,
+    resetValue,
+    setValue,
+    isControlled,
+    isDirty
+  } = (0, _utils.useInputValue)({
+    value,
+    initialValue,
+    inputRef,
+    onChange,
+    readOnly
+  });
+  const {
+    password,
+    numeric
+  } = variant;
+  const isNumeric = numeric || type === 'card' || type === 'number';
+  const isPassword = password || type === 'password';
+  const element = inputRef?.current;
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS === 'web' && pattern && element) {
+      // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
+      // which a `pattern` user must provide anyway to call .checkValidity() on the element.
+      element.pattern = pattern;
+    }
+  }, [element, pattern]);
+  const handleChangeText = event => {
+    const text = event.nativeEvent?.text || event.target?.value;
+    let filteredText = isNumeric ? 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);
+  };
+  const states = {
+    focus: isFocused,
+    hover: isHovered,
+    inactive
+  };
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
+  const handleClear = event => {
+    onClear?.(event);
+    resetValue(event);
+    inputRef?.current?.focus();
+  };
+  const handleShowOrHide = () => {
+    if (!variant.inactive) setShowPassword(!showPassword);
+  };
+  const {
+    buttonsGap,
+    clearButtonIcon: ClearButtonIcon,
+    icon: IconComponent,
+    passwordShowButtonIcon,
+    passwordHideButtonIcon,
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon,
+    iconLeftGap
+  } = themeTokens;
+  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const textInputButtons = direction === 'left' ? buttons.filter(button => button && button.key !== 'submitIcon') : buttons;
+  const submitIcon = direction === 'left' ? buttons.find(button => button && button.key === 'submitIcon') : null;
+  if (onClear && isDirty) {
+    textInputButtons?.unshift(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+      icon: ClearButtonIcon,
+      onPress: handleClear,
+      variant: {
+        compact: true
+      }
+    }, "clear"));
+  }
+  if (isPassword) {
+    textInputButtons?.unshift(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      accessibilityLabel: showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
+      icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
+      onPress: handleShowOrHide,
+      variant: {
+        compact: true,
+        password: true,
+        inactive: variant.inactive,
+        size: 'large'
+      },
+      tokens: {
+        width: 40,
+        height: 40
+      }
+    }, !showPassword ? 'hide' : 'show'));
+  }
+  const inputProps = {
+    ...selectProps(rest),
+    editable: !inactive,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onChange: handleChangeText,
+    defaultValue: initialValue,
+    maxLength: type === 'card' ? 19 : undefined,
+    value: isControlled ? currentValue : undefined,
+    onKeyPress
+  };
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const iconLeftWidth = submitIcon ? submitIcon.props.tokens.size ?? 0 : 0;
+  const nativeInputStyle = selectInputStyles({
+    ...themeTokens,
+    height
+  }, themeOptions, inactive, type, buttons?.length, themeTokens.buttonSize, buttonsGapSize, isPassword, iconLeftWidth, iconLeftGap, direction);
+  const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: selectOuterBorderStyles(themeTokens),
+    children: [shouldShowSubmitIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.iconLeftContainer, selectIconLeftContainerStyles(themeTokens)],
+      children: submitIcon
+    }), type === 'card' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      pointerEvents: "none",
+      style: [staticStyles.iconCardLeftContainer, selectIconCardLeftContainerStyles(themeTokens)],
+      children: getIcon(currentValue, {
+        defaultCreditIcon,
+        amexIcon,
+        visaIcon,
+        masterCardIcon
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      ref: inputRef,
+      keyboardType: isNumeric ? 'numeric' : 'default',
+      inputMode: isNumeric ? 'numeric' : undefined,
+      style: nativeInputStyle,
+      secureTextEntry: isPassword && !showPassword,
+      ...inputProps
+    }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      pointerEvents: "none" // avoid hijacking input press events
+      ,
+      style: [staticStyles.rightIconContainer, selectIconContainerStyles({
+        ...themeTokens,
+        buttonsGapSize
+      }, buttons?.length)],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+        ...selectIconTokens(themeTokens)
+      })
+    }), buttons?.length > 0 && !inactive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+        direction: "row",
+        space: buttonsGap,
+        children: textInputButtons
+      })
+    })]
+  });
+});
+TextInputBase.displayName = 'TextInputBase';
+TextInputBase.propTypes = {
+  ...selectedSystemPropTypes,
+  buttons: _propTypes.default.arrayOf(_propTypes.default.node),
+  /**
+   * Select English or French copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
+    clearButtonAccessibilityLabel: _propTypes.default.string
+  })]),
+  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['password', 'card', 'number'])]),
+  height: _propTypes.default.number,
+  inactive: _propTypes.default.bool,
+  initialValue: _propTypes.default.string,
+  onBlur: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  onChangeText: _propTypes.default.func,
+  onClear: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onMouseOut: _propTypes.default.func,
+  onMouseOver: _propTypes.default.func,
+  onKeyPress: _propTypes.default.func,
+  readOnly: _propTypes.default.bool,
+  tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
+  value: _propTypes.default.string,
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = TextInputBase;
+const staticStyles = _StyleSheet.default.create({
+  buttonsContainer: {
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  },
+  rightIconContainer: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0
+  },
+  iconCardLeftContainer: {
+    paddingLeft: 10,
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  iconLeftContainer: {
+    paddingLeft: 10,
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
+  }
+});

package/lib/cjs/TextInput/dictionary.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    clearButtonAccessibilityLabel: 'Clear',
+    showPasswordAccessibilityLabel: 'Show Password',
+    hidePasswordAccessibilityLabel: 'Hide Password'
+  },
+  fr: {
+    clearButtonAccessibilityLabel: 'Effacer',
+    showPasswordAccessibilityLabel: 'montrer le mot de passe',
+    hidePasswordAccessibilityLabel: 'masquer le mot de passe'
+  }
+};

package/lib/cjs/TextInput/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.default;
+  }
+});
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function () {
+    return _TextInput.default;
+  }
+});
+var _TextInput = _interopRequireDefault(require("./TextInput"));
+var _TextArea = _interopRequireDefault(require("./TextArea"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/TextInput/propTypes.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
+const textInputPropTypes = {
+  /**
+   * If the input's state is to be controlled by a parent component, use this prop
+   * together with the `onChange` to pass down and update the lifted state.
+   */
+  value: _propTypes.default.string,
+  /**
+   * Use this to set the type of the input. Defaults to `text`.
+   */
+  type: _propTypes.default.string,
+  /**
+   * Use this to set the initial value of an uncontrolled input.
+   * Updating `initialValue` will **not** update the actual value.
+   */
+  initialValue: _propTypes.default.string,
+  /**
+   * Disables all user interactions with the input.
+   */
+  inactive: _propTypes.default.bool,
+  /**
+   * Makes it impossible to change the input's value.
+   */
+  readOnly: _propTypes.default.bool,
+  /**
+   * 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.default.func
+};
+var _default = exports.default = textInputPropTypes;