@widergy/energy-ui 3.24.0 → 3.26.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.26.0](https://github.com/widergy/energy-ui/compare/v3.25.0...v3.26.0) (2024-10-08)
+
+
+### Features
+
+* button, label and input test-id ([#498](https://github.com/widergy/energy-ui/issues/498)) ([9ba23dc](https://github.com/widergy/energy-ui/commit/9ba23dc19ec632ee02dca97f1fa6c5a8f7bdd582))
+
+# [3.25.0](https://github.com/widergy/energy-ui/compare/v3.24.0...v3.25.0) (2024-10-07)
+
+
+### Features
+
+* add UTPhoneInput ([#503](https://github.com/widergy/energy-ui/issues/503)) ([c8e1cc8](https://github.com/widergy/energy-ui/commit/c8e1cc8618899fdd7cc5268698296df2a7130dae))
+
 # [3.24.0](https://github.com/widergy/energy-ui/compare/v3.23.0...v3.24.0) (2024-10-07)
 
 

package/dist/components/UTActionCard/components/BottomActions/index.js

@@ -24,6 +24,7 @@ const BottomActions = _ref => {
   }, actions.map(_ref2 => {
     let {
       colorTheme = 'primary',
+      dataTestId,
       disabled,
       Icon,
       label,
@@ -37,6 +38,7 @@ const BottomActions = _ref => {
         text: "".concat(type === _constants.ACTION_TYPES.REDIRECTION ? _stylesModule.default.redirectionText : _stylesModule.default.defaultText)
       },
       colorTheme: colorTheme,
+      dataTestId: dataTestId,
       disabled: disabled,
       Icon: type === _constants.ACTION_TYPES.REDIRECTION ? 'IconChevronRight' : Icon,
       iconPlacement: type === _constants.ACTION_TYPES.REDIRECTION ? 'right' : 'left',
@@ -51,6 +53,7 @@ const BottomActions = _ref => {
 BottomActions.propTypes = {
   actions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     colorTheme: _propTypes.string,
+    dataTestId: _propTypes.string,
     disabled: _propTypes.bool,
     Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
     label: _propTypes.string,

package/dist/components/UTAutocomplete/index.js

@@ -27,6 +27,7 @@ const UTAutocomplete = _ref => {
     ArrowIcon,
     autocompleteProps,
     classes = {},
+    dataTestId,
     disabled,
     field,
     fixedSizeListProps,
@@ -103,6 +104,9 @@ const UTAutocomplete = _ref => {
         colorTheme: "error",
         variant: "small"
       }, errorMessage) : undefined,
+      inputProps: {
+        'data-testid': dataTestId
+      },
       placeholder: placeholder,
       variant: variant
     }, textFieldProps))
@@ -112,6 +116,7 @@ UTAutocomplete.propTypes = {
   ArrowIcon: _propTypes.elementType,
   autocompleteProps: _propTypes.object,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   input: _formTypes.inputPropTypes.isRequired,
   field: _formTypes.fieldType,

package/dist/components/UTBaseInputField/components/ActionAdornment/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const ActionAdornment = _ref => {
+  let {
+    action = {},
+    disabled,
+    classNames
+  } = _ref;
+  if (!action) return null;
+  return /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    disabled: disabled,
+    classNames: classNames,
+    variant: "text",
+    size: "small"
+  }, action), action.text);
+};
+ActionAdornment.propTypes = {
+  action: _propTypes.object,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  disabled: _propTypes.bool
+};
+var _default = exports.default = ActionAdornment;

package/dist/components/UTBaseInputField/components/IconAdornment/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_SIZE = exports.ERROR_ICON = void 0;
+const ERROR_ICON = exports.ERROR_ICON = 'IconAlertCircle';
+const ICON_SIZE = exports.ICON_SIZE = 20;

package/dist/components/UTBaseInputField/components/IconAdornment/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+var _componentUtils = require("../../../../utils/componentUtils");
+var _constants = require("./constants");
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const IconAdornment = _ref => {
+  let {
+    changeOnError = false,
+    changeOnFocus = false,
+    colorTheme,
+    error,
+    focused,
+    Icon,
+    inputStyle,
+    shade
+  } = _ref;
+  const IconToRender = error && changeOnError ? _constants.ERROR_ICON : Icon;
+  if (!IconToRender) return null;
+  return (0, _componentUtils.isUTIcon)(IconToRender) ? /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    name: IconToRender,
+    size: _constants.ICON_SIZE
+  }, (0, _utils.getIconColorProps)(changeOnError, changeOnFocus, colorTheme, error, focused, shade))) : /*#__PURE__*/_react.default.createElement(Icon, {
+    size: _constants.ICON_SIZE,
+    fill: inputStyle.root.color
+  });
+};
+IconAdornment.propTypes = {
+  changeOnError: _propTypes.bool,
+  changeOnFocus: _propTypes.bool,
+  colorTheme: _propTypes.string,
+  error: (0, _propTypes.oneOfType)([_propTypes.bool, _propTypes.string]),
+  focused: _propTypes.bool,
+  Icon: _propTypes.elementType,
+  inputStyle: (0, _propTypes.shape)({
+    root: _propTypes.object
+  }),
+  shade: _propTypes.string
+};
+var _default = exports.default = IconAdornment;

package/dist/components/UTBaseInputField/components/IconAdornment/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIconColorProps = void 0;
+const getIconColorProps = (changeOnError, changeOnFocus, colorTheme, error, focused, shade) => changeOnError && error ? {
+  colorTheme: 'error',
+  shade: '04'
+} : changeOnFocus && focused ? {
+  colorTheme: 'accent',
+  shade: '04'
+} : {
+  colorTheme: colorTheme || 'gray',
+  shade
+};
+exports.getIconColorProps = getIconColorProps;

package/dist/components/UTBaseInputField/components/PrefixAdornment/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PrefixAdornment = _ref => {
+  let {
+    text
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small",
+    weight: "medium"
+  }, text);
+};
+PrefixAdornment.propTypes = {
+  text: _propTypes.string
+};
+var _default = exports.default = PrefixAdornment;

package/dist/components/UTBaseInputField/components/SuffixAdornment/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SuffixAdornment = _ref => {
+  let {
+    text
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray"
+  }, text);
+};
+SuffixAdornment.propTypes = {
+  text: _propTypes.string
+};
+var _default = exports.default = SuffixAdornment;

package/dist/components/UTBaseInputField/components/TooltipAdornment/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TooltipAdornment = _ref => {
+  let {
+    tooltip
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: tooltip
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.tooltip
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    name: "IconInfoCircle",
+    colorTheme: "gray"
+  })));
+};
+TooltipAdornment.propTypes = {
+  tooltip: _propTypes.string
+};
+var _default = exports.default = TooltipAdornment;

package/dist/components/UTBaseInputField/components/TooltipAdornment/styles.module.scss

@@ -0,0 +1,3 @@
+.tooltip {
+  display: flex;
+}

package/dist/components/UTBaseInputField/index.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _classesUtils = require("../../utils/classesUtils");
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+var _ActionAdornment = _interopRequireDefault(require("./components/ActionAdornment"));
+var _IconAdornment = _interopRequireDefault(require("./components/IconAdornment"));
+var _PrefixAdornment = _interopRequireDefault(require("./components/PrefixAdornment"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _SuffixAdornment = _interopRequireDefault(require("./components/SuffixAdornment"));
+var _TooltipAdornment = _interopRequireDefault(require("./components/TooltipAdornment"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const UTBaseInputField = _ref => {
+  let {
+    action,
+    alwaysShowPlaceholder,
+    classes: theme,
+    classNames = {},
+    dataTestId,
+    disabled,
+    error,
+    id,
+    LeftIcon,
+    maxLength,
+    maxRows = 1,
+    onBlur,
+    onChange = () => {},
+    onFocus,
+    placeholder,
+    prefix,
+    readOnly,
+    RightIcon,
+    showCharacterCount,
+    suffix,
+    tooltip,
+    type,
+    value = null
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const handleFocus = (0, _react.useCallback)(event => {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 || onFocus(event);
+  }, [onFocus]);
+  const handleBlur = (0, _react.useCallback)(event => {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 || onBlur(event);
+  }, [onBlur]);
+  const handleChange = (0, _react.useCallback)(event => {
+    const inputValue = event.target.value;
+    if (type === 'numeric') {
+      const numericValue = inputValue.replace(/\D/g, '');
+      onChange === null || onChange === void 0 || onChange(numericValue);
+    } else {
+      onChange === null || onChange === void 0 || onChange(inputValue);
+    }
+  }, [onChange, type]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (type === 'numeric') {
+      const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab'];
+      const isNumericKey = /^[0-9]$/;
+      if (!isNumericKey.test(event.key) && !allowedKeys.includes(event.key)) {
+        event.preventDefault();
+      }
+    }
+  }, [type]);
+  const shouldShowPlaceholder = alwaysShowPlaceholder || focused;
+  const multiline = maxRows > 1;
+  const hasCharactersCount = (0, _react.useMemo)(() => showCharacterCount && maxLength && !disabled && !readOnly, [showCharacterCount, maxLength, disabled, readOnly]);
+  const hasStartAdornments = (0, _react.useMemo)(() => LeftIcon || prefix, [LeftIcon, prefix]);
+  const hasEndAdornments = suffix || RightIcon || action || tooltip || error;
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    margin: "none",
+    autoComplete: "new-password" // in the new MUI's version, the autocomplete='off' doesn't work for Chrome, please use this instead
+    ,
+    disabled: disabled || readOnly,
+    error: error,
+    id: id,
+    maxRows: maxRows,
+    minRows: maxRows,
+    multiline: multiline,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    placeholder: shouldShowPlaceholder ? placeholder : '',
+    type: type === 'numeric' ? 'text' : type,
+    value: value,
+    variant: "outlined",
+    InputProps: {
+      inputProps: {
+        maxLength,
+        'data-testid': dataTestId
+      },
+      classes: {
+        notchedOutline: "".concat(classes.inputContainer, " ").concat(focused && classes.focusedInputContainer),
+        adornedStart: _stylesModule.default.elementsContainer,
+        adornedEnd: _stylesModule.default.elementsContainer,
+        input: classes.input,
+        root: classes.root
+      },
+      startAdornment: hasStartAdornments ? /*#__PURE__*/_react.default.createElement("div", {
+        className: _stylesModule.default.adornmentsContainer
+      }, LeftIcon && /*#__PURE__*/_react.default.createElement(_IconAdornment.default, {
+        Icon: LeftIcon
+      }), prefix && /*#__PURE__*/_react.default.createElement(_PrefixAdornment.default, {
+        text: prefix
+      })) : hasCharactersCount && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        className: classes.charactersCount,
+        colorTheme: "gray",
+        variant: "small"
+      }, (value === null || value === void 0 ? void 0 : value.length) || 0, "/", maxLength),
+      endAdornment: hasEndAdornments && /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_stylesModule.default.adornmentsContainer, " ").concat(multiline && _stylesModule.default.multilineAdornmentsContainer)
+      }, suffix && /*#__PURE__*/_react.default.createElement(_SuffixAdornment.default, {
+        text: suffix
+      }), (RightIcon || error) && /*#__PURE__*/_react.default.createElement(_IconAdornment.default, {
+        changeOnError: true,
+        error: error,
+        Icon: RightIcon
+      }), action && /*#__PURE__*/_react.default.createElement(_ActionAdornment.default, {
+        action: action,
+        classNames: {
+          root: _stylesModule.default.actionButton
+        },
+        disabled: disabled && !readOnly
+      }), tooltip && /*#__PURE__*/_react.default.createElement(_TooltipAdornment.default, {
+        tooltip: tooltip
+      }))
+    }
+  });
+};
+const propTypes = exports.propTypes = {
+  action: _propTypes.elementType,
+  alwaysShowPlaceholder: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  error: _propTypes.bool,
+  id: _propTypes.string,
+  LeftIcon: _propTypes.elementType,
+  maxLength: _propTypes.number,
+  maxRows: _propTypes.number,
+  onBlur: _propTypes.func,
+  onChange: _propTypes.func,
+  onFocus: _propTypes.func,
+  placeholder: _propTypes.string,
+  prefix: _propTypes.string,
+  readOnly: _propTypes.bool,
+  RightIcon: _propTypes.elementType,
+  showCharacterCount: _propTypes.bool,
+  suffix: _propTypes.string,
+  tooltip: _propTypes.string,
+  type: _propTypes.string,
+  value: _propTypes.string
+};
+UTBaseInputField.propTypes = propTypes;
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTBaseInputField);

package/dist/components/UTBaseInputField/styles.module.scss

@@ -0,0 +1,29 @@
+.actionButton {
+  margin: -4px !important;
+}
+
+.adornmentsContainer {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  grid-gap: 16px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.elementsContainer {
+  grid-gap: 16px;
+}
+
+.multilineAdornmentsContainer {
+  place-self: start;
+}
+
+.startAdornments {
+  display: flex;
+  flex-direction: column;
+}

package/dist/components/UTBaseInputField/theme.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _theme = require("../UTLabel/theme");
+const charactersCountRowHeight = 20;
+const PADDING = {
+  HORIZONTAL: 16,
+  VERTICAL: 12
+};
+const SMALL_PADDING = {
+  HORIZONTAL: 12,
+  VERTICAL: 8
+};
+const GRID_GAP = 16;
+const retrieveStyle = _ref => {
+  let {
+    theme,
+    inputSize,
+    error,
+    disabled: receivedDisabled,
+    readOnly,
+    showCharacterCount,
+    maxLength
+  } = _ref;
+  const disabled = receivedDisabled && !readOnly;
+  const verticalPadding = "".concat(inputSize === 'small' ? SMALL_PADDING.VERTICAL : PADDING.VERTICAL, "px");
+  const multilineVerticalPadding = "".concat((inputSize === 'small' ? SMALL_PADDING.VERTICAL : PADDING.VERTICAL) + GRID_GAP + charactersCountRowHeight, "px");
+  const horizontalPadding = "".concat(inputSize === 'small' ? SMALL_PADDING.HORIZONTAL : PADDING.HORIZONTAL, "px");
+  const hasCharactersCount = showCharacterCount && maxLength && !disabled && !readOnly;
+  return {
+    charactersCount: {
+      position: 'absolute',
+      bottom: verticalPadding
+    },
+    root: {
+      backgroundColor: theme.Palette.light['01'],
+      paddingBottom: hasCharactersCount ? multilineVerticalPadding : verticalPadding,
+      paddingLeft: horizontalPadding,
+      paddingRight: horizontalPadding,
+      paddingTop: verticalPadding,
+      ...(readOnly && {
+        backgroundColor: 'transparent',
+        paddingLeft: 0,
+        paddingRight: 0
+      }),
+      ...(disabled && {
+        backgroundColor: theme.Palette.light['03']
+      })
+    },
+    inputContainer: {
+      borderColor: "".concat(theme.Palette.light['05'], " !important"),
+      borderRadius: '4px',
+      borderWidth: '1px',
+      ...(error && {
+        borderColor: "".concat(theme.Palette.error['04'], " !important")
+      }),
+      ...(readOnly && {
+        borderColor: 'transparent !important'
+      }),
+      ...(disabled && {
+        borderColor: 'transparent !important'
+      })
+    },
+    focusedInputContainer: {
+      ...(!error && {
+        borderColor: "".concat(theme.Palette.accent['04'], " !important"),
+        borderWidth: '2px'
+      })
+    },
+    input: {
+      ...(0, _theme.getFontStyles)({
+        theme,
+        variant: 'body',
+        weight: 'regular'
+      }),
+      caretColor: theme.Palette.accent['04'],
+      color: theme.Palette.dark['05'],
+      minHeight: '22px',
+      overflow: 'auto',
+      padding: 0,
+      textOverflow: 'ellipsis',
+      '&::placeholder': {
+        color: theme.Palette.gray['02']
+      },
+      '&::selection': {
+        backgroundColor: theme.Palette.accent['02']
+      },
+      ...(disabled && {
+        color: theme.Palette.gray['04']
+      })
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTButtonGroup/index.js

@@ -25,12 +25,14 @@ const UTButtonGroup = _ref => {
     className: "".concat(_stylesModule.default["".concat(type, "Container")], " ").concat(backgroundColor)
   }, actions.map(_ref2 => {
     let {
+      dataTestId,
       Icon,
       id,
       onClick
     } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
       colorTheme: colorTheme,
+      dataTestId: dataTestId,
       Icon: Icon,
       key: id,
       onClick: onClick,

package/dist/components/UTCBUInput/index.js

@@ -15,10 +15,11 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const UTCBUInput = _ref => {
   let {
-    meta,
+    classes,
+    dataTestId,
     field,
     input,
-    classes
+    meta
   } = _ref;
   const {
     onChange,
@@ -45,6 +46,14 @@ const UTCBUInput = _ref => {
     });
   };
   return /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    captionLabel: entity,
+    dataTestId: dataTestId,
+    field: field,
+    FormHelperTextProps: {
+      classes: {
+        root: classes.helper
+      }
+    },
     input: {
       onChange: onChangeText,
       value: {
@@ -52,28 +61,15 @@ const UTCBUInput = _ref => {
         [cbuEntityKey]: entity
       }
     },
-    field: field,
-    placeholder: placeholder,
+    inputObjectKey: cbuNumberKey,
     label: title,
     meta: meta,
-    captionLabel: entity,
-    FormHelperTextProps: {
-      classes: {
-        root: classes.helper
-      }
-    },
-    inputObjectKey: cbuNumberKey
+    placeholder: placeholder
   });
 };
 UTCBUInput.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
-  input: (0, _propTypes.shape)({
-    onChange: _propTypes.func,
-    value: (0, _propTypes.shape)({
-      cbuNumber: _propTypes.string,
-      entityName: _propTypes.string
-    })
-  }),
+  dataTestId: _propTypes.string,
   field: (0, _propTypes.shape)({
     placeholder: _propTypes.string,
     title: _propTypes.string,
@@ -83,6 +79,13 @@ UTCBUInput.propTypes = {
     cbu_number_key: _propTypes.string,
     cbu_entity_key: _propTypes.string
   }),
+  input: (0, _propTypes.shape)({
+    onChange: _propTypes.func,
+    value: (0, _propTypes.shape)({
+      cbuNumber: _propTypes.string,
+      entityName: _propTypes.string
+    })
+  }),
   meta: _formTypes.metaPropTypes
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTCBUInput);