@wavemaker-ai/react-runtime 1.0.0-rc.309

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

@@ -0,0 +1,717 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmDatetime = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+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 _clsx = _interopRequireDefault(require("clsx"));
+var _BaseDateTime = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/BaseDateTime"));
+var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
+var _utils = require("./utils");
+var _compare = _interopRequireDefault(require("../../../../core/util/compare"));
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+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 = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _listener$localeForma3, _listener$localeForma4;
+  var name = props.name,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Select Date Time" : _props$placeholder,
+    hint = props.hint,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    shortcutkey = props.shortcutkey,
+    datavalue = props.datavalue,
+    datepatternProp = props.datepattern,
+    _props$hourstep = props.hourstep,
+    hourstep = _props$hourstep === void 0 ? 1 : _props$hourstep,
+    _props$minutestep = props.minutestep,
+    minutestep = _props$minutestep === void 0 ? 15 : _props$minutestep,
+    _props$outputformat = props.outputformat,
+    outputformat = _props$outputformat === void 0 ? "timestamp" : _props$outputformat,
+    defaultDateFormat = props.defaultDateFormat,
+    defaultTimeFormat = props.defaultTimeFormat,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    mindate = props.mindate,
+    maxdate = props.maxdate,
+    excludedays = props.excludedays,
+    excludedates = props.excludedates,
+    _props$showweeks = props.showweeks,
+    showweeks = _props$showweeks === void 0 ? false : _props$showweeks,
+    _props$autofocus = props.autofocus,
+    autofocus = _props$autofocus === void 0 ? false : _props$autofocus,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$selectfromothe = props.selectfromothermonth,
+    selectfromothermonth = _props$selectfromothe === void 0 ? true : _props$selectfromothe,
+    _props$todaybutton = props.todaybutton,
+    todaybutton = _props$todaybutton === void 0 ? true : _props$todaybutton,
+    _props$clearbutton = props.clearbutton,
+    clearbutton = _props$clearbutton === void 0 ? true : _props$clearbutton,
+    _props$adaptivepositi = props.adaptiveposition,
+    adaptiveposition = _props$adaptivepositi === void 0 ? true : _props$adaptivepositi,
+    _props$showdropdownon = props.showdropdownon,
+    showdropdownon = _props$showdropdownon === void 0 ? "default" : _props$showdropdownon,
+    _props$dataentrymode = props.dataentrymode,
+    dataentrymode = _props$dataentrymode === void 0 ? "default" : _props$dataentrymode,
+    width = props.width,
+    arialabel = props.arialabel,
+    className = props.className,
+    isValidDate = props.isValidDate,
+    formatValidation = props.formatValidation,
+    updatePrevDatavalue = props.updatePrevDatavalue,
+    updateBoundVariable = props.updateBoundVariable,
+    onChange = props.onChange,
+    onClick = props.onClick,
+    _onFocus = props.onFocus,
+    _onBlur = props.onBlur,
+    _onMouseEnter = props.onMouseEnter,
+    _onMouseLeave = props.onMouseLeave,
+    onBeforeload = props.onBeforeload,
+    listener = props.listener,
+    floatinglabel = props.floatinglabel,
+    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, _react.useMemo)(function () {
+    var combinedFromParts = function combinedFromParts() {
+      var _listener$localeForma, _listener$localeForma2;
+      var datePart = defaultDateFormat || (listener === null || listener === void 0 || (_listener$localeForma = listener.localeFormats) === null || _listener$localeForma === void 0 ? void 0 : _listener$localeForma.date) || "MMM d, y";
+      var timePart = defaultTimeFormat || (listener === null || listener === void 0 || (_listener$localeForma2 = listener.localeFormats) === null || _listener$localeForma2 === void 0 ? void 0 : _listener$localeForma2.time) || "h:mm:ss a";
+      return "".concat(datePart, " ").concat(timePart);
+    };
+    return combinedFromParts();
+  }, [defaultDateFormat, defaultTimeFormat, listener === null || listener === void 0 || (_listener$localeForma3 = listener.localeFormats) === null || _listener$localeForma3 === void 0 ? void 0 : _listener$localeForma3.date, listener === null || listener === void 0 || (_listener$localeForma4 = listener.localeFormats) === null || _listener$localeForma4 === void 0 ? void 0 : _listener$localeForma4.time]);
+  var datepattern = (0, _react.useMemo)(function () {
+    return datepatternProp !== null && datepatternProp !== void 0 ? datepatternProp : defaultDateTimeFormat;
+  }, [datepatternProp, defaultDateTimeFormat]);
+
+  // State management
+  var _useState = (0, _react.useState)(false),
+    isDateOpen = _useState[0],
+    setIsDateOpen = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isTimeOpen = _useState2[0],
+    setIsTimeOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(""),
+    displayValue = _useState3[0],
+    setDisplayValue = _useState3[1];
+  var _useState4 = (0, _react.useState)(false),
+    isCurrentDate = _useState4[0],
+    setIsCurrentDate = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    localDateValue = _useState5[0],
+    setLocalDateValue = _useState5[1];
+  var _useState6 = (0, _react.useState)(false),
+    invalidFormat = _useState6[0],
+    setInvalidFormat = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    dateNotInRange = _useState7[0],
+    setDateNotInRange = _useState7[1];
+  var _useState8 = (0, _react.useState)(null),
+    tempDateValue = _useState8[0],
+    setTempDateValue = _useState8[1];
+  var _useState9 = (0, _react.useState)("day"),
+    datePickerView = _useState9[0],
+    setDatePickerView = _useState9[1];
+  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);
+  var anchorRef = (0, _react.useRef)(null);
+
+  // Computed values
+  var isReadOnly = (0, _react.useMemo)(function () {
+    return readonly || isCurrentDate || dataentrymode !== "undefined" && dataentrymode !== "default";
+  }, [readonly, dataentrymode, isCurrentDate]);
+  var shouldOpenOnInput = (0, _react.useMemo)(function () {
+    return showdropdownon === "default" && dataentrymode !== "picker";
+  }, [showdropdownon, dataentrymode]);
+
+  // Parse min/max dates with CURRENT_DATE support
+  var minDateObj = (0, _react.useMemo)(function () {
+    return (0, _utils.parseDateWithCurrent)(mindate, "min");
+  }, [mindate]);
+  var maxDateObj = (0, _react.useMemo)(function () {
+    return (0, _utils.parseDateWithCurrent)(maxdate, "max");
+  }, [maxdate]);
+  var excludedDaysArray = (0, _react.useMemo)(function () {
+    return (0, _utils.parseExcludedDays)(excludedays);
+  }, [excludedays]);
+  var excludedDatesArray = (0, _react.useMemo)(function () {
+    return (0, _utils.parseExcludedDates)(excludedates);
+  }, [excludedates]);
+
+  // Format date utility
+  var formatDateWithPattern = (0, _react.useCallback)(function (date) {
+    var pattern = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : datepattern;
+    return (0, _utils.formatDate)(date, pattern, (0, _utils.getTimezone)());
+  }, [datepattern]);
+
+  // Validate date
+  var validateDateWithProps = (0, _react.useCallback)(function (date) {
+    var _validation$validatio;
+    if (!date) return true;
+    var validation = (0, _utils.validateDate)(date, minDateObj, maxDateObj, excludedDaysArray, excludedDatesArray, validators, validationmessage);
+    setDateNotInRange(validation.isOutOfRange);
+    setValidationFailureMessage((_validation$validatio = validation.validationMessage) !== null && _validation$validatio !== void 0 ? _validation$validatio : "");
+    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);
+      }
+      setValidationFailureMessage("");
+      setLocalDateValue(null);
+      setDisplayValue("");
+      setInvalidFormat(false);
+      setDateNotInRange(false);
+      if (updatePrevDatavalue) {
+        updatePrevDatavalue(null);
+      }
+      if (updateBoundVariable) {
+        updateBoundVariable(null);
+      }
+      (0, _utils.updateListener)(name, listener, "", "", props, onChange, displayValue, "");
+      return;
+    }
+    var dateString = formatDateWithPattern(date);
+    if (required && formatValidation && !formatValidation(date, dateString)) {
+      setInvalidFormat(true);
+      return;
+    }
+    if (!validateDateWithProps(date)) {
+      if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield && event) {
+        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], dateString, displayValue);
+      }
+      return;
+    }
+    var oldValue = displayValue;
+    setLocalDateValue(date);
+    setDisplayValue(dateString);
+    setInvalidFormat(false);
+    var outputValue = outputformat === "timestamp" ? date.getTime().toString() : formatDateWithPattern(date, outputformat);
+    if (updatePrevDatavalue) {
+      updatePrevDatavalue(date);
+    }
+    if (updateBoundVariable) {
+      updateBoundVariable(date);
+    }
+    (0, _utils.updateListener)(name, listener, dateString, outputValue, props, onChange, oldValue, formatDateWithPattern(date, "timestamp"));
+  }, [formatDateWithPattern, formatValidation, validateDateWithProps, updatePrevDatavalue, updateBoundVariable, outputformat, displayValue, name, listener, onChange, props]);
+
+  // Handle date selection - now updates immediately
+  var handleDateSelection = (0, _react.useCallback)(function (date) {
+    if (!date) {
+      handleFinalDateChange(null);
+      setIsDateOpen(false);
+      setIsTimeOpen(false);
+      setTempDateValue(null);
+      return;
+    }
+    // Validate date format
+    var dateString = formatDateWithPattern(date);
+    if (formatValidation && required && !formatValidation(date, dateString)) {
+      setInvalidFormat(true);
+      return;
+    }
+    // Validate min/max date and excluded dates/days
+    if (!validateDateWithProps(date)) {
+      return;
+    }
+    // If we have an existing time component, preserve it
+    var finalDate = date;
+    if (localDateValue) {
+      var existingMoment = (0, _momentTimezone["default"])(localDateValue);
+      finalDate = (0, _momentTimezone["default"])(date).hour(existingMoment.hour()).minute(existingMoment.minute()).second(existingMoment.second()).toDate();
+    }
+    // Update immediately with the new date (preserving existing time if any)
+    if (datePickerView === "day") {
+      var dateWithTime = (0, _utils.ensureTime)(finalDate);
+      setTempDateValue(dateWithTime);
+      setLocalDateValue(dateWithTime);
+      setDisplayValue(formatDateWithPattern(dateWithTime));
+      setTimeout(function () {
+        setIsDateOpen(false);
+        setIsTimeOpen(true);
+      }, 0);
+    } else {
+      setTempDateValue(finalDate);
+    }
+  }, [formatDateWithPattern, formatValidation, validateDateWithProps, localDateValue, datePickerView]);
+
+  // Handle date picker accept (when user completes date selection)
+  var handleDateAccept = (0, _react.useCallback)(function () {
+    if (tempDateValue) {
+      setIsDateOpen(false);
+      setIsTimeOpen(true);
+    }
+    setIsCurrentMonth(true);
+  }, [tempDateValue]);
+
+  // Handle date picker close
+  var handleDateClose = (0, _react.useCallback)(function () {
+    setIsDateOpen(false);
+    setIsTimeOpen(false);
+    setDatePickerView("day");
+    setIsCurrentMonth(true);
+  }, []);
+  var handleVeiwChange = (0, _react.useCallback)(function (view) {
+    setDatePickerView(view);
+  }, []);
+
+  // Handle time selection
+  var handleTimeSelection = (0, _react.useCallback)(function (time) {
+    if (!time || !tempDateValue) return;
+    var combinedDateTime = (0, _momentTimezone["default"])(tempDateValue).hour((0, _momentTimezone["default"])(time).hour()).minute((0, _momentTimezone["default"])(time).minute()).second((0, _momentTimezone["default"])(time).second()).toDate();
+    setLocalDateValue(combinedDateTime);
+    setDisplayValue(formatDateWithPattern(combinedDateTime));
+    setTempDateValue(combinedDateTime);
+  }, [tempDateValue, formatDateWithPattern]);
+
+  // Handle time picker accept (OK button or outside click)
+  var handleTimeAccept = (0, _react.useCallback)(function () {
+    setIsTimeOpen(false);
+    setTempDateValue(null);
+  }, [tempDateValue, handleFinalDateChange]);
+
+  // Handle time picker cancel
+  var handleTimeCancel = (0, _react.useCallback)(function () {
+    setIsTimeOpen(false);
+    setTempDateValue(null);
+    setDisplayValue(localDateValue ? formatDateWithPattern(localDateValue) : "");
+  }, [localDateValue, formatDateWithPattern]);
+
+  // Handle time picker close (outside click)
+  var handleTimeClose = (0, _react.useCallback)(function () {
+    if (tempDateValue) {
+      handleFinalDateChange(tempDateValue);
+    }
+    setIsTimeOpen(false);
+    setTempDateValue(null);
+  }, [tempDateValue, handleFinalDateChange]);
+
+  // Handle input change
+  var handleInputChange = (0, _react.useCallback)(function (event) {
+    if (dataentrymode === "picker") return;
+    var value = event.target.value;
+    setDisplayValue(value);
+    if (!value) {
+      handleFinalDateChange(null, event);
+      return;
+    }
+    try {
+      var momentPattern = (0, _utils.mapToMomentPattern)(datepattern);
+      var parsedDate = (0, _momentTimezone["default"])(value, momentPattern, true);
+      if (parsedDate.isValid()) {
+        var dateObj = parsedDate.toDate();
+        if (isValidDate && isValidDate(dateObj)) {
+          handleFinalDateChange(dateObj, event);
+        } else {
+          handleFinalDateChange(dateObj, event);
+        }
+      } 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);
+          }
+          setInvalidFormat(true);
+        }
+      }
+    } catch (error) {
+      if (required) {
+        setInvalidFormat(true);
+      }
+    }
+  }, [datepattern, handleFinalDateChange, isValidDate, dataentrymode, required]);
+
+  // Handle input click
+  var handleInputClick = (0, _react.useCallback)(function (event) {
+    if (readonly) return;
+    if (onClick && name) {
+      var _listener$Widgets;
+      onClick(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
+    }
+    if (shouldOpenOnInput && !readonly && !disabled && !isCurrentDate) {
+      setIsDateOpen(true);
+      setIsTimeOpen(false);
+      setTempDateValue(null);
+    }
+  }, [shouldOpenOnInput, readonly, disabled, isCurrentDate, onClick, name, listener]);
+
+  // Toggle date picker
+  var toggleDatePicker = (0, _react.useCallback)(function (event) {
+    if (disabled || readonly || isCurrentDate) return;
+    setIsDateOpen(function (prev) {
+      return !prev;
+    });
+    setIsTimeOpen(false);
+    setTempDateValue(null);
+  }, [disabled, readonly, isCurrentDate]);
+
+  // Toggle time picker
+  var toggleTimePicker = (0, _react.useCallback)(function (event) {
+    if (disabled || readonly || isCurrentDate) return;
+    var dateForTimeSelection = localDateValue;
+    dateForTimeSelection = (0, _utils.ensureTime)(dateForTimeSelection) || new Date();
+    setTempDateValue(dateForTimeSelection);
+    setIsTimeOpen(function (prev) {
+      return !prev;
+    });
+    setIsDateOpen(false);
+  }, [disabled, readonly, isCurrentDate, localDateValue]);
+
+  // Key down handler
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (props.handleKeyDown) {
+      props.handleKeyDown(event);
+    }
+    if (shortcutkey && event.altKey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
+      var _inputRef$current;
+      event.preventDefault();
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      return;
+    }
+    switch (event.key) {
+      case "Enter":
+      case "ArrowDown":
+        if (shouldOpenOnInput) {
+          event.preventDefault();
+          setIsDateOpen(true);
+        }
+        break;
+      case "Escape":
+        if (isTimeOpen) {
+          handleTimeCancel();
+        } else {
+          setIsDateOpen(false);
+          setIsTimeOpen(false);
+        }
+        break;
+    }
+  }, [props, isTimeOpen, handleTimeCancel, shouldOpenOnInput, shortcutkey]);
+
+  // shouldDisableDate function for DatePicker
+  var shouldDisableDateCallback = (0, _react.useCallback)(function (date) {
+    return (0, _utils.shouldDisableDate)(date, excludedDaysArray, excludedDatesArray);
+  }, [excludedDaysArray, excludedDatesArray]);
+
+  // Handle today click
+  var handleToday = (0, _react.useCallback)(function () {
+    var today = (0, _momentTimezone["default"])().toDate();
+    handleFinalDateChange(today);
+    setIsTimeOpen(true);
+  }, [handleFinalDateChange]);
+
+  // Handle clear click
+  var handleClear = (0, _react.useCallback)(function () {
+    handleFinalDateChange(null);
+  }, [handleFinalDateChange]);
+
+  // Call onBeforeload callback on component mount
+  (0, _react.useEffect)(function () {
+    var _listener$Widgets2;
+    if (onBeforeload && name && listener !== null && listener !== void 0 && (_listener$Widgets2 = listener.Widgets) !== null && _listener$Widgets2 !== void 0 && _listener$Widgets2[name] && !onBeforeloadExecutedRef.current) {
+      var syntheticEvent = {};
+      onBeforeload(syntheticEvent, listener.Widgets[name]);
+      onBeforeloadExecutedRef.current = true;
+    }
+  }, [onBeforeload, name, listener]);
+  var syncDataValueToState = (0, _react.useCallback)(function () {
+    if (datavalue === "CURRENT_DATE") {
+      var currentTime = (0, _momentTimezone["default"])().tz((0, _utils.getTimezone)()).toDate();
+      var display_time = formatDateWithPattern(currentTime);
+      setLocalDateValue(currentTime);
+      setDisplayValue(display_time);
+      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);
+      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 () {
+    if (datavalue === "CURRENT_DATE") {
+      syncDataValueToState();
+      var interval = setInterval(syncDataValueToState, 1000);
+      return function () {
+        return clearInterval(interval);
+      };
+    } else {
+      syncDataValueToState();
+    }
+  }, [datavalue, syncDataValueToState]);
+
+  // Auto focus
+  (0, _react.useEffect)(function () {
+    if (autofocus && inputRef.current) {
+      var timer = setTimeout(function () {
+        var _inputRef$current2;
+        return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+      }, 0);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [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,
+    hidden: props.hidden
+  }, __jsx(_material.TextField, {
+    disabled: disabled || readonly,
+    "aria-readonly": readonly,
+    inputRef: inputRef,
+    "aria-label": arialabel,
+    name: name,
+    tabIndex: readonly || disabled || isCurrentDate ? -1 : tabindex,
+    type: "text",
+    value: displayValue,
+    label: floatinglabel,
+    onClick: handleInputClick,
+    onFocus: function onFocus(event) {
+      // Prevent focus if readonly, disabled, or current date
+      if (readonly || disabled || isCurrentDate) {
+        event.target.blur();
+        return;
+      }
+      // Call custom onFocus callback if conditions are met
+      if (_onFocus && name) {
+        _onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+      }
+    },
+    onBlur: function onBlur(event) {
+      if (readonly) return;
+      _onBlur && name && _onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    },
+    onChange: handleInputChange,
+    onMouseEnter: function onMouseEnter(event) {
+      var _listener$Widgets3;
+      return _onMouseEnter && name && _onMouseEnter(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      var _listener$Widgets4;
+      return _onMouseLeave && name && _onMouseLeave(event, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
+    },
+    autoFocus: autofocus,
+    required: required,
+    error: Boolean(validationFailureMessage || invalidFormat || dateNotInRange),
+    helperText: validationFailureMessage || (invalidFormat ? validationmessage || "Invalid date format" : dateNotInRange ? validationmessage || "Date not in valid range" : ""),
+    InputProps: {
+      readOnly: isReadOnly,
+      placeholder: floatinglabel ? undefined : placeholder
+    },
+    InputLabelProps: {
+      shrink: floatinglabel ? undefined : false,
+      className: floatinglabel ? "wm-datetime-input-label" : undefined
+    },
+    inputProps: _objectSpread(_objectSpread({
+      accessKey: shortcutkey,
+      "aria-invalid": invalidFormat || dateNotInRange,
+      className: "form-control app-textbox display-input wm-datetime-html-input"
+    }, disabled ? {
+      disabled: true
+    } : {}), readonly ? {
+      readOnly: true
+    } : {}),
+    onKeyDown: handleKeyDown,
+    fullWidth: true,
+    variant: "outlined",
+    size: "small"
+  }), __jsx(_material.Box, {
+    component: "span",
+    className: "input-group-btn"
+  }, __jsx(_material.Button, {
+    className: "btn-date",
+    tabIndex: tabindex,
+    "aria-hidden": true,
+    disableRipple: true,
+    "aria-label": displayValue ? "Change Date ".concat(displayValue) : "Choose date by pressing enter",
+    "aria-haspopup": "true",
+    "aria-expanded": isDateOpen,
+    onClick: toggleDatePicker,
+    variant: "outlined",
+    disabled: isDisabled
+  }, __jsx(_material.Box, {
+    component: "i",
+    className: "app-icon wm-sl-l sl-calendar",
+    "aria-hidden": "true"
+  })), __jsx(_material.Button, {
+    className: "btn-time",
+    tabIndex: tabindex,
+    "aria-hidden": true,
+    disableRipple: true,
+    "aria-label": "Select time",
+    "aria-haspopup": "true",
+    "aria-expanded": isTimeOpen,
+    onClick: toggleTimePicker,
+    variant: "outlined",
+    disabled: isDisabled
+  }, __jsx(_material.Box, {
+    component: "i",
+    className: "app-icon wm-sl-l sl-time",
+    "aria-hidden": "true"
+  }))), isDateOpen && !isCurrentDate && __jsx(_DatePicker.DatePicker, {
+    open: isDateOpen,
+    onClose: handleDateClose,
+    onAccept: handleDateAccept,
+    value: localDateValue && isCurrentMonth ? (0, _momentTimezone["default"])(localDateValue) : null,
+    onViewChange: function onViewChange(view) {
+      handleVeiwChange(view);
+    },
+    onChange: function onChange(newValue) {
+      if (!newValue) return;
+      setLocalDateValue(newValue.toDate());
+      if (datePickerView === "day") {
+        handleDateSelection(newValue.toDate());
+      }
+    },
+    onMonthChange: function onMonthChange(newDate) {
+      if (!localDateValue) return;
+      var isSameMonth = newDate.month() === (0, _momentTimezone["default"])(localDateValue).month();
+      setIsCurrentMonth(isSameMonth);
+    },
+    minDate: minDateObj ? (0, _momentTimezone["default"])(minDateObj) : undefined,
+    maxDate: maxDateObj ? (0, _momentTimezone["default"])(maxDateObj) : undefined,
+    shouldDisableDate: shouldDisableDateCallback,
+    showDaysOutsideCurrentMonth: selectfromothermonth,
+    slotProps: {
+      textField: {
+        className: "wm-datetime-picker-textfield-hidden"
+      },
+      popper: {
+        anchorEl: anchorRef.current,
+        placement: adaptiveposition ? "bottom-end" : "bottom-start",
+        className: "wm-datetime-date-picker-popper",
+        style: {
+          "--wm-datetime-calendar-width": showweeks ? "420px" : "370px"
+        }
+      },
+      calendarHeader: {
+        format: "MMMM YYYY"
+      },
+      actionBar: {
+        actions: function () {
+          var actions = [];
+          if (todaybutton) actions.push("today");
+          if (clearbutton) actions.push("clear");
+          return actions;
+        }(),
+        onClick: function onClick(event) {
+          var _target$textContent;
+          var target = event.target;
+          var action = target.getAttribute("data-action") || ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.toLowerCase());
+          if (action === "today") handleToday();
+          if (action === "clear") handleClear();
+        },
+        className: "wm-datetime-datepicker-action-bar"
+      }
+    },
+    views: ["year", "month", "day"],
+    displayWeekNumber: showweeks
+  }), isTimeOpen && !isCurrentDate && __jsx(_TimePicker.TimePicker, {
+    open: isTimeOpen,
+    onClose: handleTimeClose,
+    onAccept: handleTimeAccept,
+    value: tempDateValue ? (0, _momentTimezone["default"])(tempDateValue) : (0, _momentTimezone["default"])(),
+    onChange: function onChange(newValue) {
+      newValue && handleTimeSelection(newValue.toDate());
+    },
+    ampm: showampmbuttons && (datepattern.includes("a") || datepattern.includes("A")),
+    slotProps: {
+      textField: {
+        className: "wm-datetime-picker-textfield-hidden"
+      },
+      popper: {
+        anchorEl: anchorRef.current,
+        placement: adaptiveposition ? "bottom-start" : "bottom-start",
+        className: "wm-datetime-time-picker-popper"
+      },
+      actionBar: {
+        actions: ["accept"]
+      }
+    },
+    minutesStep: minutestep,
+    timeSteps: {
+      hours: hourstep,
+      minutes: minutestep,
+      seconds: 1
+    },
+    views: timeViews
+  }));
+}, function (prev, next) {
+  var keys = ["datavalue", "datepattern", "placeholder", "hint", "tabindex", "shortcutkey", "hourstep", "minutestep", "outputformat", "defaultDateFormat", "defaultTimeFormat", "listener", "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"];
+  return keys.every(function (key) {
+    return (0, _compare["default"])(prev[key], next[key]);
+  });
+});
+WmDateTime.displayName = "WmDateTime";
+
+// @ts-expect-error wrap with baseDatetime and formcontroller
+var withForm = (0, _BaseDateTime["default"])((0, _withFormController["default"])(WmDateTime));
+var WmDateTimeStandalone = exports.WmDatetime = (0, _withStandalone["default"])(withForm);
+/**
+ * The WmDateTime component provides a combined date and time picker input.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-datetime--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-datetime--docs)
+ *
+ * @param props - {@link WmDateTimeProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(withForm);