@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/TextInput/TextArea.js

@@ -1,97 +0,0 @@
-import React from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
-import InputSupports from '../InputSupports';
-import TextInputBase from './TextInputBase';
-import { useThemeTokens } from '../ThemeProvider';
-import textInputPropTypes from './propTypes';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
-
-/**
- * Use to collect long-form information such as product feedback or support queries.
- * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
- * The `TextArea` height will automatically increase when new lines are added - this behavior can be limited within the theme.
- *
- * ## Controlled component
- * If it is required that the state of the `TextArea` be controlled by the application or other external methods,
- * `value` and `onChange` props must be passed to the `TextArea`.
- * If the `TextArea` value should not be changed by user input, a `readOnly` prop must be provided.
- *
- * ## Uncontrolled component
- * If it is not necessary to control the `TextArea` state, you can create one without a value prop.
- * In this case its value can be accessed within the `onChange` callback.
- *
- * ## Getting feedback for entered values
- * Use the `feedback` prop to give the user feedback regarding their input.
- * You can affirm that the user's input was correct, or highlight errors that must be corrected, using the `validation` prop.
- * Keep feedback text as brief as possible, should be limited to text and links.
- *
- * ## Supplying a hint
- * Use the `hint` prop to succinctly clarify attributes of the expected input data, such as the expected format,
- * or an indicator that the field is optional.
- * It is a more usable and accessible option than the HTML `placeholder` attribute.
- */
-const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref;
-  const themeTokens = useThemeTokens('TextArea', tokens, variant);
-  const [inputHeight, setInputHeight] = React.useState();
-
-  // adjust the text area's height as new lines are added to the content
-  const onHeightChange = _ref2 => {
-    let {
-      nativeEvent: {
-        contentSize: {
-          height
-        }
-      }
-    } = _ref2;
-    // on native this is happens out of the box
-    if (Platform.OS === 'web') {
-      setInputHeight(height);
-    }
-  };
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  const inputProps = {
-    ...selectedProps,
-    variant: {
-      ...variant,
-      validation: supportsProps.validation
-    },
-    multiline: true,
-    onContentSizeChange: onHeightChange,
-    height: inputHeight,
-    tokens: themeTokens
-  };
-  return /*#__PURE__*/_jsx(InputSupports, {
-    ...supportsProps,
-    children: _ref3 => {
-      let {
-        inputId,
-        ...props
-      } = _ref3;
-      return /*#__PURE__*/_jsx(TextInputBase, {
-        ref: ref,
-        ...inputProps,
-        nativeID: inputId,
-        ...props
-      });
-    }
-  });
-});
-TextArea.displayName = 'TextArea';
-TextArea.propTypes = {
-  ...selectedSystemPropTypes,
-  ...textInputPropTypes,
-  tokens: getTokensPropType('TextArea', 'TextInput'),
-  // TODO: support both TextArea and TextInput tokens
-  variant: variantProp.propType
-};
-export default TextArea;

package/lib-module/TextInput/TextInput.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
-import InputSupports from '../InputSupports';
-import TextInputBase from './TextInputBase';
-import textInputPropTypes from './propTypes';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, 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.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    nativeID,
-    variant = {},
-    ...rest
-  } = _ref;
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  const inputProps = {
-    ...selectedProps,
-    tokens,
-    variant: {
-      ...variant,
-      validation: supportsProps.validation
-    }
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(InputSupports, {
-      nativeID: nativeID,
-      ...supportsProps,
-      children: _ref2 => {
-        let {
-          inputId,
-          ...propsFromInputSupports
-        } = _ref2;
-        return /*#__PURE__*/_jsx(TextInputBase, {
-          ref: ref,
-          nativeID: inputId,
-          ...propsFromInputSupports,
-          ...inputProps
-        });
-      }
-    }), rest.children]
-  });
-});
-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,
-  onKeyPress: PropTypes.func,
-  tokens: getTokensPropType('TextInput'),
-  variant: variantProp.propType
-};
-export default TextInput;

package/lib-module/TextInput/TextInputBase.js

@@ -1,436 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import NativeTextInput from "react-native-web/dist/exports/TextInput";
-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 = 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;
-  // 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 = 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.select({
-    web: {
-      outline: 'none',
-      cursor: inactive ? 'not-allowed' : undefined,
-      resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
-    }
-  });
-
-  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: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    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,
-    ...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 selectLeftIconContainerStyles = _ref5 => {
-  let {
-    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 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__*/_jsx(Icon, {
-    icon: selectedIcon.icon,
-    variant: {
-      size: 'large'
-    },
-    testID: selectedIcon.testID
-  });
-};
-const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
-  let {
-    buttons = [],
-    copy = 'en',
-    height,
-    inactive,
-    initialValue,
-    onBlur,
-    onChange,
-    onChangeText,
-    onClear,
-    onFocus,
-    onMouseOut,
-    onMouseOver,
-    pattern,
-    readOnly,
-    tokens,
-    value,
-    variant = {},
-    type,
-    onKeyPress,
-    ...rest
-  } = _ref7;
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [showPassword, setShowPassword] = React.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.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.useRef();
-  const inputRef = ref ?? defaultRef;
-  const {
-    currentValue,
-    resetValue,
-    setValue,
-    isControlled,
-    isDirty
-  } = 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 === null || inputRef === void 0 ? void 0 : inputRef.current;
-  React.useEffect(() => {
-    if (Platform.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 => {
-    var _event$nativeEvent, _event$target;
-    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);
-    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);
-  };
-  const states = {
-    focus: isFocused,
-    hover: isHovered,
-    inactive
-  };
-  const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
-  const handleClear = event => {
-    var _inputRef$current;
-    onClear === null || onClear === void 0 ? void 0 : onClear(event);
-    resetValue(event);
-    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-  };
-  const handleShowOrHide = () => {
-    if (!variant.inactive) setShowPassword(!showPassword);
-  };
-  const {
-    buttonsGap,
-    clearButtonIcon: ClearButtonIcon,
-    icon: IconComponent,
-    passwordShowButtonIcon,
-    passwordHideButtonIcon,
-    defaultCreditIcon,
-    amexIcon,
-    visaIcon,
-    masterCardIcon
-  } = themeTokens;
-  const buttonsGapSize = useSpacingScale(buttonsGap);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const textInputButtons = buttons;
-  if (onClear && isDirty) {
-    textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/_jsx(IconButton, {
-      accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
-      icon: ClearButtonIcon,
-      onPress: handleClear,
-      variant: {
-        compact: true
-      }
-    }, "clear"));
-  }
-  if (isPassword) {
-    textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/_jsx(IconButton, {
-      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
-  } = useTheme();
-  const nativeInputStyle = selectInputStyles({
-    ...themeTokens,
-    height
-  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
-  return /*#__PURE__*/_jsxs(View, {
-    style: selectOuterBorderStyles(themeTokens),
-    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: isNumeric ? 'numeric' : 'default',
-      inputMode: isNumeric && 'numeric',
-      style: nativeInputStyle,
-      secureTextEntry: isPassword && !showPassword,
-      ...inputProps
-    }), IconComponent && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none" // avoid hijacking input press events
-      ,
-      style: [staticStyles.rightIconContainer, selectIconContainerStyles({
-        ...themeTokens,
-        buttonsGapSize
-      }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
-      children: /*#__PURE__*/_jsx(IconComponent, {
-        ...selectIconTokens(themeTokens)
-      })
-    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/_jsx(StackView, {
-        direction: "row",
-        space: buttonsGap,
-        children: textInputButtons
-      })
-    })]
-  });
-});
-TextInputBase.displayName = 'TextInputBase';
-TextInputBase.propTypes = {
-  ...selectedSystemPropTypes,
-  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
-  })]),
-  type: PropTypes.oneOfType([PropTypes.oneOf(['password', 'card', 'number'])]),
-  height: PropTypes.number,
-  inactive: PropTypes.bool,
-  initialValue: PropTypes.string,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onChangeText: PropTypes.func,
-  onClear: PropTypes.func,
-  onFocus: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onKeyPress: 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',
-    flexDirection: 'row',
-    alignItems: 'center',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  },
-  rightIconContainer: {
-    position: 'absolute',
-    right: 0,
-    bottom: 0
-  },
-  leftIconContainer: {
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-    zIndex: 1
-  }
-});

package/lib-module/TextInput/dictionary.js

@@ -1,12 +0,0 @@
-export 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-module/TextInput/index.js

@@ -1,3 +0,0 @@
-import TextInput from './TextInput';
-import TextArea from './TextArea';
-export { TextInput, TextArea };

package/lib-module/TextInput/propTypes.js

@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-
-// 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.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.
-   */
-  initialValue: PropTypes.string,
-  /**
-   * Disables all user interactions with the input.
-   */
-  inactive: PropTypes.bool,
-  /**
-   * Makes it impossible to change the input's value.
-   */
-  readOnly: PropTypes.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.func
-};
-export default textInputPropTypes;