@widergy/energy-ui 3.81.1 → 3.82.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.82.1](https://github.com/widergy/energy-ui/compare/v3.82.0...v3.82.1) (2025-06-17)
+
+
+### Bug Fixes
+
+* [UGMC-1052] value on top ([#627](https://github.com/widergy/energy-ui/issues/627)) ([1c6fbe9](https://github.com/widergy/energy-ui/commit/1c6fbe947bffc6209c22327f262a40319dabe385))
+
+# [3.82.0](https://github.com/widergy/energy-ui/compare/v3.81.1...v3.82.0) (2025-06-17)
+
+
+### Features
+
+* [OUG-8696] added unmaskcsc prop to credit card ([#626](https://github.com/widergy/energy-ui/issues/626)) ([69976f9](https://github.com/widergy/energy-ui/commit/69976f9385f502fb0c66303968ac630b4fcc4310))
+
 ## [3.81.1](https://github.com/widergy/energy-ui/compare/v3.81.0...v3.81.1) (2025-06-09)
 
 

package/dist/components/UTBarChart/components/Bars/index.js

@@ -120,7 +120,7 @@ const Bars = _ref => {
       fill: data.onTopLabelColor,
       x: xInitialPosition + barWidth / 2,
       y: yInitialPosition - (spacingOptions.onTopLabelPadding || _constants.DEFAULT_TOP_LABEL_PADDING)
-    }, data.onTopLabel || value), borderSelector && /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("rect", {
+    }, data.onTopLabel || (value > 0 ? value : '')), borderSelector && /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("rect", {
       fill: "transparent",
       height: graphYStart + graphYEnd / 2 + ((borderSelector === null || borderSelector === void 0 ? void 0 : borderSelector.heightOffset) || 0),
       rx: borderSelector === null || borderSelector === void 0 ? void 0 : borderSelector.radius,

package/dist/components/UTBaseInputField/index.js

@@ -19,6 +19,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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 {
+    autocomplete,
     classes: theme,
     classNames = {},
     dataKeyboard,
@@ -32,6 +33,7 @@ const UTBaseInputField = _ref => {
     maxRows = 1,
     minRows,
     muiProps,
+    name,
     onBlur,
     onChange = () => {},
     onFocus,
@@ -88,7 +90,7 @@ const UTBaseInputField = _ref => {
     })) : null;
   }, [error, disabled, readOnly, focused]);
   return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
-    autocomplete: "new-password",
+    autocomplete: autocomplete || 'new-password',
     className: classes.container,
     disabled: disabled || readOnly,
     error: error,
@@ -112,9 +114,11 @@ const UTBaseInputField = _ref => {
   }, muiProps, {
     InputProps: {
       inputProps: {
+        autocomplete,
         'data-testid': dataTestId,
         'data-keyboard': dataKeyboard,
         maxLength,
+        name,
         readOnly,
         ...(muiProps === null || muiProps === void 0 ? void 0 : muiProps.inputProps)
       },
@@ -141,6 +145,7 @@ const UTBaseInputField = _ref => {
 };
 const propTypes = exports.propTypes = {
   alwaysShowPlaceholder: _propTypes.bool,
+  autocomplete: _propTypes.string,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   dataKeyboard: _propTypes.string,
@@ -162,6 +167,7 @@ const propTypes = exports.propTypes = {
     inputProps: _propTypes.object,
     InputProps: _propTypes.object
   }),
+  name: _propTypes.string,
   onBlur: _propTypes.func,
   onChange: _propTypes.func,
   onFocus: _propTypes.func,

package/dist/components/UTCreditCard/README.MD

@@ -6,11 +6,12 @@
 
 ## Props
 
-| Name        | Type        | Default | Description                                                                 |
-| ----------- | ----------- | ------- | --------------------------------------------------------------------------- |
-| `value`     | object      |         | The current value of the component, usually an object representing the state. |
-| `onChange`  | func        |         | A required function that is called when the value changes.                  |
-| `childKeys` | array       |         | An array of keys to access child elements or properties in the `value` object. |
-| `error`     | string      |         | Error message to display when there is a validation issue.                  |
-| `texts`     | object      |         | An object containing various text strings used within the component          |
-| `className` | string      |         | Custom class name to apply to the root element of the component.            |
+| Name        | Type        | Default | Description                                                                                            |
+| ----------- | ----------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `childKeys` | array       |         | An array of keys to access child elements or properties in the `value` object.                         |
+| `className` | string      |         | Custom class name to apply to the root element of the component.                                       |
+| `error`     | string      |         | Error message to display when there is a validation issue.                                             |
+| `onChange`  | func        |         | A required function that is called when the value changes.                                             |
+| `texts`     | object      |         | An object containing various text strings used within the component                                    |
+| `unmaskCsc` | bool        | false   | Displays the CSC field as a normal text input. If false, the CSC field is displayed as a password. `If "true", the telemetryScrubber must be configured in the project's rollbar configuration to prevent this field value from being tracked.` |
+| `value`     | object      |         | The current value of the component, usually an object representing the state.                          |

package/dist/components/UTCreditCard/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _UTPasswordField = _interopRequireDefault(require("../UTPasswordField"));
 var _UTTextInput = _interopRequireDefault(require("../UTTextInput"));
 var _testIds = require("../../constants/testIds");
+var _inputs = require("../../constants/inputs");
 require("react-credit-cards/es/styles-compiled.css");
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -33,6 +34,7 @@ const UTCreditCard = _ref => {
       nameTitle,
       numberTitle
     } = _constants.DEFAULT_TEXTS,
+    unmaskCsc,
     value = {}
   } = _ref;
   const [cardField, nameFiled, cvcField, expMonthField, expYearField, expires] = childKeys;
@@ -69,10 +71,11 @@ const UTCreditCard = _ref => {
     field,
     newVal
   });
+  const CSVComponent = unmaskCsc ? _UTTextInput.default : _UTPasswordField.default;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(className)
   }, /*#__PURE__*/_react.default.createElement(_reactCreditCards.default, {
-    cvc: cvcVisibility ? values[cvcField] : values[cvcField].replace(/./g, '*'),
+    cvc: cvcVisibility || unmaskCsc ? values[cvcField] : values[cvcField].replace(/./g, '*'),
     expiry: values.expiry,
     focused: focused,
     locale: {
@@ -86,8 +89,10 @@ const UTCreditCard = _ref => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.fields
   }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    autocomplete: "cc-number",
     dataTestId: creditCard.cardField,
     error: errors[cardField],
+    name: _inputs.CREDIT_CARD_NAMES.cardNumber,
     onChange: onChangeField(cardField),
     onFocus: () => setFocused(_constants.fields.NUMBER),
     required: true,
@@ -98,11 +103,13 @@ const UTCreditCard = _ref => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.row
   }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    autocomplete: "cc-exp",
     classNames: {
       container: _stylesModule.default.inRow
     },
     dataTestId: creditCard.expires,
     error: errors[expires],
+    name: _inputs.CREDIT_CARD_NAMES.cardExpDate,
     onChange: onChangeField(expires),
     onFocus: () => setFocused(_constants.fields.EXPIRY),
     required: true,
@@ -110,23 +117,27 @@ const UTCreditCard = _ref => {
     validationDataTestId: "".concat(creditCard.expires, ".validation"),
     value: values[expires],
     version: "V1"
-  }), /*#__PURE__*/_react.default.createElement(_UTPasswordField.default, {
+  }), /*#__PURE__*/_react.default.createElement(CSVComponent, {
+    autocomplete: unmaskCsc ? 'cc-csc' : 'off',
     classNames: {
       container: _stylesModule.default.inRow
     },
     dataTestId: creditCard.cvcField,
     error: errors[cvcField],
+    name: _inputs.CREDIT_CARD_NAMES.cardCvc,
     onChange: onChangeField(cvcField),
+    onFocus: () => setFocused(_constants.fields.CVC),
     onVisibilityToggle: setCvcVisibility,
-    title: cvcTitle,
     required: true,
-    onFocus: () => setFocused(_constants.fields.CVC),
+    title: cvcTitle,
     validationDataTestId: "".concat(creditCard.cvcField, ".validation"),
     value: values[cvcField],
     version: "V1"
   })), /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    autocomplete: "cc-name",
     dataTestId: creditCard.nameField,
     error: errors[nameFiled],
+    name: _inputs.CREDIT_CARD_NAMES.cardName,
     onChange: onChangeField(nameFiled),
     required: true,
     onFocus: () => setFocused(_constants.fields.NAME),
@@ -137,11 +148,12 @@ const UTCreditCard = _ref => {
   })));
 };
 UTCreditCard.propTypes = {
-  value: _propTypes.object,
-  onChange: _propTypes.func,
   childKeys: _propTypes.array,
+  className: _propTypes.string,
   error: _propTypes.object,
+  onChange: _propTypes.func,
   texts: _propTypes.object,
-  className: _propTypes.string
+  unmaskCsc: _propTypes.bool,
+  value: _propTypes.object
 };
 var _default = exports.default = UTCreditCard;

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

@@ -8,9 +8,10 @@
 
 
 | Name                  | Type                                                      | Default | Description                                                                                             |
-| :---------------------- | ----------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------- |
+| --------------------- | --------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
 | action                | object                                                    |         | Configuration for the action button that appears at the end of the input.                               |
 | alwaysShowPlaceholder | bool                                                      | false   | Whether the placeholder should always be displayed, even when the input is focused.                     |
+| autocomplete          | string                                                    |         | Indicates the type of values ​​that are expected as a value. Enables the browser to offer suggestions     |
 | blurOnSubmit          | bool                                                      | false   | Whether the input should lose focus after submitting (e.g., after pressing "Enter").                    |
 | classNames            | objectOf(string)                                          |         | Additional classes for customizing the component, independent of Material-UI.                           |
 | dataTestId            | string                                                    |         | Identifier for the input field, useful for testing purposes.                                            |
@@ -22,6 +23,7 @@
 | inputSize             | string                                                    | 'large' | Size of the input field. One of:`small`, `large`.                                                       |
 | maxLength             | number                                                    |         | Maximum number of characters allowed in the input field.                                                |
 | maxRows               | number                                                    | 1       | Maximum number of rows the text area can display. If greater than 1, the input becomes a text area.     |
+| name                  | string                                                    |         | Name of the field. Native attribute of the html input element.
 | onBlur                | func                                                      |         | Function called when the input field loses focus.                                                       |
 | onChange              | func                                                      |         | Function called when the input field value changes.                                                     |
 | onFocus               | func                                                      |         | Function called when the input field gains focus.                                                       |
@@ -47,7 +49,7 @@ The `action` object allows configuring the action button that appears inside the
 
 
 | Name     | Type        | Description                                        |
-| ---------- | ------------- | ---------------------------------------------------- |
+| -------- | ----------- | -------------------------------------------------- |
 | icon     | elementType | Icon to be displayed in the action button.         |
 | onClick  | func        | Function called when the action button is clicked. |
 | disabled | bool        | Disables the action button.                        |

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

@@ -23,6 +23,7 @@ const UTTextInput = _ref => {
     actions: titleActions,
     actionDataTestId,
     alwaysShowPlaceholder,
+    autocomplete,
     classNames = {},
     dataTestId,
     disabled,
@@ -37,6 +38,7 @@ const UTTextInput = _ref => {
     maxLength,
     maxRows = 1,
     minRows,
+    name,
     onBlur,
     onChange = () => {},
     onFocus,
@@ -117,6 +119,7 @@ const UTTextInput = _ref => {
     size: titleVariant
   }, title), /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     alwaysShowPlaceholder: alwaysShowPlaceholder,
+    autocomplete: autocomplete,
     classNames: classNames,
     dataTestId: dataTestId,
     disabled: disabled,
@@ -128,6 +131,7 @@ const UTTextInput = _ref => {
     maxLength: maxLength,
     maxRows: maxRows,
     minRows: minRows,
+    name: name,
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
@@ -154,6 +158,7 @@ const propTypes = exports.propTypes = {
   actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   actionDataTestId: _propTypes.string,
   alwaysShowPlaceholder: _propTypes.bool,
+  autocomplete: _propTypes.string,
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
@@ -170,6 +175,7 @@ const propTypes = exports.propTypes = {
   maxLength: _propTypes.number,
   minRows: _propTypes.number,
   maxRows: _propTypes.number,
+  name: _propTypes.string,
   onBlur: _propTypes.func,
   onChange: _propTypes.func,
   onFocus: _propTypes.func,

package/dist/constants/inputs.js

@@ -3,8 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TITLE_VARIANTS = void 0;
+exports.TITLE_VARIANTS = exports.CREDIT_CARD_NAMES_PREFIX = exports.CREDIT_CARD_NAMES = void 0;
 const TITLE_VARIANTS = exports.TITLE_VARIANTS = {
   large: 'body',
   small: 'small'
+};
+const CREDIT_CARD_NAMES_PREFIX = exports.CREDIT_CARD_NAMES_PREFIX = 'creditCard';
+const CREDIT_CARD_NAMES = exports.CREDIT_CARD_NAMES = {
+  cardCvc: "".concat(CREDIT_CARD_NAMES_PREFIX, "Cvc"),
+  cardExpDate: "".concat(CREDIT_CARD_NAMES_PREFIX, "ExpDate"),
+  cardName: "".concat(CREDIT_CARD_NAMES_PREFIX, "Name"),
+  cardNumber: "".concat(CREDIT_CARD_NAMES_PREFIX, "Number")
 };

package/package.json

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