@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/Tags/Tags.js

@@ -1,47 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _StackView = require("../StackView");
-
-var _ViewportProvider = require("../ViewportProvider");
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _pressability = require("../utils/pressability");
-
-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.viewProps]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import ButtonBase from '../Button/ButtonBase';
+import Icon from '../Icon';
+import { StackWrap, getStackedContent } from '../StackView';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, pressProps, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { getPressHandlersWithArgs } from '../utils/pressability';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
@@ -66,7 +38,7 @@ const separateIconTextTokens = (_ref, returnRest) => {
       borderRadius: iconBorderRadius,
       alignSelf: iconAlignSelf,
       padding: iconPadding,
-      ..._Platform.default.select({
+      ...Platform.select({
         // TODO: https://github.com/telus/universal-design-system/issues/487
         web: {
           transition: 'color 200ms, background 200ms'
@@ -81,12 +53,9 @@ const separateIconTextTokens = (_ref, returnRest) => {
     }
   };
 };
-
 const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
-
 const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
-
-const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const Tags = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     variant,
     tokens,
@@ -97,30 +66,29 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     onChange,
     readOnly = false,
     inactive = false,
-    accessibilityRole = _Platform.default.select({
+    accessibilityRole = Platform.select({
       web: 'group',
       default: 'none'
     }),
     ...rest
   } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tags', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Tags', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
+  const stackTokens = selectTokens('StackView', themeTokens);
   const {
     direction,
     space
   } = themeTokens;
-  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('TagsItem', tokens, variant);
-
-  const getButtonTokens = buttonState => // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
-  (0, _utils.selectTokens)('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
-
+  const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant);
+  const getButtonTokens = buttonState =>
+  // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+  selectTokens('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
   const {
     currentValues,
     toggleOneValue
-  } = (0, _utils.useMultipleInputValues)({
+  } = useMultipleInputValues({
     initialValues,
     values,
     maxValues,
@@ -133,12 +101,10 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
   const itemA11yRole = 'checkbox';
   const uniqueFields = ['id', 'label'];
-
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("Tags items must have unique ".concat(uniqueFields.join(', ')));
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
   }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+  return /*#__PURE__*/_jsx(StackWrap, {
     ref: ref,
     ...selectedProps,
     space: space,
@@ -151,28 +117,27 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         ref: itemRef,
         ...itemRest
       } = _ref3;
-      const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
+      const isSelected = currentValues.includes(id);
 
-      const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
+      // Pass an object of relevant component state as first argument for any passed-in press handlers
+      const pressHandlers = getPressHandlersWithArgs(rest, [{
         id,
         label,
         currentValues
       }]);
-
       const handlePress = event => {
         if (pressHandlers.onPress) pressHandlers.onPress(event);
         toggleOneValue(id, event);
       };
-
       const itemProps = selectItemProps({
         accessibilityState: {
           checked: isSelected
         },
         accessibilityRole: itemA11yRole,
-        ..._utils.a11yProps.getPositionInSet(items.length, index),
+        ...a11yProps.getPositionInSet(items.length, index),
         ...itemRest
       });
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      return /*#__PURE__*/_jsx(ButtonBase, {
         ref: itemRef,
         ...pressHandlers,
         onPress: handlePress,
@@ -190,6 +155,7 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
           // - Icon: https://github.com/telus/universal-design-system/issues/327
           // - IconButton: https://github.com/telus/universal-design-system/issues/281
           // - Token sets: https://github.com/telus/universal-design-system/issues/782
+
           const itemTokens = getItemTokens(buttonState);
           const {
             iconTokens,
@@ -198,18 +164,18 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
             iconWrapperStyle,
             icon: IconComponent
           } = selectIconTextTokens(itemTokens);
-          const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
             style: iconWrapperStyle,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            children: /*#__PURE__*/_jsx(Icon, {
               icon: IconComponent,
               tokens: iconTokens
             })
           }) : null;
-          const textContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          const textContent = /*#__PURE__*/_jsx(Text, {
             style: textStyles,
             children: label
           });
-          return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
+          return getStackedContent(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
             space: iconSpace,
             direction: 'row'
           });
@@ -219,65 +185,61 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
 });
 Tags.displayName = 'Tags';
-Tags.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Tags'),
-  variant: _utils.variantProp.propType,
-
+Tags.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Tags'),
+  variant: variantProp.propType,
   /**
    * If provided, sets a maximum number of items a user may select at once.
    */
-  maxValues: _propTypes.default.number,
-
+  maxValues: PropTypes.number,
   /**
    * The options a user may select
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
-
+  items: PropTypes.arrayOf(PropTypes.shape({
+    ...selectedItemPropTypes,
     /**
      * The text displayed to the user in the button, describing this option,
      * passed to the button as its child.
      */
-    label: _propTypes.default.string.isRequired,
-
+    label: PropTypes.string.isRequired,
     /**
      * An optional accessibility label may be passed to ButtonGroup Buttons
      * which is applied as normal for a React Native accessibilityLabel prop.
      */
-    accessibilityLabel: _propTypes.default.string,
-
+    accessibilityLabel: PropTypes.string,
     /**
      * An optional unique string may be provided to identify this option,
      * which will be used in code and passed to any onChange function.
      * If not provided, the label is used.
      */
-    id: _propTypes.default.string,
-
+    id: PropTypes.string,
     /**
      * An optional ref for one individual Tag button in the tags
      */
-    ref: _airbnbPropTypes.default.ref()
+    ref: ABBPropTypes.ref()
   })),
-
   /**
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.
    */
-  onChange: _propTypes.default.func,
-
+  onChange: PropTypes.func,
   /**
    * If the selected item(s) in the button group are to be controlled externally by
    * a parent component, pass an array of strings as well as an `onChange` handler.
    * Passing an array for "values" makes the ButtonGroup a "controlled" component that
    * expects its state to be handled via `onChange` and so doesn't handle it itself.
    */
-  values: _propTypes.default.arrayOf(_propTypes.default.string),
-
+  values: PropTypes.arrayOf(PropTypes.string),
   /**
    * If `values` is not passed, making the ButtonGroup an "uncontrolled" component
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: _propTypes.default.arrayOf(_propTypes.default.string)
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * AccesibilityRole for the Tags
+   */
+  accessibilityRole: PropTypes.string
 };
-var _default = Tags;
-exports.default = _default;
+export default Tags;

package/lib/Tags/index.js

@@ -1,13 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _Tags = _interopRequireDefault(require("./Tags"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _Tags.default;
-exports.default = _default;
+import Tags from './Tags';
+export default Tags;

package/lib/TextInput/TextArea.js

@@ -1,33 +1,13 @@
-"use strict";
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
+import InputSupports from '../InputSupports';
+import TextInputBase from './TextInputBase';
+import { useThemeTokens } from '../ThemeProvider';
+import textInputPropTypes from './propTypes';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _utils = require("../utils");
-
-var _InputSupports = _interopRequireDefault(require("../InputSupports"));
-
-var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _propTypes = _interopRequireDefault(require("./propTypes"));
-
-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.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.
@@ -52,16 +32,16 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-
-const TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant = {},
     ...rest
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
-  const [inputHeight, setInputHeight] = (0, _react.useState)(); // adjust the text area's height as new lines are added to the content
+  const themeTokens = useThemeTokens('TextArea', tokens, variant);
+  const [inputHeight, setInputHeight] = React.useState();
 
+  // adjust the text area's height as new lines are added to the content
   const onHeightChange = _ref2 => {
     let {
       nativeEvent: {
@@ -70,19 +50,19 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         }
       }
     } = _ref2;
-
     // on native this is happens out of the box
-    if (_Platform.default.OS === 'web') {
+    if (Platform.OS === 'web') {
       setInputHeight(height);
     }
   };
-
   const {
     supportsProps,
     ...selectedProps
   } = selectProps(rest);
-  const inputProps = { ...selectedProps,
-    variant: { ...variant,
+  const inputProps = {
+    ...selectedProps,
+    variant: {
+      ...variant,
       validation: supportsProps.validation
     },
     multiline: true,
@@ -90,13 +70,14 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     height: inputHeight,
     tokens: themeTokens
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+  return /*#__PURE__*/_jsx(InputSupports, {
+    ...supportsProps,
     children: _ref3 => {
       let {
         inputId,
         ...props
       } = _ref3;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      return /*#__PURE__*/_jsx(TextInputBase, {
         ref: ref,
         ...inputProps,
         nativeID: inputId,
@@ -106,11 +87,11 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
 });
 TextArea.displayName = 'TextArea';
-TextArea.propTypes = { ...selectedSystemPropTypes,
-  ..._propTypes.default,
-  tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),
+TextArea.propTypes = {
+  ...selectedSystemPropTypes,
+  ...textInputPropTypes,
+  tokens: getTokensPropType('TextArea', 'TextInput'),
   // TODO: support both TextArea and TextInput tokens
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = TextArea;
-exports.default = _default;
+export default TextArea;

package/lib/TextInput/TextInput.js

@@ -1,31 +1,12 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
+import InputSupports from '../InputSupports';
+import TextInputBase from './TextInputBase';
+import textInputPropTypes from './propTypes';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _utils = require("../utils");
-
-var _InputSupports = _interopRequireDefault(require("../InputSupports"));
-
-var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
-
-var _propTypes2 = _interopRequireDefault(require("./propTypes"));
-
-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.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.
@@ -44,8 +25,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-
-const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     nativeID,
@@ -56,39 +36,43 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     supportsProps,
     ...selectedProps
   } = selectProps(rest);
-  const inputProps = { ...selectedProps,
+  const inputProps = {
+    ...selectedProps,
     tokens,
-    variant: { ...variant,
+    variant: {
+      ...variant,
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
-    nativeID: nativeID,
-    ...supportsProps,
-    children: _ref2 => {
-      let {
-        inputId,
-        ...propsFromInputSupports
-      } = _ref2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
-        ref: ref,
-        nativeID: inputId,
-        ...propsFromInputSupports,
-        ...inputProps
-      });
-    }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputSupports, {
+      nativeID: nativeID,
+      ...supportsProps,
+      children: _ref2 => {
+        let {
+          inputId,
+          ...propsFromInputSupports
+        } = _ref2;
+        return /*#__PURE__*/_jsx(TextInputBase, {
+          ref: ref,
+          nativeID: inputId,
+          ...propsFromInputSupports,
+          ...inputProps
+        });
+      }
+    }), rest.children]
   });
 });
 TextInput.displayName = 'TextInput';
-TextInput.propTypes = { ...selectedSystemPropTypes,
-  ..._propTypes2.default,
-
+TextInput.propTypes = {
+  ...selectedSystemPropTypes,
+  ...textInputPropTypes,
   /**
    * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
    */
-  onClear: _propTypes.default.func,
-  tokens: (0, _utils.getTokensPropType)('TextInput'),
-  variant: _utils.variantProp.propType
+  onClear: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  tokens: getTokensPropType('TextInput'),
+  variant: variantProp.propType
 };
-var _default = TextInput;
-exports.default = _default;
+export default TextInput;