@widergy/energy-ui 3.69.7 → 3.70.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.70.0](https://github.com/widergy/energy-ui/compare/v3.69.7...v3.70.0) (2025-05-05)
+
+
+### Features
+
+* add helpText and change error to ut validations ([#607](https://github.com/widergy/energy-ui/issues/607)) ([bea2a56](https://github.com/widergy/energy-ui/commit/bea2a56b82f6fdca3ded911e2e39556fce296a98))
+
 ## [3.69.7](https://github.com/widergy/energy-ui/compare/v3.69.6...v3.69.7) (2025-04-30)
 
 

package/dist/components/UTDatePicker/index.js

@@ -12,17 +12,20 @@ var _dayjs2 = _interopRequireDefault(require("dayjs"));
 var _es = _interopRequireDefault(require("dayjs/locale/es"));
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _form = require("@widergy/web-utils/lib/form");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _buttonTypes = require("../../types/buttonTypes");
 var _formTypes = require("../../types/formTypes");
 var _classesUtils = require("../../utils/classesUtils");
+var _UTValidation = _interopRequireDefault(require("../UTValidation"));
+var _utils = require("../UTValidation/utils");
 var _Day = _interopRequireDefault(require("./components/Day"));
 var _theme = require("./theme");
 var _types = require("./types");
 var _constants = require("./constants");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); }
@@ -65,6 +68,7 @@ const UTDatePicker = _ref => {
     disableToolbar = true,
     disabled,
     field,
+    helpText,
     iconAnchor,
     input,
     inputProps,
@@ -83,18 +87,18 @@ const UTDatePicker = _ref => {
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
   const configMask = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.date_mask) || _constants.OUTPUT_LABEL_MASK;
-  const onlyPastMonth = ((_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
-  const avoidFutureDates = ((_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.customDateValidations) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.avoidFutureDates) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.active) || false;
+  const onlyPastMonth = (field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
+  const avoidFutureDates = (field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.customDateValidations) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.avoidFutureDates) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.active) || false;
   const {
     minDate,
     maxDate
-  } = (onlyPastMonth ? (0, _utils.getPastMonthDates)() : avoidFutureDates ? (0, _utils.getMaxDate)() : range) || {};
+  } = (onlyPastMonth ? (0, _utils2.getPastMonthDates)() : avoidFutureDates ? (0, _utils2.getMaxDate)() : range) || {};
   const [pickedDate, setPickedDate] = (0, _react.useState)(null);
   const [internalError, setInternalError] = (0, _react.useState)(null);
   const handleChange = date => {
     setPickedDate(date);
     const newValue = (0, _dayjs2.default)(date, _constants.OUTPUT_LABEL_MASK, true);
-    if ((0, _utils.isValidDate)({
+    if ((0, _utils2.isValidDate)({
       avoidFutureDates,
       newValue,
       onlyPastMonth,
@@ -102,7 +106,7 @@ const UTDatePicker = _ref => {
     })) input.onChange(newValue.format(configMask));else input.onChange('');
   };
   (0, _react.useEffect)(() => {
-    if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
+    if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils2.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
   }, [input.value]);
   const renderDay = (date, _, dayInCurrentMonth) => /*#__PURE__*/_react.default.createElement(_Day.default, {
     classes: classes,
@@ -131,11 +135,13 @@ const UTDatePicker = _ref => {
     value: pickedDate,
     label: inputVariant === 'standard' && (field === null || field === void 0 ? void 0 : field.title),
     error: (0, _form.shouldShowErrors)(meta),
-    helperText: errorMessage ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      className: classes.errorLabel,
-      colorTheme: "error",
-      variant: "small"
-    }, errorMessage) : undefined,
+    helperText: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      colorTheme: "gray",
+      variant: "small",
+      withMarkdown: true
+    }, helpText), !(0, _isEmpty.default)(errorMessage) && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+      validationData: (0, _utils.formatErrorToValidation)(errorMessage)
+    })),
     onError: handleError,
     onAccept: handleRemoveError,
     disableToolbar: disableToolbar,
@@ -180,6 +186,7 @@ UTDatePicker.propTypes = {
   disableToolbar: _propTypes.bool,
   disabled: _propTypes.bool,
   field: _formTypes.fieldType,
+  helpText: _propTypes.string,
   iconAnchor: _propTypes.bool,
   input: _formTypes.inputPropTypes.isRequired,
   inputFormat: _propTypes.string,

package/package.json

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