@widergy/energy-ui 3.28.0 → 3.29.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.29.0](https://github.com/widergy/energy-ui/compare/v3.28.0...v3.29.0) (2024-10-15)
+
+
+### Features
+
+* add UTSearchField ([#507](https://github.com/widergy/energy-ui/issues/507)) ([2f53c30](https://github.com/widergy/energy-ui/commit/2f53c30719d54e36cfe2f4007cb8bce290027994))
+
 # [3.28.0](https://github.com/widergy/energy-ui/compare/v3.27.0...v3.28.0) (2024-10-10)
 
 

package/dist/components/UTBaseInputField/constants.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMPONENT_KEYS = exports.COMPONENTS_MAPPER = void 0;
+var _ActionAdornment = _interopRequireDefault(require("./components/ActionAdornment"));
+var _IconAdornment = _interopRequireDefault(require("./components/IconAdornment"));
+var _PrefixAdornment = _interopRequireDefault(require("./components/PrefixAdornment"));
+var _SuffixAdornment = _interopRequireDefault(require("./components/SuffixAdornment"));
+var _TooltipAdornment = _interopRequireDefault(require("./components/TooltipAdornment"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const COMPONENT_KEYS = exports.COMPONENT_KEYS = {
+  ACTION: 'Action',
+  ICON: 'Icon',
+  PREFIX: 'Prefix',
+  SUFFIX: 'Suffix',
+  TOOLTIP: 'Tooltip'
+};
+const COMPONENTS_MAPPER = exports.COMPONENTS_MAPPER = {
+  [COMPONENT_KEYS.ACTION]: _ActionAdornment.default,
+  [COMPONENT_KEYS.ICON]: _IconAdornment.default,
+  [COMPONENT_KEYS.PREFIX]: _PrefixAdornment.default,
+  [COMPONENT_KEYS.SUFFIX]: _SuffixAdornment.default,
+  [COMPONENT_KEYS.TOOLTIP]: _TooltipAdornment.default
+};

package/dist/components/UTBaseInputField/index.js

@@ -10,19 +10,16 @@ var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _classesUtils = require("../../utils/classesUtils");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _constants = require("./constants");
 var _theme = require("./theme");
-var _ActionAdornment = _interopRequireDefault(require("./components/ActionAdornment"));
-var _IconAdornment = _interopRequireDefault(require("./components/IconAdornment"));
-var _PrefixAdornment = _interopRequireDefault(require("./components/PrefixAdornment"));
+var _utils = require("./utils");
 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; }
+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 UTBaseInputField = _ref => {
   let {
-    action,
     alwaysShowPlaceholder,
     classes: theme,
     classNames = {},
@@ -30,19 +27,16 @@ const UTBaseInputField = _ref => {
     disabled,
     error,
     id,
-    LeftIcon,
+    leftAdornments = [],
     maxLength,
     maxRows = 1,
     onBlur,
     onChange = () => {},
     onFocus,
     placeholder,
-    prefix,
     readOnly,
-    RightIcon,
+    rightAdornments = [],
     showCharacterCount,
-    suffix,
-    tooltip,
     type,
     value = null
   } = _ref;
@@ -77,12 +71,25 @@ const UTBaseInputField = _ref => {
   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;
+  const validLeftAdornments = (0, _react.useMemo)(() => (0, _utils.validateAdornments)(leftAdornments) ? leftAdornments : [], [leftAdornments]);
+  const validRightAdornments = (0, _react.useMemo)(() => (0, _utils.validateAdornments)(rightAdornments) ? rightAdornments : [], [rightAdornments]);
+  const renderAdornment = (0, _react.useCallback)(adornment => {
+    const Component = _constants.COMPONENTS_MAPPER[adornment.name];
+    const adornmentProps = {
+      ...adornment.props,
+      error,
+      disabled: disabled && !readOnly,
+      classNames: adornment.name === _constants.COMPONENT_KEYS.ACTION ? {
+        root: _stylesModule.default.actionButton
+      } : undefined
+    };
+    return Component ? /*#__PURE__*/_react.default.createElement(Component, _extends({}, adornmentProps, {
+      key: adornment.name
+    })) : null;
+  }, [error, disabled, readOnly]);
   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
-    ,
+    autoComplete: "new-password",
     disabled: disabled || readOnly,
     error: error,
     id: id,
@@ -103,45 +110,34 @@ const UTBaseInputField = _ref => {
         'data-testid': dataTestId
       },
       classes: {
-        notchedOutline: "".concat(classes.inputContainer, " ").concat(focused && classes.focusedInputContainer),
-        adornedStart: _stylesModule.default.elementsContainer,
         adornedEnd: _stylesModule.default.elementsContainer,
+        adornedStart: _stylesModule.default.elementsContainer,
         input: classes.input,
-        root: classes.root
+        notchedOutline: "".concat(classes.inputContainer, " ").concat(focused && classes.focusedInputContainer),
+        root: "".concat(classes.root, " ").concat(focused && classes.focusedRoot)
       },
-      startAdornment: hasStartAdornments ? /*#__PURE__*/_react.default.createElement("div", {
+      startAdornment: validLeftAdornments.length > 0 ? /*#__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, {
+      }, validLeftAdornments.map(renderAdornment)) : 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", {
+      endAdornment: validRightAdornments.length > 0 && /*#__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
-      }))
+      }, validRightAdornments.map(renderAdornment))
     }
   });
 };
 const propTypes = exports.propTypes = {
-  action: _propTypes.elementType,
+  leftAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string.isRequired,
+    props: (0, _propTypes.objectOf)(_propTypes.string)
+  })),
+  rightAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string.isRequired,
+    props: (0, _propTypes.objectOf)(_propTypes.string)
+  })),
   alwaysShowPlaceholder: _propTypes.bool,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
@@ -149,21 +145,17 @@ const propTypes = exports.propTypes = {
   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
+  value: _propTypes.string,
+  variant: _propTypes.string
 };
 UTBaseInputField.propTypes = propTypes;
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTBaseInputField);

package/dist/components/UTBaseInputField/theme.js

@@ -17,13 +17,14 @@ const SMALL_PADDING = {
 const GRID_GAP = 16;
 const retrieveStyle = _ref => {
   let {
-    theme,
-    inputSize,
-    error,
     disabled: receivedDisabled,
+    error,
+    inputSize,
+    maxLength,
     readOnly,
     showCharacterCount,
-    maxLength
+    theme,
+    variant
   } = _ref;
   const disabled = receivedDisabled && !readOnly;
   const verticalPadding = "".concat(inputSize === 'small' ? SMALL_PADDING.VERTICAL : PADDING.VERTICAL, "px");
@@ -36,11 +37,15 @@ const retrieveStyle = _ref => {
       bottom: verticalPadding
     },
     root: {
+      minWidth: '320px',
       backgroundColor: theme.Palette.light['01'],
       paddingBottom: hasCharactersCount ? multilineVerticalPadding : verticalPadding,
       paddingLeft: horizontalPadding,
       paddingRight: horizontalPadding,
       paddingTop: verticalPadding,
+      ...(variant === 'gray' && {
+        backgroundColor: theme.Palette.light['04']
+      }),
       ...(readOnly && {
         backgroundColor: 'transparent',
         paddingLeft: 0,
@@ -54,6 +59,9 @@ const retrieveStyle = _ref => {
       borderColor: "".concat(theme.Palette.light['05'], " !important"),
       borderRadius: '4px',
       borderWidth: '1px',
+      ...(variant === 'gray' && {
+        borderColor: 'transparent !important'
+      }),
       ...(error && {
         borderColor: "".concat(theme.Palette.error['04'], " !important")
       }),
@@ -64,6 +72,9 @@ const retrieveStyle = _ref => {
         borderColor: 'transparent !important'
       })
     },
+    focusedRoot: {
+      backgroundColor: theme.Palette.light['01']
+    },
     focusedInputContainer: {
       ...(!error && {
         borderColor: "".concat(theme.Palette.accent['04'], " !important"),

package/dist/components/UTBaseInputField/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateAdornments = void 0;
+var _constants = require("./constants");
+const validateAdornments = adornments => adornments.every(adornment => _constants.COMPONENTS_MAPPER[adornment.name]);
+exports.validateAdornments = validateAdornments;

package/dist/components/UTPhoneInput/versions/V1/index.js

@@ -6,23 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
+var _constants = require("../../../UTBaseInputField/constants");
 var _utils = require("../../../UTValidation/utils");
 var _inputs = require("../../../../constants/inputs");
 var _UTBaseInputField = _interopRequireDefault(require("../../../UTBaseInputField"));
 var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTValidation = _interopRequireWildcard(require("../../../UTValidation"));
-var _constants = require("./constants");
+var _constants2 = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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 UTPhoneInput = _ref => {
   let {
+    areaCodeDataTestId,
     areaCodePlaceholder,
     countryCode,
-    areaCodeDataTestId,
-    phoneNumberDataTestId,
     disabled,
     error,
     helpText,
@@ -30,10 +30,10 @@ const UTPhoneInput = _ref => {
     onBlur,
     onChange,
     onFocus,
+    phoneNumberDataTestId,
     placeholder,
     readOnly,
     required,
-    RightIcon,
     title,
     titleVariant,
     translations = {
@@ -45,9 +45,9 @@ const UTPhoneInput = _ref => {
     withAreaCode = true
   } = _ref;
   const [areaCode, setAreaCode] = (0, _react.useState)('');
-  const [phoneNumber, setPhoneNumber] = (0, _react.useState)('');
   const [areaCodeError, setAreaCodeError] = (0, _react.useState)('');
   const [isValidCode, setIsValidCode] = (0, _react.useState)(false);
+  const [phoneNumber, setPhoneNumber] = (0, _react.useState)('');
   (0, _react.useEffect)(() => {
     if (value && withAreaCode) {
       const [code, phone] = value.split('-');
@@ -67,7 +67,7 @@ const UTPhoneInput = _ref => {
         setAreaCodeError(areaCodeWithoutZeroError);
         setIsValidCode(false);
       } else {
-        const code = _constants.AREA_CODES.find(element => element.code === areaCode);
+        const code = _constants2.AREA_CODES.find(element => element.code === areaCode);
         setIsValidCode(!!code);
         setAreaCodeError(!code ? invalidAreaCodeError : '');
       }
@@ -112,7 +112,12 @@ const UTPhoneInput = _ref => {
     onFocus: onFocus,
     placeholder: areaCodePlaceholder,
     readOnly: readOnly,
-    RightIcon: RightIcon,
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        changeOnError: true
+      }
+    }],
     value: areaCode
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.phoneContainer
@@ -127,8 +132,18 @@ const UTPhoneInput = _ref => {
     onChange: handleChangePhoneNumber,
     onFocus: onFocus,
     placeholder: placeholder,
-    prefix: countryCode,
-    RightIcon: RightIcon,
+    leftAdornments: countryCode && !withAreaCode ? [{
+      name: _constants.COMPONENT_KEYS.PREFIX,
+      props: {
+        text: countryCode
+      }
+    }] : [],
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        changeOnError: true
+      }
+    }],
     value: phoneNumber
   }))), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",
@@ -152,7 +167,6 @@ UTPhoneInput.propTypes = {
   placeholder: _propTypes.string,
   readOnly: _propTypes.bool,
   required: _propTypes.bool,
-  RightIcon: _propTypes.elementType,
   title: _propTypes.string,
   titleVariant: _propTypes.string,
   translations: (0, _propTypes.shape)({

package/dist/components/UTSearchField/README.md

@@ -0,0 +1,35 @@
+# UTSearchField
+
+## Description
+
+`UTSearchField` is a customizable search field component. It includes a search icon on the left and an optional clear button on the right when there is text in the input field.
+
+## Props
+
+| Name        | Type   | Default | Description                                                 |
+| ----------- | ------ | ------- | ----------------------------------------------------------- |
+| className   | string |         | CSS class to customize the root element of the input field. |
+| dataTestId  | string |         | Identifier used for testing purposes.                       |
+| disabled    | bool   |         | Disables the input field if set to true.                    |
+| id          | string |         | Unique identifier for the input field.                      |
+| onBlur      | func   |         | Function to call when the input field loses focus.          |
+| onChange    | func   |         | Function to call when the input field value changes.        |
+| onFocus     | func   |         | Function to call when the input field gains focus.          |
+| placeholder | string |         | Placeholder text for the input field.                       |
+| size        | string |         | Size of the input field. One of: `small`, `large`.          |
+| type        | string |         | Type of input (e.g., 'numeric', 'password', 'text' ).       |
+| value       | string | null    | The value of the input field.                               |
+| variant     | string | gray    | Variant of the input field. One of: `white`, `gray`.        |
+
+### Adornments
+
+`UTSearchField` utilizes adornments on both sides of the input field:
+
+- **Left Adornment**: A search icon is always displayed on the left side of the input field.
+- **Right Adornment**: A clear (reset) button is displayed on the right side only when there is a value in the input field.
+
+## Additional Information
+
+- The clear button appears when the input field contains text and clears the input when clicked.
+- The search icon can change its style based on the focus state of the input field.
+- The component is built on top of `UTBaseInputField`, inheriting its flexible adornment handling.

package/dist/components/UTSearchField/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../UTBaseInputField/constants");
+var _UTBaseInputField = _interopRequireDefault(require("../UTBaseInputField"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTSearchField = _ref => {
+  let {
+    classes,
+    className,
+    dataTestId,
+    disabled,
+    id,
+    onBlur,
+    onChange = () => {},
+    onFocus,
+    placeholder,
+    size,
+    type,
+    value = null,
+    variant = 'gray'
+  } = _ref;
+  const clearText = () => {
+    onChange('');
+  };
+  const action = {
+    Icon: 'IconX',
+    onClick: clearText,
+    size: 'small'
+  };
+  const leftAdornments = [{
+    name: _constants.COMPONENT_KEYS.ICON,
+    props: {
+      Icon: 'IconSearch',
+      changeOnFocus: true,
+      shade: '02'
+    }
+  }];
+  const rightAdornments = value ? [{
+    name: _constants.COMPONENT_KEYS.ACTION,
+    props: {
+      action
+    }
+  }] : [];
+  return /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
+    alwaysShowPlaceholder: true,
+    dataTestId: dataTestId,
+    disabled: disabled,
+    id: id,
+    inputSize: size,
+    leftAdornments: leftAdornments,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    rightAdornments: rightAdornments,
+    classNames: {
+      root: className,
+      input: classes.input
+    },
+    type: type,
+    value: value,
+    variant: variant
+  });
+};
+const propTypes = exports.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  className: _propTypes.string,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  id: _propTypes.string,
+  onBlur: _propTypes.func,
+  onChange: _propTypes.func,
+  onFocus: _propTypes.func,
+  placeholder: _propTypes.string,
+  size: _propTypes.string,
+  type: _propTypes.string,
+  value: _propTypes.string,
+  variant: _propTypes.string
+};
+UTSearchField.propTypes = propTypes;
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTSearchField);

package/dist/components/UTSearchField/theme.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    input: {
+      '&::placeholder': {
+        color: "".concat(theme.Palette.gray['04'], " !important")
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTTextInput/versions/V1/README.md

@@ -28,7 +28,6 @@
 | prefix                | string                                                    |         | Text displayed before the entered value in the input field.                                              |
 | readOnly              | bool                                                      | false   | Makes the input field read-only.                                                                         |
 | required              | bool                                                      | false   | Marks the input field as required.                                                                       |
-| returnKeyType         | string                                                    | 'done'  | Determines the return key type on the keyboard (e.g., `done`, `next`).                                   |
 | RightIcon             | elementType                                               |         | Icon displayed on the right side of the input field.                                                     |
 | showCharacterCount    | bool                                                      | false   | Whether the character count should be displayed (if `maxLength` is defined).                             |
 | style                 | shape({ container: object, input: object, root: object }) |         | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |

package/dist/components/UTTextInput/versions/V1/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.propTypes = exports.default = void 0;
 var _propTypes = require("prop-types");
 var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../UTBaseInputField/constants");
 var _utils = require("../../../UTValidation/utils");
 var _inputs = require("../../../../constants/inputs.js");
 var _UTBaseInputField = _interopRequireDefault(require("../../../UTBaseInputField"));
@@ -50,6 +51,51 @@ const UTTextInput = _ref => {
   } = _ref;
   const titleColorTheme = readOnly ? 'gray' : 'dark';
   const validationData = (0, _react.useMemo)(() => validations || error && (0, _utils.formatErrorToValidation)(error), [error, validations]);
+  const leftAdornments = (0, _react.useMemo)(() => {
+    const adornments = [];
+    if (LeftIcon) adornments.push({
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        Icon: LeftIcon
+      }
+    });
+    if (prefix) adornments.push({
+      name: _constants.COMPONENT_KEYS.PREFIX,
+      props: {
+        text: prefix
+      }
+    });
+    return adornments;
+  }, [LeftIcon, prefix]);
+  const rightAdornments = (0, _react.useMemo)(() => {
+    const adornments = [];
+    if (suffix) adornments.push({
+      name: _constants.COMPONENT_KEYS.SUFFIX,
+      props: {
+        text: suffix
+      }
+    });
+    if (RightIcon || error) adornments.push({
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        Icon: RightIcon,
+        changeOnError: true
+      }
+    });
+    if (action) adornments.push({
+      name: _constants.COMPONENT_KEYS.ACTION,
+      props: {
+        action
+      }
+    });
+    if (tooltip) adornments.push({
+      name: _constants.COMPONENT_KEYS.TOOLTIP,
+      props: {
+        tooltip
+      }
+    });
+    return adornments;
+  }, [suffix, RightIcon, error, action, tooltip]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(classNames.container)
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
@@ -57,7 +103,6 @@ const UTTextInput = _ref => {
     variant: _inputs.TITLE_VARIANTS[titleVariant],
     required: required
   }, title), /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
-    action: action,
     alwaysShowPlaceholder: alwaysShowPlaceholder,
     classNames: classNames,
     dataTestId: dataTestId,
@@ -65,19 +110,16 @@ const UTTextInput = _ref => {
     error: error,
     id: id,
     inputSize: inputSize,
-    LeftIcon: LeftIcon,
+    leftAdornments: leftAdornments,
     maxLength: maxLength,
     maxRows: maxRows,
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
     placeholder: placeholder,
-    prefix: prefix,
     readOnly: readOnly,
-    RightIcon: RightIcon,
+    rightAdornments: rightAdornments,
     showCharacterCount: showCharacterCount,
-    suffix: suffix,
-    tooltip: tooltip,
     type: type,
     value: value
   }), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {

package/dist/index.js

@@ -285,6 +285,12 @@ Object.defineProperty(exports, "UTRating", {
     return _UTRating.default;
   }
 });
+Object.defineProperty(exports, "UTSearchField", {
+  enumerable: true,
+  get: function () {
+    return _UTSearchField.default;
+  }
+});
 Object.defineProperty(exports, "UTSelect", {
   enumerable: true,
   get: function () {
@@ -465,6 +471,7 @@ var _UTProductItem = _interopRequireDefault(require("./components/UTProductItem"
 var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"));
 var _UTRadioGroup = _interopRequireDefault(require("./components/UTRadioGroup"));
 var _UTRating = _interopRequireDefault(require("./components/UTRating"));
+var _UTSearchField = _interopRequireDefault(require("./components/UTSearchField"));
 var _UTSelect = _interopRequireDefault(require("./components/UTSelect"));
 var _UTSelectableCard = _interopRequireDefault(require("./components/UTSelectableCard"));
 var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.28.0",
+  "version": "3.29.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",

package/dist/components/UTTextInput/versions/V1/components/ActionAdornment/index.js

@@ -1,31 +0,0 @@
-"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/UTTextInput/versions/V1/components/IconAdornment/constants.js

@@ -1,8 +0,0 @@
-"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/UTTextInput/versions/V1/components/IconAdornment/index.js

@@ -1,48 +0,0 @@
-"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/UTTextInput/versions/V1/components/IconAdornment/utils.js

@@ -1,17 +0,0 @@
-"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/UTTextInput/versions/V1/components/PrefixAdornment/index.js

@@ -1,24 +0,0 @@
-"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/UTTextInput/versions/V1/components/SuffixAdornment/index.js

@@ -1,22 +0,0 @@
-"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/UTTextInput/versions/V1/components/TooltipAdornment/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = require("prop-types");
-var _UTTooltip = _interopRequireDefault(require("../../../../../UTTooltip"));
-var _UTIcon = _interopRequireDefault(require("../../../../../UTIcon"));
-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", null, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
-    name: "IconInfoCircle",
-    colorTheme: "gray"
-  })));
-};
-TooltipAdornment.propTypes = {
-  tooltip: _propTypes.string
-};
-var _default = exports.default = TooltipAdornment;

package/dist/components/UTTextInput/versions/V1/theme.js

@@ -1,94 +0,0 @@
-"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: 'hidden',
-      padding: 0,
-      textOverflow: 'ellipsis',
-      '&::placeholder': {
-        color: theme.Palette.gray['02']
-      },
-      '&::selection': {
-        backgroundColor: theme.Palette.accent['02']
-      }
-    }
-  };
-};
-exports.retrieveStyle = retrieveStyle;