@telus-uds/components-base 1.6.1 → 1.8.0

package/lib/Skeleton/Skeleton.js

@@ -68,13 +68,23 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   size,
+  sizeIndex = size,
+  sizePixels,
   characters,
   lines,
   shape = 'line',
   ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
-  const skeletonHeight = (0, _utils.useSpacingScale)(size || themeTokens.size);
+  const pixels = (0, _utils.useResponsiveProp)(sizePixels);
+  const spacingScaleValue = typeof pixels === 'number' ? // Size by an exact number of pixels
+  {
+    options: {
+      size: pixels
+    }
+  } : // Size by an index on the spacing scale (getting default index from theme if none provided)
+  sizeIndex || themeTokens.size;
+  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
   const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
 
   const getAnimationBaseOnPlatform = () => {
@@ -132,9 +142,45 @@ Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Skeleton'),
   variant: _utils.variantProp.propType,
-  size: _propTypes.default.number,
+
+  /**
+   * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
+   *
+   * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
+   */
+  sizeIndex: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * @deprecated alias for `sizeIndex`
+   */
+  size: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
+   *
+   * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
+   */
+  sizePixels: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
+
+  /**
+   * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
+   *
+   * Only has any affect if shape is line (the default). If unset, takes a default value from the theme.
+   */
   characters: _propTypes.default.number,
+
+  /**
+   * Determines how many Skeleton items are rendered (default 1).
+   *
+   * Recommended usage is to simulate paragraphs of text when Skeleton's shape is 'line' (the default shape).
+   *
+   * The amount of spacing between multiple lines is controlled by theme tokens.
+   */
   lines: _propTypes.default.number,
+
+  /**
+   * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
+   */
   shape: _propTypes.default.oneOf(['line', 'circle', 'box'])
 };
 var _default = Skeleton;

package/lib/TextInput/TextArea.js

@@ -27,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.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.

package/lib/TextInput/TextInput.js

@@ -25,7 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.viewProps]);
+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.

package/lib/TextInput/TextInputBase.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
 
 const selectInputStyles = ({
   backgroundColor,

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -107,6 +107,7 @@ const selectLabelTokens = ({
 });
 
 const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
+  copy = 'en',
   value,
   initialValue,
   onChange,
@@ -143,6 +144,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        copy: copy,
         forId: inputId,
         label: label,
         tokens: selectLabelTokens(themeTokens),
@@ -191,6 +193,11 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
 ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
   tokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
   variant: _utils.variantProp.propType,
 

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -36,6 +36,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
+  copy = 'en',
   variant,
   tokens,
   items = [],
@@ -112,6 +113,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       ..._utils.a11yProps.getPositionInSet(items.length, index)
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
+      copy: copy,
       id: id,
       ref: itemRef,
       onChange: handleChange,
@@ -143,6 +145,11 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
 ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
   tokens: (0, _utils.getTokensPropType)('ToggleSwitchGroup'),
   variant: _utils.variantProp.propType,
 

package/lib/Tooltip/Tooltip.js

@@ -330,7 +330,7 @@ Tooltip.propTypes = { ...selectedSystemPropTypes,
   content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
-   * Select english or french copy for the accessible label.
+   * Select English or French copy for the accessible label.
    */
   copy: _propTypes.default.oneOf(['en', 'fr']),
 

package/lib/Typography/Typography.js

@@ -32,7 +32,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
-const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
+const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
+const [selectTextProps, selectedTextPropTypes] = (0, _utils2.selectSystemProps)([_utils2.textProps]);
 
 const selectTextStyles = ({
   fontWeight,
@@ -71,31 +72,32 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
   });
-  const textProps = {
+  const resolvedTextProps = { ...selectTextProps(rest),
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
     } : themeTokens),
     dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  const selectedProps = selectProps({ ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
-    ...rest
-  });
+  const containerProps = { ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...selectContainerProps(rest)
+  };
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    ...selectedProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
+    ...containerProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...resolvedTextProps,
       children: children
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     ref: ref,
-    ...textProps,
-    ...selectedProps,
+    ...containerProps,
+    ...resolvedTextProps,
     children: children
   });
 });
 Typography.displayName = 'Typography';
-Typography.propTypes = { ...selectedSystemPropTypes,
+Typography.propTypes = { ...selectedContainerPropTypes,
+  ...selectedTextPropTypes,
   tokens: (0, _utils2.getTokensPropType)('Typography'),
   variant: _utils2.variantProp.propType,
 

package/lib/index.js

@@ -51,7 +51,10 @@ var _exportNames = {
   useTheme: true,
   useSetTheme: true,
   useThemeTokens: true,
-  getThemeTokens: true
+  getThemeTokens: true,
+  applyOuterBorder: true,
+  applyTextStyles: true,
+  applyShadowToken: true
 };
 Object.defineProperty(exports, "A11yText", {
   enumerable: true,
@@ -341,6 +344,24 @@ Object.defineProperty(exports, "getThemeTokens", {
     return _ThemeProvider.getThemeTokens;
   }
 });
+Object.defineProperty(exports, "applyOuterBorder", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.applyOuterBorder;
+  }
+});
+Object.defineProperty(exports, "applyTextStyles", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.applyTextStyles;
+  }
+});
+Object.defineProperty(exports, "applyShadowToken", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.applyShadowToken;
+  }
+});
 
 var _A11yText = _interopRequireDefault(require("./A11yText"));
 

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -22,14 +22,25 @@ function useVerticalExpandAnimation({
   isExpanded,
   tokens
 }) {
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
   const expandAnimatedValue = (0, _react.useRef)(new _Animated.default.Value(0)).current;
+  const elementRef = (0, _react.useRef)(null);
   const {
     expandDuration,
     collapseDuration
-  } = tokens;
+  } = tokens; // Treat as animating from when expanded state changes, until animation completes
+
+  (0, _react.useEffect)(() => setIsAnimating(true), [isExpanded]);
   (0, _react.useEffect)(() => {
+    const onComplete = () => !isExpanded && setIsAnimating(false);
+
     if (_Platform.default.OS === 'web') {
-      return;
+      if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
+      // https://github.com/necolas/react-native-web/pull/1713
+
+      const element = elementRef.current;
+      element.addEventListener('transitionend', onComplete);
+      return () => element.removeEventListener('transitionend', onComplete);
     }
 
     const animationConfig = {
@@ -39,25 +50,27 @@ function useVerticalExpandAnimation({
       useNativeDriver: false
     };
 
-    _Animated.default.timing(expandAnimatedValue, animationConfig).start();
-  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
-  let containerStyles; // don't visually collapse the container until we have it measured
+    const animation = _Animated.default.timing(expandAnimatedValue, animationConfig);
+
+    animation.start(onComplete);
+    return () => animation.stop();
+  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]); // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+
+  const containerStyles = !isExpanded && !isAnimating ? {
+    visibility: 'hidden'
+  } : {}; // don't visually collapse the container until we have it measured
 
   if (containerHeight !== null) {
     if (_Platform.default.OS === 'web') {
       const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-      containerStyles = {
-        transition: `height ${transitionDuration}ms ease-in-out`,
-        height: isExpanded ? containerHeight : 0
-      };
+      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
+      containerStyles.height = isExpanded ? containerHeight : 0;
     } else {
-      containerStyles = {
-        height: expandAnimatedValue
-      };
+      containerStyles.height = expandAnimatedValue;
     }
   }
 
-  return containerStyles;
+  return [containerStyles, elementRef];
 }
 
 var _default = useVerticalExpandAnimation;

package/lib/utils/input.js

@@ -7,6 +7,9 @@ exports.useMultipleInputValues = exports.useInputValue = void 0;
 
 var _react = require("react");
 
+/**
+ * @typedef {import('react').SyntheticEvent} Event
+ */
 const pluralHooks = ['useMultipleInputValues'];
 
 const validateProps = ({
@@ -64,11 +67,9 @@ Consumers of this hook must be one of:
  *
  * @param {string} hookName - optional, used for tailoring error messages
  *
- * @typedef {(oldValue: string|number|null) => string|number|null} UpdaterFunction - `setValue` takes a value or
- *          a function returning a new value from the old value
  * @returns {{
  *   currentValue: string|number|null
- *   setValue: (newValue: string|number|null|UpdaterFunction) => void
+ *   setValue: (newValue: string|number|null|(oldValue: string|number) => string|number, event: Event) => void
  *   resetValue: () => void
  *   isControlled: bool
  * }}
@@ -130,12 +131,10 @@ const useInputValue = (props = {}, hookName = 'useInputValue') => {
  *
  * @param {string} componentName - optional, used in error messages
  *
- * @typedef {(oldValues: string[]|number[]) => string[]|number[]} UpdaterFunction - `setValues` takes values or
- *          a function returning new values from old values
  * @returns {{
  *   currentValues: any
  *   resetValues: () => void
- *   setValues: (newValues: string[]|number[]|UpdaterFunction) => void
+ *   setValues: (newValues: string[]|number[]|(oldValues: string[]|number[]) => string[]|number[], event: Event) => void
  *   toggleOneValue: (value: string|number) => void
  *   unsetValues: () => void
  * }}

package/lib/utils/props/index.js

@@ -17,6 +17,8 @@ var _exportNames = {
   responsiveProps: true,
   spacingProps: true,
   selectSystemProps: true,
+  textInputProps: true,
+  textProps: true,
   variantProp: true,
   viewProps: true
 };
@@ -98,6 +100,18 @@ Object.defineProperty(exports, "selectSystemProps", {
     return _selectSystemProps.default;
   }
 });
+Object.defineProperty(exports, "textInputProps", {
+  enumerable: true,
+  get: function () {
+    return _textInputProps.default;
+  }
+});
+Object.defineProperty(exports, "textProps", {
+  enumerable: true,
+  get: function () {
+    return _textProps.default;
+  }
+});
 Object.defineProperty(exports, "variantProp", {
   enumerable: true,
   get: function () {
@@ -165,6 +179,10 @@ var _spacingProps = _interopRequireDefault(require("./spacingProps"));
 
 var _selectSystemProps = _interopRequireDefault(require("./selectSystemProps"));
 
+var _textInputProps = _interopRequireDefault(require("./textInputProps"));
+
+var _textProps = _interopRequireDefault(require("./textProps"));
+
 var _variantProp = _interopRequireDefault(require("./variantProp"));
 
 var _viewProps = _interopRequireDefault(require("./viewProps"));

package/lib/utils/props/inputSupportsProps.js

@@ -11,6 +11,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var _default = {
   types: {
+    /**
+     * Whether the English or French copy will be used (e.g. for accessibility labels).
+     */
+    copy: _propTypes.default.oneOf(['en', 'fr']),
+
     /**
      * The input label.
      */
@@ -43,6 +48,7 @@ var _default = {
     validation: _propTypes.default.oneOf(['error', 'success'])
   },
   select: ({
+    copy,
     label,
     hint,
     hintPosition,
@@ -51,6 +57,7 @@ var _default = {
     validation
   }) => ({
     supportsProps: {
+      copy,
       label,
       hint,
       hintPosition,

package/lib/utils/props/textInputProps.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// This file contains common props for components that render a React Native TextInput
+// It excludes interaction handler functions which are in `./handlerProps.js`
+
+/**
+ * TextInput (web and native) supports some common React Native props
+ * shared with React Native's Text component.
+ */
+const textProps = {
+  maxFontSizeMultiplier: _propTypes.default.number,
+  nativeId: _propTypes.default.string,
+  onLayout: _propTypes.default.func
+};
+/**
+ * UDS text inputs accept props related to UDS's useInputValue hook
+ */
+
+const inputValueProps = {
+  value: _propTypes.default.string,
+  initialValue: _propTypes.default.string,
+  readOnly: _propTypes.default.bool,
+  inactive: _propTypes.default.bool
+};
+/**
+ * This collection adds props that can be passed through to both React Native's
+ * and React Native Web's implementations of the React Native TextInput component.
+ */
+
+const crossPlatform = { ...textProps,
+  ...inputValueProps,
+
+  /**
+   * Web and Android; 'off' disables device autocomplete, other strings are platform-specific.
+   * Valid values on Native: https://reactnative.dev/docs/textinput#autocomplete-android
+   * Valid values on Web: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
+  autoComplete: _propTypes.default.string,
+
+  /**
+   * On Native, default is `true`, passing `false` disables autoCorrect.
+   * On web, only supported by Safari and expects "on" or "off" strings.
+   */
+  autoCorrect: _propTypes.default.oneOf([true, false, 'on', 'off']),
+
+  /**
+   * Focuses the element on mount. On Web, only the first form element with autoFocus is focussed.
+   */
+  autoFocus: _propTypes.default.bool,
+
+  /**
+   * Default is `true` for single line, `false` for multi-line
+   */
+  blurOnSubmit: _propTypes.default.bool,
+
+  /**
+   * iOS and Web only, no effect on Android
+   */
+  clearTextOnFocus: _propTypes.default.bool,
+
+  /**
+   * Default is `true`. On web, this works by mapping to input's `readonly` attribute
+   */
+  editable: _propTypes.default.bool,
+
+  /**
+   * See documentation for allowed values (varies between Web, Android and iOS) and important notes:
+   * - Native: https://reactnative.dev/docs/textinput#keyboardtype
+   * - Web: equivalent to `inputmode` but see https://necolas.github.io/react-native-web/docs/text-input/
+   */
+  keyboardType: _propTypes.default.string,
+
+  /**
+   * Uses native tools (no flicker) to cap the maximum number of characters.
+   * On Web, works via `maxlength` attr.
+   */
+  maxLength: _propTypes.default.number,
+
+  /**
+   * If passed as true, the text input can be multiple lines.
+   *
+   * > It is important to note that this aligns the text to the top on iOS, and centers it on Android.
+   * > Use with textAlignVertical set to top for the same behavior in both platforms.
+   */
+  multiline: _propTypes.default.bool,
+
+  /**
+   * Web and Android only, requires `multiline` to be `true`.
+   */
+  numberOfLines: _propTypes.default.number,
+
+  /**
+   * Text to display when no value set.
+   * Accesibility guidelines recommend using labels to describe the input and using
+   * placeholders rarely and sparingly to prompt a particular format.
+   */
+  placeholder: _propTypes.default.string,
+
+  /**
+   * Sets placeholder colour. On Web, uses `::placeholder { color: ... }` selector.
+   */
+  placeholderTextColor: _propTypes.default.string,
+
+  /**
+   * One of a subset of platform-specific options that controls labelling and presentation
+   * in on-screen keyboards and accessibility tools. Uses `enterkeyhint` attr on Web.
+   *
+   * 'done', 'go', 'next', 'search', and 'send' are available for Web, Android and iOS.
+   */
+  returnKeyType: _propTypes.default.string,
+
+  /**
+   * Obscures passwords and similar. Equivalent to type="password" on Web.
+   * Does not work if multiline is true.
+   */
+  secureTextEntry: _propTypes.default.bool,
+
+  /**
+   * If true, all text will automatically be selected on focus.
+   */
+  selectTextOnFocus: _propTypes.default.bool,
+
+  /**
+   * Web and iOS. On iOS, default inherits from `autoCorrect`.
+   * On Web, equivalent to `spellcheck` attr.
+   */
+  spellCheck: _propTypes.default.bool
+};
+/**
+ * These web-only props all control HTML `input` attributes of the same name.
+ * Refer to general HTML documentation for more details.
+ */
+
+const webOnly = {
+  disabled: _propTypes.default.bool,
+  dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
+  lang: _propTypes.default.string
+};
+/**
+ * These props are supported in React Native but not React Native Web.
+ *
+ * React Native text inputs can be quirky, so a full set of props should be allowed to handle edge cases.
+ * Refer to React Native documentation for details, allowed values, and Android/iOS support and versions:
+ * https://reactnative.dev/docs/textinput
+ *
+ * Beware that many React Native text input props apply via complicated logic that chooses a built-in
+ * native component based on the values of multiple boolean flags, and may sometimes appear to pick an
+ * option that is inappropriate for one flag based on the values of one or more other other flags.
+ */
+
+const nativeOnly = {
+  caretHidden: _propTypes.default.bool,
+  clearButtonMode: _propTypes.default.string,
+  contextMenuHidden: _propTypes.default.bool,
+  dataDetectorTypes: _propTypes.default.string,
+  disableFullscreenUI: _propTypes.default.bool,
+  enablesReturnKeyAutomatically: _propTypes.default.bool,
+  importantForAutofill: _propTypes.default.string,
+  inlineImageLeft: _propTypes.default.string,
+  keyboardAppearance: _propTypes.default.string,
+  returnKeyLabel: _propTypes.default.string,
+  rejectResponderTermination: _propTypes.default.bool,
+  scrollEnabled: _propTypes.default.bool,
+  selection: _propTypes.default.object,
+  selectionColor: _propTypes.default.string,
+  showSoftInputOnFocus: _propTypes.default.bool,
+  textAlign: _propTypes.default.string,
+  textContentType: _propTypes.default.string,
+  passwordRules: _propTypes.default.string,
+  textBreakStrategy: _propTypes.default.string,
+  underlineColorAndroid: _propTypes.default.string
+};
+var _default = {
+  /**
+   * Subset of proptypes that can be passed down to a React Native or React Native Web
+   * `TextInput` component. Allow regardless of platform, so cross-platform apps don't warn.
+   */
+  types: { ...crossPlatform,
+    ...webOnly,
+    ...nativeOnly
+  },
+
+  /**
+   * Filters a props object. Return only platform-appropriate TextInput props, native inputs
+   * may throw errors on receiving unknown props.
+   */
+  select: (0, _getPropSelector.default)({ ...crossPlatform,
+    ..._Platform.default.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+};
+exports.default = _default;