@telus-uds/components-base 1.6.0 → 1.7.1

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-@telus-uds/components-base:build: cache hit, replaying output d1359cc1069914c5
-@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
-@telus-uds/components-base:build: $ yarn build:main && yarn build:module
-@telus-uds/components-base:build: $ babel src -d lib
-@telus-uds/components-base:build: Successfully compiled 217 files with Babel (8026ms).
-@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
-@telus-uds/components-base:build: Successfully compiled 217 files with Babel (5098ms).
-@telus-uds/components-base:build: $ babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js
+@telus-uds/components-base:build: cache hit, replaying output 2723a575209dd005
+@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
+@telus-uds/components-base:build: $ yarn build:main && yarn build:module
+@telus-uds/components-base:build: $ babel src -d lib
+@telus-uds/components-base:build: Successfully compiled 219 files with Babel (5370ms).
+@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
+@telus-uds/components-base:build: Successfully compiled 219 files with Babel (3473ms).
+@telus-uds/components-base:build: $ babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js

package/.turbo/turbo-lint.log

@@ -1,13 +1,13 @@
-@telus-uds/components-base:lint: cache hit, replaying output 946abc71241dcfa6
-@telus-uds/components-base:lint: $ yarn --cwd ../.. lint:path --color packages/components-base
-@telus-uds/components-base:lint: $ eslint --ignore-path .gitignore --ext .js,.jsx,.mjs,.cjs --color packages/components-base
-@telus-uds/components-base:lint: 
-@telus-uds/components-base:lint: /home/runner/work/universal-design-system/universal-design-system/packages/components-base/__tests__/FlexGrid/Col.test.jsx
-@telus-uds/components-base:lint:    51:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   106:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   155:63  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   200:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   248:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint: 
-@telus-uds/components-base:lint: ✖ 5 problems (0 errors, 5 warnings)
-@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: cache hit, replaying output 89b2f7c5fe1ddf01
+@telus-uds/components-base:lint: $ yarn --cwd ../.. lint:path --color packages/components-base
+@telus-uds/components-base:lint: $ eslint --ignore-path .gitignore --ext .js,.jsx,.mjs,.cjs --color packages/components-base
+@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: /home/runner/work/universal-design-system/universal-design-system/packages/components-base/__tests__/FlexGrid/Col.test.jsx
+@telus-uds/components-base:lint:    51:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   106:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   155:63  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   200:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   248:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: ✖ 5 problems (0 errors, 5 warnings)
+@telus-uds/components-base:lint: 

package/CHANGELOG.json

@@ -2,7 +2,78 @@
   "name": "@telus-uds/components-base",
   "entries": [
     {
-      "date": "Thu, 28 Apr 2022 15:40:15 GMT",
+      "date": "Tue, 17 May 2022 19:56:01 GMT",
+      "tag": "@telus-uds/components-base_v1.7.1",
+      "version": "1.7.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "135b7393e08bc5078bc73da4740da2b1f9e990fd",
+            "comment": "fix(components): fix inactive TextInput prop"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 17 May 2022 15:04:46 GMT",
+      "tag": "@telus-uds/components-base_v1.7.0",
+      "version": "1.7.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "70105ac8b165247e3cd29a78e3247f7a475b287a",
+            "comment": "align List bullets like icons"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "70105ac8b165247e3cd29a78e3247f7a475b287a",
+            "comment": "Add text props to Typography"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "70105ac8b165247e3cd29a78e3247f7a475b287a",
+            "comment": "fix(components): support TextInput props"
+          }
+        ],
+        "minor": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "70105ac8b165247e3cd29a78e3247f7a475b287a",
+            "comment": "Allow Search component to be controlled"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 06 May 2022 15:31:28 GMT",
+      "tag": "@telus-uds/components-base_v1.6.1",
+      "version": "1.6.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "d0967886e4328b789fd5490f068c74fa24379b87",
+            "comment": "don't throw if no href/onPress in link/button"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "d0967886e4328b789fd5490f068c74fa24379b87",
+            "comment": "fix: allow parsing tokens inherited from multiple components"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 28 Apr 2022 15:40:29 GMT",
       "tag": "@telus-uds/components-base_v1.6.0",
       "version": "1.6.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 28 Apr 2022 15:40:15 GMT and should not be manually modified.
+This log was last generated on Tue, 17 May 2022 19:56:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.7.1
+
+Tue, 17 May 2022 19:56:01 GMT
+
+### Patches
+
+- fix(components): fix inactive TextInput prop (alan.slater@nearform.com)
+
+## 1.7.0
+
+Tue, 17 May 2022 15:04:46 GMT
+
+### Minor changes
+
+- Allow Search component to be controlled (alan.slater@nearform.com)
+
+### Patches
+
+- align List bullets like icons (alan.slater@nearform.com)
+- Add text props to Typography (alan.slater@nearform.com)
+- fix(components): support TextInput props (alan.slater@nearform.com)
+
+## 1.6.1
+
+Fri, 06 May 2022 15:31:28 GMT
+
+### Patches
+
+- don't throw if no href/onPress in link/button (alan.slater@nearform.com)
+- fix: allow parsing tokens inherited from multiple components (ruslan.bredikhin@nearform.com)
+
 ## 1.6.0
 
-Thu, 28 Apr 2022 15:40:15 GMT
+Thu, 28 Apr 2022 15:40:29 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -5701,28 +5701,6 @@
       "docs": {
         "description": "The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.\nUse `Search` to feature autocomplete interactions.\n\nThis component includes a clear button, which will appear as text is entered and pressing it will\ncause the input's internal state value to be set to an empty string.\n\nThis component may only be used as uncontrolled, as the search value is managed within an internal state.\nYou can use the `onChange` prop to react to value changes and the `onSubmit` prop to react on search submission.\n\nUse the following props to supply additional accessibility labels for the input - `accessibilityLabel`,\nclear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.",
         "props": {
-          "initialValue": {
-            "defaultValue": {
-              "value": "''",
-              "computed": false
-            },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Use this to set the initial value of the search input.\nUpdating `initialValue` will **not** update the actual value."
-          },
-          "placeholder": {
-            "defaultValue": {
-              "value": "'Search'",
-              "computed": false
-            },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Label rendered in the search input when it has no value."
-          },
           "copy": {
             "defaultValue": {
               "value": "'en'",
@@ -5766,6 +5744,20 @@
             "required": false,
             "description": "Select english or french copy for the accessible labels.\nYou may also pass in a custom dictionary object."
           },
+          "initialValue": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Use this to set the initial value of the search input.\nUpdating `initialValue` will **not** update the actual value."
+          },
+          "placeholder": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Label rendered in the search input when it has no value."
+          },
           "inactive": {
             "type": {
               "name": "bool"
@@ -8509,7 +8501,29 @@
           "tokens": {
             "type": {
               "name": "custom",
-              "raw": "getTokensPropType('ChevronLink', 'Link')"
+              "raw": {
+                "leftIcon": "icon",
+                "rightIcon": "icon",
+                "iconDisplace": "size",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "textLine": "textLine",
+                "color": "color",
+                "textLineStyle": "textLineStyle",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBorderOutline": "borderStyle",
+                "borderRadius": "radius",
+                "blockFontName": "fontName",
+                "blockFontWeight": "fontWeight",
+                "blockFontSize": "fontSize",
+                "blockLineHeight": "lineHeight",
+                "icon": "icon",
+                "iconTranslateX": "size",
+                "iconTranslateY": "size",
+                "alignSelf": "flexAlign"
+              }
             },
             "required": false,
             "description": ""
@@ -9459,7 +9473,29 @@
           "tokens": {
             "type": {
               "name": "custom",
-              "raw": "getTokensPropType('TextArea', 'TextInput')"
+              "raw": {
+                "minLines": "integer",
+                "maxLines": "integer",
+                "backgroundColor": "color",
+                "color": "color",
+                "borderWidth": "border",
+                "borderColor": "color",
+                "borderRadius": "radius",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "outerBackgroundColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderColor": "color",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "fontSize": "fontSize",
+                "lineHeight": "lineHeight",
+                "icon": "icon",
+                "iconSize": "size",
+                "iconColor": "color"
+              }
             },
             "required": false,
             "description": ""

package/generate-component-docs.js

@@ -23,13 +23,26 @@ const parseComponentDocs = (name, generated) => {
 
     const out = { ...prop }
 
-    // check if this prop references the tokens schema
-    const tokensProp = out.type?.raw?.match(/getTokensPropType\('([A-z]+)'\)/)?.[1]
-    if (tokensProp) {
-      if (!schema.components[tokensProp]) {
-        throw new Error(`Unknown schema component reference: ${tokensProp} from component: ${name}`)
-      }
-      out.type = { ...out.type, raw: schema.components[tokensProp] }
+    // check if this prop references the tokens schema;
+    // this regex extracts unquoted parameter strings from function
+    // calls like `getTokensPropType('ChevronLink', 'Link')` with the result
+    // being an array: `['ChevronLink', 'Link']`
+    const tokensProp = out.type?.raw?.match(/(?<=getTokensPropType\(.*)(\w+)+(?=.*\))/gs)
+
+    // if so, try and read the schema from the base components
+    if (tokensProp && tokensProp.length > 0) {
+      let raw = {}
+
+      tokensProp.forEach((componentName) => {
+        if (!schema.components[componentName]) {
+          // this would be a run-time error in the base components
+          throw new Error(
+            `Unknown schema component reference: ${componentName} from component: ${name}`
+          )
+        }
+        raw = { ...raw, ...schema.components[componentName] }
+      })
+      out.type = { ...out.type, raw }
     }
     props[propName] = out
   })

package/lib/Link/TextButton.js

@@ -15,8 +15,6 @@ var _LinkBase = _interopRequireDefault(require("./LinkBase"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _TextButton$propTypes;
-
 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); }
@@ -33,8 +31,6 @@ const TextButton = /*#__PURE__*/(0, _react.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) => {
@@ -51,11 +47,6 @@ const TextButton = /*#__PURE__*/(0, _react.forwardRef)(({
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = { ..._LinkBase.default.propTypes,
   onPress: _propTypes.default.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;
+};
 var _default = TextButton;
 exports.default = _default;

package/lib/List/ListItem.js

@@ -45,8 +45,7 @@ const selectBulletContainerStyles = ({
   itemBulletContainerAlign
 }) => ({
   width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign,
-  justifyContent: itemBulletContainerAlign
+  alignItems: itemBulletContainerAlign
 });
 
 const selectItemIconTokens = ({
@@ -57,16 +56,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 = ({
@@ -119,8 +122,8 @@ const ListItem = /*#__PURE__*/(0, _react.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.default.select({
@@ -164,7 +167,7 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
 
     if (icon) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [sideItemContainerStyles, commonIconStyles],
+        style: sideItemContainerStyles,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
           size: iconSize || iconTokens.size,
           color: iconColor || iconTokens.color
@@ -175,8 +178,11 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [sideItemContainerStyles, itemBulletContainerStyles],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: itemBulletStyles,
-        testID: "unordered-item-bullet"
+        style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: itemBulletStyles,
+          testID: "unordered-item-bullet"
+        })
       })
     });
   };
@@ -197,6 +203,10 @@ const staticStyles = _StyleSheet.default.create({
   },
   wrap: {
     flex: 1
+  },
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 });
 

package/lib/Search/Search.js

@@ -35,7 +35,8 @@ 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.viewProps]);
+const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectInputProps, selectedInputPropTypes] = (0, _utils.selectSystemProps)([_utils.textInputHandlerProps, _utils.textInputProps]);
 
 const selectInputTokens = ({
   searchTokens,
@@ -90,8 +91,9 @@ const selectIconTokens = ({
 
 
 const Search = /*#__PURE__*/(0, _react.forwardRef)(({
-  initialValue = '',
-  placeholder = 'Search',
+  initialValue,
+  value,
+  placeholder,
   inactive,
   onChange,
   onSubmit,
@@ -102,7 +104,14 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   ...rest
 }, ref) => {
-  const [value, setValue] = (0, _react.useState)(initialValue);
+  const {
+    currentValue = '',
+    setValue
+  } = (0, _utils.useInputValue)({
+    value,
+    initialValue,
+    onChange
+  });
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, variant);
   const buttonTokens = (0, _ThemeProvider.useThemeTokens)('SearchButton', tokens, variant);
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Search', tokens, variant);
@@ -123,26 +132,24 @@ const Search = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
-    ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+    ...selectContainerProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, { ...selectInputProps(rest),
       ref: ref,
       tokens: appearances => selectInputTokens({
         searchTokens: getThemeTokens(appearances),
@@ -150,15 +157,15 @@ const Search = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
@@ -190,7 +197,8 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Search.displayName = 'Search';
-Search.propTypes = { ...selectedSystemPropTypes,
+Search.propTypes = { ...selectedContainerPropTypes,
+  ...selectedInputPropTypes,
 
   /**
    * Use this to set the initial value of the search input.

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/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,