@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/TextInput/TextInputBase.js

@@ -1,43 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(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 _utils = require("../utils");
-
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
-
-const selectInputStyles = (_ref, themeOptions, inactive) => {
+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, 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,
@@ -53,53 +28,53 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     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 = (0, _ThemeProvider.applyTextStyles)({
-    fontName,
+  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.default.select({
+  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 paddingWithIcon = iconSize + paddingRight;
+  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: offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -110,7 +85,6 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     ...webStyles
   };
 };
-
 const selectOuterBorderStyles = _ref2 => {
   let {
     outerBackgroundColor,
@@ -120,14 +94,13 @@ const selectOuterBorderStyles = _ref2 => {
   } = _ref2;
   return {
     background: outerBackgroundColor,
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...applyOuterBorder({
       outerBorderColor,
       outerBorderWidth,
       borderRadius
     })
   };
 };
-
 const selectIconTokens = _ref3 => {
   let {
     iconSize,
@@ -138,7 +111,6 @@ const selectIconTokens = _ref3 => {
     color: iconColor
   };
 };
-
 const selectIconContainerStyles = (_ref4, buttonCount) => {
   let {
     buttonSize,
@@ -151,17 +123,64 @@ const selectIconContainerStyles = (_ref4, buttonCount) => {
     paddingBottom
   };
 };
-
-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__*/(0, _react.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 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',
@@ -180,91 +199,105 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     tokens,
     value,
     variant = {},
+    type,
+    onKeyPress,
     ...rest
-  } = _ref6;
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-
+  } = _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] = (0, _react.useState)(false);
-
+  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 = (0, _react.useRef)();
-  const inputRef = ref !== null && ref !== void 0 ? ref : defaultRef;
+  const defaultRef = React.useRef();
+  const inputRef = ref ?? defaultRef;
   const {
     currentValue,
     resetValue,
     setValue,
     isControlled,
     isDirty
-  } = (0, _utils.useInputValue)({
+  } = 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;
-  (0, _react.useEffect)(() => {
-    if (_Platform.default.OS === 'web' && pattern && element) {
+  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);
-    setValue(text, event);
-    if (typeof onChangeText === 'function') onChangeText(text, event);
+    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 = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
+  const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
+  const handleClear = event => {
+    var _inputRef$current;
+    onClear === null || onClear === void 0 || onClear(event);
+    resetValue(event);
+    inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  };
+  const handleShowOrHide = () => {
+    if (!variant.inactive) setShowPassword(!showPassword);
+  };
   const {
     buttonsGap,
     clearButtonIcon: ClearButtonIcon,
-    icon: IconComponent
+    icon: IconComponent,
+    passwordShowButtonIcon,
+    passwordHideButtonIcon,
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon
   } = themeTokens;
-  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const buttonsGapSize = useSpacingScale(buttonsGap);
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
-
+  const textInputButtons = buttons;
   if (onClear && isDirty) {
-    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();
-    };
-
-    buttons === null || buttons === void 0 ? void 0 : buttons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    textInputButtons === null || textInputButtons === void 0 || textInputButtons.unshift(/*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
       icon: ClearButtonIcon,
       onPress: handleClear,
@@ -273,8 +306,25 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       }
     }, "clear"));
   }
-
-  const inputProps = { ...selectProps(rest),
+  if (isPassword) {
+    textInputButtons === null || textInputButtons === 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,
@@ -282,80 +332,103 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
-    // currentValue is being updated even if the input is not controlled, passing it down to the
-    // Input could lead to changing its state from uncontrolled to controlled
-    value: isControlled ? currentValue : undefined
+    maxLength: type === 'card' ? 19 : undefined,
+    value: isControlled ? currentValue : undefined,
+    onKeyPress
   };
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const nativeInputStyle = selectInputStyles({ ...themeTokens,
+  } = useTheme();
+  const nativeInputStyle = selectInputStyles({
+    ...themeTokens,
     height
-  }, themeOptions, inactive);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
+  return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+    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' : undefined,
       style: nativeInputStyle,
+      secureTextEntry: isPassword && !showPassword,
       ...inputProps
-    }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), 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__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
+      children: /*#__PURE__*/_jsx(IconComponent, {
+        ...selectIconTokens(themeTokens)
       })
-    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/_jsx(View, {
       style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      children: /*#__PURE__*/_jsx(StackView, {
         direction: "row",
         space: buttonsGap,
-        children: buttons
+        children: textInputButtons
       })
     })]
   });
 });
 TextInputBase.displayName = 'TextInputBase';
-TextInputBase.propTypes = { ...selectedSystemPropTypes,
-  buttons: _propTypes.default.arrayOf(_propTypes.default.node),
-
+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.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
-    clearButtonAccessibilityLabel: _propTypes.default.string
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
+    clearButtonAccessibilityLabel: PropTypes.string
   })]),
-  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,
-  readOnly: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
-  value: _propTypes.default.string,
-  variant: _utils.variantProp.propType
+  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
 };
-var _default = TextInputBase;
-exports.default = _default;
-
-const staticStyles = _StyleSheet.default.create({
+export default TextInputBase;
+const staticStyles = StyleSheet.create({
   buttonsContainer: {
     position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
     right: 0,
     top: 0,
     bottom: 0,
     justifyContent: 'center'
   },
-  iconContainer: {
+  rightIconContainer: {
     position: 'absolute',
     right: 0,
     bottom: 0
+  },
+  leftIconContainer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
   }
 });

package/lib/TextInput/dictionary.js

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

package/lib/TextInput/index.js

@@ -1,23 +1,3 @@
-"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import TextInput from './TextInput';
+import TextArea from './TextArea';
+export { TextInput, TextArea };

package/lib/TextInput/propTypes.js

@@ -1,13 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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.
@@ -16,29 +7,28 @@ 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,
-
+  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.default.string,
-
+  initialValue: PropTypes.string,
   /**
    * Disables all user interactions with the input.
    */
-  inactive: _propTypes.default.bool,
-
+  inactive: PropTypes.bool,
   /**
    * Makes it impossible to change the input's value.
    */
-  readOnly: _propTypes.default.bool,
-
+  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.default.func
+  onChange: PropTypes.func
 };
-var _default = textInputPropTypes;
-exports.default = _default;
+export default textInputPropTypes;