@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

package/components/input/epoch/datetime/index.js

@@ -12,6 +12,7 @@ var _material = require("@mui/material");
 var _DatePicker = require("@mui/x-date-pickers/DatePicker");
 var _TimePicker = require("@mui/x-date-pickers/TimePicker");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _BaseDateTime = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/BaseDateTime"));
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
@@ -23,7 +24,7 @@ var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_CLS = "app-datetime input-group";
-var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
+var WmDateTime = exports.WmDateTime = /*#__PURE__*/(0, _react.memo)(function (props) {
   var name = props.name,
     _props$placeholder = props.placeholder,
     placeholder = _props$placeholder === void 0 ? "Select Date Time" : _props$placeholder,
@@ -32,10 +33,7 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
     tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
     shortcutkey = props.shortcutkey,
     datavalue = props.datavalue,
-    _props$datepattern = props.datepattern,
-    datepattern = _props$datepattern === void 0 ? (0, _store.useAppSelector)(function (state) {
-      return "".concat(state.i18n.dateFormat, " ").concat(state.i18n.timeFormat) || "MMM d, y h:mm:ss a";
-    }) : _props$datepattern,
+    datepatternProp = props.datepattern,
     _props$hourstep = props.hourstep,
     hourstep = _props$hourstep === void 0 ? 1 : _props$hourstep,
     _props$minutestep = props.minutestep,
@@ -84,7 +82,18 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
     onBeforeload = props.onBeforeload,
     listener = props.listener,
     floatinglabel = props.floatinglabel,
-    styles = props.styles;
+    styles = props.styles,
+    _props$showampmbutton = props.showampmbuttons,
+    showampmbuttons = _props$showampmbutton === void 0 ? false : _props$showampmbutton,
+    _props$validators = props.validators,
+    validators = _props$validators === void 0 ? [] : _props$validators,
+    validationmessage = props.validationmessage;
+  var defaultDateTimeFormat = (0, _store.useAppSelector)(function (state) {
+    return "".concat(state.i18n.dateFormat, " ").concat(state.i18n.timeFormat);
+  }) || "MMM d, y h:mm:ss a";
+  var datepattern = (0, _react.useMemo)(function () {
+    return datepatternProp !== null && datepatternProp !== void 0 ? datepatternProp : defaultDateTimeFormat;
+  }, [datepatternProp, defaultDateTimeFormat]);
 
   // State management
   var _useState = (0, _react.useState)(false),
@@ -117,7 +126,9 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
   var _useState0 = (0, _react.useState)(true),
     isCurrentMonth = _useState0[0],
     setIsCurrentMonth = _useState0[1];
-
+  var _useState1 = (0, _react.useState)(""),
+    validationFailureMessage = _useState1[0],
+    setValidationFailureMessage = _useState1[1];
   // Refs
   var inputRef = (0, _react.useRef)(null);
   var onBeforeloadExecutedRef = (0, _react.useRef)(false);
@@ -154,14 +165,21 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
   // Validate date
   var validateDateWithProps = (0, _react.useCallback)(function (date) {
     if (!date) return true;
-    var validation = (0, _utils.validateDate)(date, minDateObj, maxDateObj, excludedDaysArray, excludedDatesArray);
+    var validation = (0, _utils.validateDate)(date, minDateObj, maxDateObj, excludedDaysArray, excludedDatesArray, validators, validationmessage);
     setDateNotInRange(validation.isOutOfRange);
+    setValidationFailureMessage(validation.validationMessage);
+    setInvalidFormat(false);
+    setDateNotInRange(false);
     return validation.isValid;
   }, [minDateObj, maxDateObj, excludedDaysArray, excludedDatesArray]);
 
   // Handle final date change
   var handleFinalDateChange = (0, _react.useCallback)(function (date, event) {
     if (!date) {
+      if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield) {
+        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], "", displayValue, false);
+      }
+      setValidationFailureMessage("");
       setLocalDateValue(null);
       setDisplayValue("");
       setInvalidFormat(false);
@@ -181,6 +199,9 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
       return;
     }
     if (!validateDateWithProps(date)) {
+      if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield) {
+        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], dateString, displayValue, false);
+      }
       return;
     }
     var oldValue = displayValue;
@@ -309,6 +330,9 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
         }
       } else {
         if (required) {
+          if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield) {
+            onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], value, displayValue, false);
+          }
           setInvalidFormat(true);
         }
       }
@@ -420,12 +444,29 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
       setIsCurrentDate(true);
       (0, _utils.updateListener)(name, listener, display_time, formatDateWithPattern(currentTime, outputformat), props, undefined, "", formatDateWithPattern(currentTime, "timestamp"));
     } else {
+      if (invalidFormat) return;
       setIsCurrentDate(false);
       var parsedDate = (0, _utils.parseDateValue)(datavalue, datepattern);
-      setLocalDateValue(parsedDate);
-      var formattedValue = parsedDate ? formatDateWithPattern(parsedDate) : "";
-      setDisplayValue(formattedValue);
-      (0, _utils.updateListener)(name, listener, formattedValue, formatDateWithPattern(parsedDate, outputformat), props, undefined, "", formatDateWithPattern(parsedDate, "timestamp"));
+      if (!parsedDate && datavalue) {
+        if (typeof datavalue === "string" || typeof datavalue === "number") {
+          setDisplayValue(String(datavalue));
+        }
+        setLocalDateValue(null);
+      } else {
+        if (datavalue == undefined) {
+          setLocalDateValue(null);
+          setDisplayValue("");
+          return;
+        }
+        setLocalDateValue(parsedDate);
+        var formattedValue = formatDateWithPattern(parsedDate);
+        setDisplayValue(formattedValue);
+        var validationResult = (0, _utils.validateDate)(parsedDate, minDateObj, maxDateObj, excludedDaysArray, excludedDatesArray, validators, validationmessage);
+        if (validationResult && !validationResult.isValid) {
+          setValidationFailureMessage(validationResult.validationMessage || "");
+        }
+        (0, _utils.updateListener)(name, listener, formattedValue, formatDateWithPattern(parsedDate, outputformat), props, undefined, "", formatDateWithPattern(parsedDate, "timestamp"));
+      }
     }
   }, [datavalue, datepattern, formatDateWithPattern]);
   (0, _react.useEffect)(function () {
@@ -453,11 +494,15 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
     }
   }, [autofocus]);
   var timeViews = (0, _utils.getTimeViews)(datepattern);
+  var isDisabled = (0, _react.useMemo)(function () {
+    return readonly || disabled || isCurrentDate;
+  }, [readonly, disabled, isCurrentDate]);
   return __jsx(_material.Box, {
     style: styles,
     ref: anchorRef,
     className: (0, _clsx["default"])(DEFAULT_CLS, className === null || className === void 0 ? void 0 : className.replace("form-control", "")),
-    title: hint
+    title: hint,
+    hidden: props.hidden
   }, __jsx(_material.TextField, {
     disabled: disabled || readonly,
     "aria-readonly": readonly,
@@ -495,8 +540,8 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
     },
     autoFocus: autofocus,
     required: required,
-    error: invalidFormat || dateNotInRange,
-    helperText: invalidFormat ? "Invalid date format" : dateNotInRange ? "Date not in valid range" : "",
+    error: validationFailureMessage || invalidFormat || dateNotInRange,
+    helperText: validationFailureMessage || (invalidFormat ? validationmessage || "Invalid date format" : dateNotInRange ? validationmessage || "Date not in valid range" : ""),
     InputProps: {
       readOnly: isReadOnly,
       placeholder: floatinglabel ? undefined : placeholder
@@ -544,7 +589,7 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
     "aria-expanded": isDateOpen,
     onClick: toggleDatePicker,
     variant: "outlined",
-    disabled: readonly || disabled
+    disabled: isDisabled
   }, __jsx(_material.Box, {
     component: "i",
     className: "app-icon wm-sl-l sl-calendar",
@@ -559,7 +604,7 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
     "aria-expanded": isTimeOpen,
     onClick: toggleTimePicker,
     variant: "outlined",
-    disabled: readonly || disabled
+    disabled: isDisabled
   }, __jsx(_material.Box, {
     component: "i",
     className: "app-icon wm-sl-l sl-time",
@@ -629,9 +674,7 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
     onChange: function onChange(newValue) {
       newValue && handleTimeSelection(newValue.toDate());
     },
-    ampm: datepattern.includes("a") || datepattern.includes("A"),
-    minTime: minDateObj ? (0, _momentTimezone["default"])(minDateObj) : undefined,
-    maxTime: maxDateObj ? (0, _momentTimezone["default"])(maxDateObj) : undefined,
+    ampm: showampmbuttons && (datepattern.includes("a") || datepattern.includes("A")),
     slotProps: {
       textField: {
         style: {
@@ -644,7 +687,7 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
         sx: (0, _styled.timePickerSx)()
       },
       actionBar: {
-        actions: ["accept", "cancel"]
+        actions: ["accept"]
       }
     },
     minutesStep: minutestep,
@@ -655,6 +698,13 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
     },
     views: timeViews
   }));
-};
+}, function (prev, next) {
+  var keys = ["datavalue", "datepattern", "placeholder", "hint", "tabindex", "shortcutkey", "hourstep", "minutestep", "outputformat", "required", "mindate", "maxdate", "excludedays", "excludedates", "showweeks", "autofocus", "readonly", "disabled", "selectfromothermonth", "todaybutton", "clearbutton", "adaptiveposition", "showdropdownon", "dataentrymode", "width", "arialabel", "className", "isValidDate", "formatValidation", "floatinglabel", "styles", "showampmbuttons", "hidden", "validators", "validationmessage"];
+  var p = prev;
+  var n = next;
+  return keys.every(function (key) {
+    return (0, _isEqual["default"])(p[key], n[key]);
+  });
+});
 WmDateTime.displayName = "WmDateTime";
 var _default = exports["default"] = (0, _BaseDateTime["default"])((0, _withFormController["default"])(WmDateTime));

package/components/input/epoch/datetime/utils.js

@@ -18,7 +18,9 @@ exports.shouldDisableDate = shouldDisableDate;
 exports.updateListener = updateListener;
 exports.validateDate = validateDate;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _util = require("../../../../core/util");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Utility to ensure a date has a time component (otherwise use current time)
@@ -34,12 +36,22 @@ function ensureTime(date) {
 
 // Utility to map custom date patterns to moment.js patterns
 function mapToMomentPattern(pattern) {
-  return pattern.replace(/\byyyy\b/g, "YYYY").replace(/\bEEEE\b/g, "dddd").replace(/\bEEE\b/g, "ddd").replace(/\bMMMM\b/g, "MMMM").replace(/\bMMM\b/g, "MMM").replace(/\byy\b/g, "YY").replace(/\bdd\b/g, "DD").replace(/\bd\b/g, "D").replace(/\bMM\b/g, "MM").replace(/\bM\b/g, "M").replace(/\bHH\b/g, "HH").replace(/\bH\b/g, "H").replace(/\bhh\b/g, "hh").replace(/\bh\b/g, "h").replace(/\bmm\b/g, "mm").replace(/\bm\b/g, "m").replace(/\bss\b/g, "ss").replace(/\ba\b/g, "A").replace(/\bZ\b/g, "ZZ");
+  return pattern
+  // Convert lowercase 'y' sequences (1-4 characters) to uppercase 'Y'
+  // This handles cases like "yyyy" or "yy" even when followed by word characters (e.g., "yyyyT")
+  .replace(/y{1,4}/g, function (match) {
+    return match.toUpperCase();
+  })
+  // Convert lowercase 'd' sequences (1-2 characters) to uppercase 'D'
+  // This handles cases like "dd" even when followed by word characters (e.g., "ddT")
+  .replace(/d{1,2}/g, function (match) {
+    return match.toUpperCase();
+  }).replace(/\bEEEE\b/g, "dddd").replace(/\bEEE\b/g, "ddd").replace(/\bMMMM\b/g, "MMMM").replace(/\bMMM\b/g, "MMM").replace(/\byyyy\b/g, "YYYY").replace(/\byy\b/g, "YY").replace(/\bdd\b/g, "DD").replace(/\bd\b/g, "D").replace(/\bMM\b/g, "MM").replace(/\bM\b/g, "M").replace(/\bHH\b/g, "HH").replace(/\bH\b/g, "H").replace(/\bhh\b/g, "hh").replace(/\bh\b/g, "h").replace(/\bmm\b/g, "mm").replace(/\bm\b/g, "m").replace(/\bss\b/g, "ss").replace(/\ba\b/g, "A").replace(/\bZ\b/g, "ZZ");
 }
 
 // Get timezone utility
 function getTimezone() {
-  return _momentTimezone["default"].tz.guess();
+  return (0, _util.getTimezone)();
 }
 
 // Width style helper
@@ -104,7 +116,7 @@ function formatDate(date, pattern, timezone) {
     return date.toISOString();
   }
   try {
-    var momentPattern = mapToMomentPattern(pattern);
+    var momentPattern = mapToMomentPattern(pattern).replaceAll("y", "Y").replaceAll("d", "D").replaceAll("a", "A");
     var tz = timezone || getTimezone();
     return (0, _momentTimezone["default"])(date).tz(tz).format(momentPattern);
   } catch (error) {
@@ -155,34 +167,57 @@ function parseDateValue(datavalue, datepattern) {
   }
   return null;
 }
+function getValidatorErrorMessage(validators, validatorType) {
+  if (!validators || validators.length === 0) return undefined;
+  var validator = validators.find(function (v) {
+    return (0, _typeof2["default"])(v) === "object" && v !== null && "type" in v && v.type === validatorType;
+  });
+  if (validator && (0, _typeof2["default"])(validator) === "object" && "errorMessage" in validator) {
+    var errorMessage = validator.errorMessage;
+    if (typeof errorMessage === "string") {
+      return errorMessage;
+    }
+  }
+  return undefined;
+}
 
 // Validate date utility
 function validateDate(date, minDateObj, maxDateObj, excludedDaysArray, excludedDatesArray) {
+  var validators = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];
+  var validationmessage = arguments.length > 6 ? arguments[6] : undefined;
   if (!date) return {
     isValid: true,
     isOutOfRange: false
   };
-
   // Check min/max date
   if (minDateObj && (0, _momentTimezone["default"])(date).startOf("day").valueOf() < (0, _momentTimezone["default"])(minDateObj).startOf("day").valueOf()) {
+    var validatorMessage = getValidatorErrorMessage(validators, "mindate");
+    var errorMessage = validatorMessage || validationmessage || "Date is before minimum date";
     return {
       isValid: false,
-      isOutOfRange: true
+      isOutOfRange: true,
+      validationMessage: errorMessage
     };
   }
   if (maxDateObj && (0, _momentTimezone["default"])(date).startOf("day").valueOf() > (0, _momentTimezone["default"])(maxDateObj).startOf("day").valueOf()) {
+    var _validatorMessage = getValidatorErrorMessage(validators, "maxdate");
+    var _errorMessage = _validatorMessage || validationmessage || "Date is after maximum date";
     return {
       isValid: false,
-      isOutOfRange: true
+      isOutOfRange: true,
+      validationMessage: _errorMessage
     };
   }
 
   // Check excluded days
   var day = date.getDay();
   if (excludedDaysArray.includes(day)) {
+    var _validatorMessage2 = getValidatorErrorMessage(validators, "excludedays");
+    var _errorMessage2 = _validatorMessage2 || validationmessage || "Date is excluded";
     return {
       isValid: false,
-      isOutOfRange: true
+      isOutOfRange: true,
+      validationMessage: _errorMessage2
     };
   }
 
@@ -191,9 +226,12 @@ function validateDate(date, minDateObj, maxDateObj, excludedDaysArray, excludedD
   if (excludedDatesArray.some(function (excludedDate) {
     return (0, _momentTimezone["default"])(excludedDate).startOf("day").valueOf() === formattedDate;
   })) {
+    var _validatorMessage3 = getValidatorErrorMessage(validators, "excludedates");
+    var _errorMessage3 = _validatorMessage3 || validationmessage || "Date is excluded";
     return {
       isValid: false,
-      isOutOfRange: true
+      isOutOfRange: true,
+      validationMessage: _errorMessage3
     };
   }
   return {
@@ -228,15 +266,16 @@ function getTimeViews(datepattern) {
 function updateListener(name, listener, dateString, outputValue, props, onChange, oldValue, timestampValue) {
   var _listener$Widgets, _listener$Widgets2;
   // Update listener widget display value
-  if (name && listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[name]) {
+  if (name && listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[name] && !props.fieldName) {
     listener.Widgets[name].displayValue = dateString;
+    listener.Widgets[name].datavalue = outputValue;
   }
   if (onChange && name && listener !== null && listener !== void 0 && (_listener$Widgets2 = listener.Widgets) !== null && _listener$Widgets2 !== void 0 && _listener$Widgets2[name]) {
     onChange({}, listener.Widgets[name], outputValue, listener.Widgets[name].datavalue);
   }
   // Update listener onChange
   if (listener !== null && listener !== void 0 && listener.onChange) {
-    listener.onChange(name || "", _objectSpread(_objectSpread({}, props), {}, {
+    listener.onChange(props.fieldName || name, _objectSpread(_objectSpread({}, props), {}, {
       datavalue: outputValue,
       timestamp: timestampValue
     }));

package/components/input/epoch/time/index.js

@@ -62,7 +62,12 @@ var WmTime = function WmTime(props) {
     _onBlur = props.onBlur,
     _onMouseEnter = props.onMouseEnter,
     _onMouseLeave = props.onMouseLeave,
-    onBeforeload = props.onBeforeload;
+    onBeforeload = props.onBeforeload,
+    _props$showampmbutton = props.showampmbuttons,
+    showampmbuttons = _props$showampmbutton === void 0 ? false : _props$showampmbutton,
+    _props$validators = props.validators,
+    validators = _props$validators === void 0 ? [] : _props$validators,
+    validationmessage = props.validationmessage;
 
   // State
   var _useState = (0, _react.useState)(null),
@@ -105,37 +110,62 @@ var WmTime = function WmTime(props) {
   var handleTimeChange = (0, _react.useCallback)(function (newTime, event) {
     var shouldClosePicker = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (!newTime) {
+      var oldValue = displayValue;
       setInternalValue(null);
       setDisplayValue("");
       setValidationResult({
         isValid: true
       });
+      invokeOnChange === null || invokeOnChange === void 0 || invokeOnChange("", {
+        $event: event,
+        type: "change"
+      });
+      if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
+        listener.Widgets[name].displayValue = "";
+      }
+      (0, _utils.updateListener)(name, listener, props, "", null, "");
+      if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
+        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], "", oldValue);
+      }
       if (shouldClosePicker) setShowPicker === null || setShowPicker === void 0 || setShowPicker(false);
       return;
     }
-    var validation = (0, _utils.validateTimeRange)(newTime, minTimeObj, maxTimeObj);
+    var validation = (0, _utils.validateTimeRange)(newTime, mintime, maxtime, validators, validationmessage);
     setValidationResult(validation);
     if (validation.isValid) {
       setInternalValue((0, _momentTimezone["default"])(newTime));
       var formattedValue = (0, _utils.formatDisplayTimeValue)(newTime, timepattern);
+      var outputFormattedValue = (0, _utils.formatDisplayTimeValue)(newTime, outputformat);
       setDisplayValue(formattedValue);
-      invokeOnChange === null || invokeOnChange === void 0 || invokeOnChange(newTime, {
+      invokeOnChange === null || invokeOnChange === void 0 || invokeOnChange(outputFormattedValue, {
         $event: event,
         type: "change"
       });
       if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
         listener.Widgets[name].displayValue = formattedValue;
       }
-      (0, _utils.updateListener)(name, listener, props, formattedValue, (0, _utils.formatDisplayTimeValue)(newTime, "timestamp"), (0, _utils.formatDisplayTimeValue)(newTime, outputformat));
+      (0, _utils.updateListener)(name, listener, props, formattedValue, (0, _utils.formatDisplayTimeValue)(newTime, "timestamp"), outputFormattedValue);
       if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
-        onChange({}, name && (listener === null || listener === void 0 ? void 0 : listener.Widgets[name]), formattedValue, displayValue);
+        onChange(event, name && (listener === null || listener === void 0 ? void 0 : listener.Widgets[name]), outputFormattedValue, displayValue);
+      }
+    } else {
+      var _formattedValue = (0, _utils.formatDisplayTimeValue)(newTime, timepattern);
+      if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield) {
+        onChange(event, name && (listener === null || listener === void 0 ? void 0 : listener.Widgets[name]), _formattedValue, displayValue, false);
       }
     }
     if (shouldClosePicker) setShowPicker === null || setShowPicker === void 0 || setShowPicker(false);
-  }, [minTimeObj, maxTimeObj, timepattern, invokeOnChange, setShowPicker]);
+  }, [mintime, maxtime, validators, timepattern, outputformat, invokeOnChange, setShowPicker, name, listener, props, onChange, displayValue]);
   var handlePickerAccept = (0, _react.useCallback)(function (value) {
     if (value && value.isValid()) {
-      handleTimeChange(value.toDate(), undefined, true);
+      var changeEvent = (0, _utils.createWidgetEvent)({
+        type: "change",
+        name: name,
+        value: value,
+        anchor: anchorRef.current,
+        originalEvent: event
+      });
+      handleTimeChange(value.toDate(), changeEvent, true);
     }
   }, [handleTimeChange]);
   var handlePickerClose = (0, _react.useCallback)(function () {
@@ -148,19 +178,25 @@ var WmTime = function WmTime(props) {
         handleTimeChange(null, event, false);
         return;
       }
-      var formatValidation = (0, _utils.validateTimeFormat)(inputValue, timepattern, required);
+      var formatValidation = (0, _utils.validateTimeFormat)(inputValue, timepattern, required, validationmessage);
       if (!formatValidation.isValid) {
         setValidationResult(formatValidation);
+        if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield) {
+          onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], inputValue, displayValue, false);
+        }
         setDisplayValue(inputValue);
         return;
       }
       var parsedTime = (0, _utils.parseTimeValue)(inputValue, timepattern);
       if (parsedTime && parsedTime.isValid()) {
-        var rangeValidation = (0, _utils.validateTimeRange)(parsedTime.toDate(), minTimeObj, maxTimeObj);
+        var rangeValidation = (0, _utils.validateTimeRange)(parsedTime.toDate(), mintime, maxtime, validators, validationmessage);
         setValidationResult(rangeValidation);
         if (rangeValidation.isValid) {
           handleTimeChange(parsedTime.toDate(), event, false);
         } else {
+          if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield) {
+            onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], inputValue, displayValue, false);
+          }
           setDisplayValue(inputValue);
         }
       } else {
@@ -168,7 +204,7 @@ var WmTime = function WmTime(props) {
           setValidationResult({
             isValid: false,
             errorType: "format",
-            message: "Invalid time format. Expected: ".concat(timepattern)
+            message: validationmessage || "Invalid time format. Expected: ".concat(timepattern)
           });
         }
         setDisplayValue(inputValue);
@@ -178,10 +214,10 @@ var WmTime = function WmTime(props) {
       setValidationResult({
         isValid: false,
         errorType: "format",
-        message: "Error processing input"
+        message: validationmessage || "Error processing input"
       });
     }
-  }, [handleTimeChange, timepattern, minTimeObj, maxTimeObj]);
+  }, [handleTimeChange, timepattern, mintime, maxtime, validators, required, validationmessage]);
   var handleClick = (0, _react.useCallback)(function (event) {
     try {
       if (disabled || readonly || isCurrentTime) return;
@@ -253,16 +289,20 @@ var WmTime = function WmTime(props) {
       if (datavalue) {
         var parsed;
         if (typeof datavalue === "string" && /^\d+$/.test(datavalue)) {
-          parsed = (0, _momentTimezone["default"])(parseInt(datavalue, 10));
+          parsed = (0, _momentTimezone["default"])(parseInt(datavalue, 10), timepattern, true);
         } else if (typeof datavalue === "number") {
           parsed = (0, _momentTimezone["default"])(datavalue);
         } else if (datavalue instanceof Date) {
           parsed = (0, _momentTimezone["default"])(datavalue);
         } else {
-          parsed = (0, _momentTimezone["default"])(datavalue, timepattern);
+          parsed = (0, _momentTimezone["default"])(datavalue, timepattern, true);
         }
         setInternalValue(parsed);
-        setDisplayValue((0, _utils.formatDisplayTimeValue)(parsed, timepattern));
+        if (parsed.isValid()) {
+          setDisplayValue((0, _utils.formatDisplayTimeValue)(parsed, timepattern));
+        } else {
+          setDisplayValue(datavalue);
+        }
         (0, _utils.updateListener)(name, listener, props, (0, _utils.formatDisplayTimeValue)(parsed, timepattern), (0, _utils.formatDisplayTimeValue)(parsed, "timestamp"), (0, _utils.formatDisplayTimeValue)(parsed, outputformat));
       } else {
         setInternalValue(null);
@@ -296,11 +336,16 @@ var WmTime = function WmTime(props) {
     var _props$listener;
     if (onBeforeload && name && (_props$listener = props.listener) !== null && _props$listener !== void 0 && (_props$listener = _props$listener.Widgets) !== null && _props$listener !== void 0 && _props$listener[name] && !onBeforeloadExecutedRef.current) {
       var _props$listener2;
-      var syntheticEvent = {};
-      onBeforeload(syntheticEvent, (_props$listener2 = props.listener) === null || _props$listener2 === void 0 || (_props$listener2 = _props$listener2.Widgets) === null || _props$listener2 === void 0 ? void 0 : _props$listener2[name]);
+      var beforeEvent = (0, _utils.createWidgetEvent)({
+        type: "beforeload",
+        name: name,
+        value: displayValue,
+        anchor: anchorRef.current
+      });
+      onBeforeload(beforeEvent, (_props$listener2 = props.listener) === null || _props$listener2 === void 0 || (_props$listener2 = _props$listener2.Widgets) === null || _props$listener2 === void 0 ? void 0 : _props$listener2[name]);
       onBeforeloadExecutedRef.current = true;
     }
-  }, [onBeforeload, name, props.listener]);
+  }, []);
 
   // Render the main TextField component
   var renderTextField = (0, _react.useCallback)(function () {
@@ -377,6 +422,7 @@ var WmTime = function WmTime(props) {
   var views = ["hours", "minutes"];
   if (timeFormatOptions.hasSeconds) views.push("seconds");
   return __jsx(_material.Box, {
+    hidden: props.hidden,
     className: (0, _clsx["default"])(_utils.DEFAULT_CLASS, className)
   }, renderTextField(), showPicker && __jsx(_xDatePickers.TimePicker, {
     disableIgnoringDatePartForTimeValidation: true,
@@ -392,7 +438,7 @@ var WmTime = function WmTime(props) {
     },
     minTime: minTimeObj ? (0, _momentTimezone["default"])(minTimeObj) : undefined,
     maxTime: maxTimeObj ? (0, _momentTimezone["default"])(maxTimeObj) : undefined,
-    ampm: timeFormatOptions.is12Hour,
+    ampm: timeFormatOptions.is12Hour && showampmbuttons,
     views: views,
     skipDisabled: true,
     ampmInClock: timeFormatOptions.is12Hour,
@@ -405,6 +451,9 @@ var WmTime = function WmTime(props) {
         anchorEl: anchorRef.current,
         placement: "bottom-start",
         sx: _utils.TIME_PICKER_STYLES
+      },
+      actionBar: {
+        actions: ["accept"]
       }
     }
   }));