@telus-uds/components-base 1.6.0 → 1.7.1

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/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/linkProps.js

@@ -38,20 +38,16 @@ var _default = {
   select: (0, _getPropSelector.default)(linkPropTypes),
 
   /**
-   * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
+   * Turn hrefs into press handlers that open links on Native.
    *
    * @param {({ onPress?: () => void, href?: string })}
-   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
-   * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
+   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
+   * handler is provided (expects calling component to render as `<a href={href}>` on web).
    */
   handleHref: ({
     onPress,
     href
   }) => {
-    if (!href && !onPress) {
-      throw new Error('handleHref requires either href or onPress');
-    }
-
     return _Platform.default.select({
       web: onPress,
       default: (...args) => {

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;

package/lib/utils/props/textProps.js

@@ -0,0 +1,72 @@
+"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 }; }
+
+// These are the props accepted specifically on React Native (Web) `Text` elements.
+// They are generally concerned with the behaviour of multiline text.
+const crossPlatform = {
+  /**
+   * Truncates text after this many lines with an ellipsis at the end.
+   * On native, ellipsis behaviour may be changed with `ellipsizeMode` prop.
+   */
+  numberOfLines: _propTypes.default.number,
+
+  /**
+   * Default is true on web and false on native
+   */
+  selectable: _propTypes.default.bool
+};
+/**
+ * See React Native docs for latest details on these.
+ * https://reactnative.dev/docs/text
+ */
+
+const nativeOnly = {
+  ellipsizeMode: _propTypes.default.string,
+  maxFontSizeMultiplier: _propTypes.default.number,
+  minimumFontScale: _propTypes.default.number,
+  onTextLayout: _propTypes.default.func,
+  suppressHighlighting: _propTypes.default.bool,
+  textBreakStrategy: _propTypes.default.string
+};
+/**
+ * These set HTML attributes of the same name.
+ */
+
+const webOnly = {
+  dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
+  lang: _propTypes.default.string
+};
+var _default = {
+  /**
+   * Set of prop types specific to React Native and React Native Web `Text`,
+   * which largely revolve around the behaviour of multiline non-pressable text.
+   */
+  types: { ...crossPlatform,
+    ...webOnly,
+    ...nativeOnly
+  },
+
+  /**
+   * Filters a props object, returning only props specific to `Text` elements
+   * on the current platform. Does not include props applicable to `Text` and `View`.
+   */
+  select: (0, _getPropSelector.default)({ ...crossPlatform,
+    ..._Platform.default.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+};
+exports.default = _default;

package/lib-module/Link/TextButton.js

@@ -1,5 +1,3 @@
-var _TextButton$propTypes;
-
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
@@ -16,8 +14,6 @@ const TextButton = /*#__PURE__*/forwardRef(({
   children,
   variant,
   tokens,
-  // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
-  // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
   accessibilityRole = 'button',
   ...linkProps
 }, ref) => {
@@ -34,10 +30,5 @@ const TextButton = /*#__PURE__*/forwardRef(({
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = { ...LinkBase.propTypes,
   onPress: PropTypes.func.isRequired
-}; // Remove incompatible Link prop (if this build includes propTypes)
-// TODO: test if this works with web navigation in omniplatform React Navigation
-// https://github.com/telus/universal-design-system/issues/665
-// eslint-disable-next-line react/forbid-foreign-prop-types
-
-if ((_TextButton$propTypes = TextButton.propTypes) !== null && _TextButton$propTypes !== void 0 && _TextButton$propTypes.href) delete TextButton.propTypes.href;
+};
 export default TextButton;

package/lib-module/List/ListItem.js

@@ -26,8 +26,7 @@ const selectBulletContainerStyles = ({
   itemBulletContainerAlign
 }) => ({
   width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign,
-  justifyContent: itemBulletContainerAlign
+  alignItems: itemBulletContainerAlign
 });
 
 const selectItemIconTokens = ({
@@ -38,16 +37,20 @@ const selectItemIconTokens = ({
   color: itemIconColor
 });
 
-const selectCommonIconStyles = ({
+const selectSideItemContainerStyles = ({
+  listGutter,
   iconMarginTop
 }) => ({
-  marginTop: iconMarginTop
-});
+  marginTop: iconMarginTop,
+  marginRight: listGutter
+}); // Align bullets with the top line of text the same way icons are aligned
 
-const selectSideItemContainerStyles = ({
-  listGutter
+
+const selectBulletPositioningStyles = ({
+  itemIconSize
 }) => ({
-  marginRight: listGutter
+  width: itemIconSize,
+  height: itemIconSize
 });
 
 const selectItemStyles = ({
@@ -100,8 +103,8 @@ const ListItem = /*#__PURE__*/forwardRef(({
   const dividerStyles = selectDividerStyles(themeTokens);
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
   const itemBulletStyles = selectBulletStyles(themeTokens);
+  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
   const iconTokens = selectItemIconTokens(themeTokens);
-  const commonIconStyles = selectCommonIconStyles(themeTokens);
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const accessibilityRole = Platform.select({
     web: 'listitem',
@@ -144,7 +147,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
 
     if (icon) {
       return /*#__PURE__*/_jsx(View, {
-        style: [sideItemContainerStyles, commonIconStyles],
+        style: sideItemContainerStyles,
         children: /*#__PURE__*/_jsx(IconComponent, {
           size: iconSize || iconTokens.size,
           color: iconColor || iconTokens.color
@@ -155,8 +158,11 @@ const ListItem = /*#__PURE__*/forwardRef(({
     return /*#__PURE__*/_jsx(View, {
       style: [sideItemContainerStyles, itemBulletContainerStyles],
       children: /*#__PURE__*/_jsx(View, {
-        style: itemBulletStyles,
-        testID: "unordered-item-bullet"
+        style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
+        children: /*#__PURE__*/_jsx(View, {
+          style: itemBulletStyles,
+          testID: "unordered-item-bullet"
+        })
       })
     });
   };
@@ -176,6 +182,10 @@ const staticStyles = StyleSheet.create({
   },
   wrap: {
     flex: 1
+  },
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 });
 ListItem.propTypes = { ...selectedSystemPropTypes,

package/lib-module/Search/Search.js

@@ -1,9 +1,9 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useSpacingScale, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import TextInputBase from '../TextInput/TextInputBase';
 import ButtonBase from '../Button/ButtonBase';
 import StackView from '../StackView';
@@ -11,7 +11,8 @@ import useCopy from '../utils/useCopy';
 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, viewProps]);
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
 
 const selectInputTokens = ({
   searchTokens,
@@ -66,8 +67,9 @@ const selectIconTokens = ({
 
 
 const Search = /*#__PURE__*/forwardRef(({
-  initialValue = '',
-  placeholder = 'Search',
+  initialValue,
+  value,
+  placeholder,
   inactive,
   onChange,
   onSubmit,
@@ -78,7 +80,14 @@ const Search = /*#__PURE__*/forwardRef(({
   variant,
   ...rest
 }, ref) => {
-  const [value, setValue] = useState(initialValue);
+  const {
+    currentValue = '',
+    setValue
+  } = useInputValue({
+    value,
+    initialValue,
+    onChange
+  });
   const themeTokens = useThemeTokens('Search', tokens, variant);
   const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
   const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
@@ -99,26 +108,24 @@ const Search = /*#__PURE__*/forwardRef(({
 
   const handleSubmit = event => {
     if (onSubmit !== undefined) {
-      onSubmit(value, event);
+      onSubmit(currentValue, event);
     }
   };
 
-  const handleChange = (currentValue, event) => {
-    setValue(currentValue, event);
-    if (onChange !== undefined) onChange(currentValue, event);
-  };
-
   const handleClear = event => {
     setValue('', event);
     if (onClear !== undefined) onClear('', event);
-    if (onChange !== undefined) onChange('', event);
   };
 
-  const isEmpty = value === '';
+  const isEmpty = currentValue === ''; // Accessibility label should always be present and correctly localised
+
+  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
+
+  const placeholderText = placeholder ?? a11yLabelText;
   return /*#__PURE__*/_jsxs(View, {
     style: staticStyles.container,
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(TextInputBase, {
+    ...selectContainerProps(rest),
+    children: [/*#__PURE__*/_jsx(TextInputBase, { ...selectInputProps(rest),
       ref: ref,
       tokens: appearances => selectInputTokens({
         searchTokens: getThemeTokens(appearances),
@@ -126,15 +133,15 @@ const Search = /*#__PURE__*/forwardRef(({
         buttonsGapSize,
         isEmpty
       }),
-      placeholder: placeholder,
+      placeholder: placeholderText,
       placeholderTextColor: placeholderColor,
       inactive: inactive,
       enablesReturnKeyAutomatically: true,
       returnKeyType: "search",
-      value: value,
-      onChange: handleChange,
+      value: currentValue,
+      onChange: setValue,
       onSubmitEditing: handleSubmit,
-      accessibilityLabel: accessibilityLabel || getCopy('accessibilityLabel')
+      accessibilityLabel: a11yLabelText
     }), /*#__PURE__*/_jsx(View, {
       style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
       children: /*#__PURE__*/_jsxs(StackView, {
@@ -166,7 +173,8 @@ const Search = /*#__PURE__*/forwardRef(({
   });
 });
 Search.displayName = 'Search';
-Search.propTypes = { ...selectedSystemPropTypes,
+Search.propTypes = { ...selectedContainerPropTypes,
+  ...selectedInputPropTypes,
 
   /**
    * Use this to set the initial value of the search input.

package/lib-module/TextInput/TextArea.js

@@ -1,12 +1,12 @@
 import React, { forwardRef, useState } from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, variantProp, viewProps } from '../utils';
+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, viewProps]);
+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.

package/lib-module/TextInput/TextInput.js

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, variantProp, viewProps } from '../utils';
+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";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, viewProps]);
+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.

package/lib-module/TextInput/TextInputBase.js

@@ -5,10 +5,10 @@ import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, useInputValue, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
 
 const selectInputStyles = ({
   backgroundColor,