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

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

@@ -1,717 +1,780 @@
-"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;
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    // 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);
+  return a;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
+import { TextField, Button, Box } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { TimePicker } from "@mui/x-date-pickers/TimePicker";
+import moment from "moment-timezone";
+import clsx from "clsx";
+import withBaseDateTime from "../../../../higherOrder/BaseDateTime";
+import withFormController from "../../../data/form/form-controller/withFormController";
+import {
+  ensureTime,
+  mapToMomentPattern,
+  getTimezone,
+  parseDateWithCurrent,
+  parseExcludedDays,
+  parseExcludedDates,
+  formatDate,
+  parseDateValue,
+  validateDate,
+  shouldDisableDate,
+  getTimeViews,
+  updateListener
+} from "./utils";
+import compare from "../../../../core/util/compare";
+import withStandalone from "../../../../higherOrder/withStandalone";
+import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
+const DEFAULT_CLS = "app-datetime input-group";
+const WmDateTime = memo(
+  (props) => {
+    var _a, _b;
+    const {
+      name,
+      placeholder = "Select Date Time",
+      hint,
+      tabindex = 0,
+      shortcutkey,
+      datavalue,
+      datepattern: datepatternProp,
+      hourstep = 1,
+      minutestep = 15,
+      outputformat = "timestamp",
+      defaultDateFormat,
+      defaultTimeFormat,
+      required = false,
+      mindate,
+      maxdate,
+      excludedays,
+      excludedates,
+      showweeks = false,
+      autofocus = false,
+      readonly = false,
+      disabled = false,
+      selectfromothermonth = true,
+      todaybutton = true,
+      clearbutton = true,
+      adaptiveposition = true,
+      showdropdownon = "default",
+      dataentrymode = "default",
+      width,
+      arialabel,
+      className,
+      isValidDate,
+      formatValidation,
+      updatePrevDatavalue,
+      updateBoundVariable,
+      onChange,
+      onClick,
+      onFocus,
+      onBlur,
+      onMouseEnter,
+      onMouseLeave,
+      onBeforeload,
+      listener,
+      floatinglabel,
+      styles,
+      showampmbuttons = false,
+      validators = [],
+      validationmessage
+    } = props;
+    const defaultDateTimeFormat = useMemo(() => {
+      const combinedFromParts = () => {
+        var _a2, _b2;
+        const datePart = defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "MMM d, y";
+        const timePart = defaultTimeFormat || ((_b2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _b2.time) || "h:mm:ss a";
+        return `${datePart} ${timePart}`;
+      };
+      return combinedFromParts();
+    }, [
+      defaultDateFormat,
+      defaultTimeFormat,
+      (_a = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a.date,
+      (_b = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _b.time
+    ]);
+    const datepattern = useMemo(
+      () => datepatternProp != null ? datepatternProp : defaultDateTimeFormat,
+      [datepatternProp, defaultDateTimeFormat]
+    );
+    const [isDateOpen, setIsDateOpen] = useState(false);
+    const [isTimeOpen, setIsTimeOpen] = useState(false);
+    const [displayValue, setDisplayValue] = useState("");
+    const [isCurrentDate, setIsCurrentDate] = useState(false);
+    const [localDateValue, setLocalDateValue] = useState(null);
+    const [invalidFormat, setInvalidFormat] = useState(false);
+    const [dateNotInRange, setDateNotInRange] = useState(false);
+    const [tempDateValue, setTempDateValue] = useState(null);
+    const [datePickerView, setDatePickerView] = useState("day");
+    const [isCurrentMonth, setIsCurrentMonth] = useState(true);
+    const [validationFailureMessage, setValidationFailureMessage] = useState("");
+    const inputRef = useRef(null);
+    const onBeforeloadExecutedRef = useRef(false);
+    const anchorRef = useRef(null);
+    const isReadOnly = useMemo(
+      () => readonly || isCurrentDate || dataentrymode !== "undefined" && dataentrymode !== "default",
+      [readonly, dataentrymode, isCurrentDate]
+    );
+    const shouldOpenOnInput = useMemo(() => {
+      return showdropdownon === "default" && dataentrymode !== "picker";
+    }, [showdropdownon, dataentrymode]);
+    const minDateObj = useMemo(() => {
+      return parseDateWithCurrent(mindate, "min");
+    }, [mindate]);
+    const maxDateObj = useMemo(() => {
+      return parseDateWithCurrent(maxdate, "max");
+    }, [maxdate]);
+    const excludedDaysArray = useMemo(() => {
+      return parseExcludedDays(excludedays);
+    }, [excludedays]);
+    const excludedDatesArray = useMemo(() => {
+      return parseExcludedDates(excludedates);
+    }, [excludedates]);
+    const formatDateWithPattern = useCallback(
+      (date, pattern = datepattern) => {
+        return formatDate(date, pattern, getTimezone());
+      },
+      [datepattern]
+    );
+    const validateDateWithProps = useCallback(
+      (date) => {
+        var _a2;
+        if (!date) return true;
+        const validation = validateDate(
+          date,
+          minDateObj,
+          maxDateObj,
+          excludedDaysArray,
+          excludedDatesArray,
+          validators,
+          validationmessage
+        );
+        setDateNotInRange(validation.isOutOfRange);
+        setValidationFailureMessage((_a2 = validation.validationMessage) != null ? _a2 : "");
+        setInvalidFormat(false);
+        setDateNotInRange(false);
+        return validation.isValid;
+      },
+      [minDateObj, maxDateObj, excludedDaysArray, excludedDatesArray]
+    );
+    const handleFinalDateChange = useCallback(
+      (date, event) => {
+        if (!date) {
+          if (onChange && name && (listener == null ? void 0 : listener.Widgets[name]) && props.formfield) {
+            onChange(event, listener == null ? void 0 : listener.Widgets[name], "", displayValue);
+          }
+          setValidationFailureMessage("");
+          setLocalDateValue(null);
+          setDisplayValue("");
+          setInvalidFormat(false);
+          setDateNotInRange(false);
+          if (updatePrevDatavalue) {
+            updatePrevDatavalue(null);
           }
+          if (updateBoundVariable) {
+            updateBoundVariable(null);
+          }
+          updateListener(name, listener, "", "", props, onChange, displayValue, "");
+          return;
+        }
+        const dateString = formatDateWithPattern(date);
+        if (required && formatValidation && !formatValidation(date, dateString)) {
           setInvalidFormat(true);
+          return;
         }
-      }
-    } 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);
+        if (!validateDateWithProps(date)) {
+          if (onChange && name && (listener == null ? void 0 : listener.Widgets[name]) && props.formfield && event) {
+            onChange(event, listener == null ? void 0 : listener.Widgets[name], dateString, displayValue);
+          }
+          return;
         }
-        break;
-      case "Escape":
-        if (isTimeOpen) {
-          handleTimeCancel();
-        } else {
+        const oldValue = displayValue;
+        setLocalDateValue(date);
+        setDisplayValue(dateString);
+        setInvalidFormat(false);
+        const outputValue = outputformat === "timestamp" ? date.getTime().toString() : formatDateWithPattern(date, outputformat);
+        if (updatePrevDatavalue) {
+          updatePrevDatavalue(date);
+        }
+        if (updateBoundVariable) {
+          updateBoundVariable(date);
+        }
+        updateListener(
+          name,
+          listener,
+          dateString,
+          outputValue,
+          props,
+          onChange,
+          oldValue,
+          formatDateWithPattern(date, "timestamp")
+        );
+      },
+      [
+        formatDateWithPattern,
+        formatValidation,
+        validateDateWithProps,
+        updatePrevDatavalue,
+        updateBoundVariable,
+        outputformat,
+        displayValue,
+        name,
+        listener,
+        onChange,
+        props
+      ]
+    );
+    const handleDateSelection = useCallback(
+      (date) => {
+        if (!date) {
+          handleFinalDateChange(null);
           setIsDateOpen(false);
           setIsTimeOpen(false);
+          setTempDateValue(null);
+          return;
         }
-        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));
+        const dateString = formatDateWithPattern(date);
+        if (formatValidation && required && !formatValidation(date, dateString)) {
+          setInvalidFormat(true);
+          return;
         }
-        setLocalDateValue(null);
-      } else {
-        if (datavalue == undefined) {
-          setLocalDateValue(null);
-          setDisplayValue("");
+        if (!validateDateWithProps(date)) {
           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 || "");
+        let finalDate = date;
+        if (localDateValue) {
+          const existingMoment = moment(localDateValue);
+          finalDate = moment(date).hour(existingMoment.hour()).minute(existingMoment.minute()).second(existingMoment.second()).toDate();
         }
-        (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]);
+        if (datePickerView === "day") {
+          const dateWithTime = ensureTime(finalDate);
+          setTempDateValue(dateWithTime);
+          setLocalDateValue(dateWithTime);
+          setDisplayValue(formatDateWithPattern(dateWithTime));
+          setTimeout(() => {
+            setIsDateOpen(false);
+            setIsTimeOpen(true);
+          }, 0);
+        } else {
+          setTempDateValue(finalDate);
+        }
+      },
+      [
+        formatDateWithPattern,
+        formatValidation,
+        validateDateWithProps,
+        localDateValue,
+        datePickerView
+      ]
+    );
+    const handleDateAccept = useCallback(() => {
+      if (tempDateValue) {
+        setIsDateOpen(false);
+        setIsTimeOpen(true);
       }
-    },
-    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());
+      setIsCurrentMonth(true);
+    }, [tempDateValue]);
+    const handleDateClose = useCallback(() => {
+      setIsDateOpen(false);
+      setIsTimeOpen(false);
+      setDatePickerView("day");
+      setIsCurrentMonth(true);
+    }, []);
+    const handleVeiwChange = useCallback((view) => {
+      setDatePickerView(view);
+    }, []);
+    const handleTimeSelection = useCallback(
+      (time) => {
+        if (!time || !tempDateValue) return;
+        const combinedDateTime = moment(tempDateValue).hour(moment(time).hour()).minute(moment(time).minute()).second(moment(time).second()).toDate();
+        setLocalDateValue(combinedDateTime);
+        setDisplayValue(formatDateWithPattern(combinedDateTime));
+        setTempDateValue(combinedDateTime);
+      },
+      [tempDateValue, formatDateWithPattern]
+    );
+    const handleTimeAccept = useCallback(() => {
+      setIsTimeOpen(false);
+      setTempDateValue(null);
+    }, [tempDateValue, handleFinalDateChange]);
+    const handleTimeCancel = useCallback(() => {
+      setIsTimeOpen(false);
+      setTempDateValue(null);
+      setDisplayValue(localDateValue ? formatDateWithPattern(localDateValue) : "");
+    }, [localDateValue, formatDateWithPattern]);
+    const handleTimeClose = useCallback(() => {
+      if (tempDateValue) {
+        handleFinalDateChange(tempDateValue);
       }
-    },
-    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"
+      setIsTimeOpen(false);
+      setTempDateValue(null);
+    }, [tempDateValue, handleFinalDateChange]);
+    const handleInputChange = useCallback(
+      (event) => {
+        if (dataentrymode === "picker") return;
+        const value = event.target.value;
+        setDisplayValue(value);
+        if (!value) {
+          handleFinalDateChange(null, event);
+          return;
+        }
+        try {
+          const momentPattern = mapToMomentPattern(datepattern);
+          const parsedDate = moment(value, momentPattern, true);
+          if (parsedDate.isValid()) {
+            const dateObj = parsedDate.toDate();
+            if (isValidDate && isValidDate(dateObj)) {
+              handleFinalDateChange(dateObj, event);
+            } else {
+              handleFinalDateChange(dateObj, event);
+            }
+          } else {
+            if (required) {
+              if (onChange && name && (listener == null ? void 0 : listener.Widgets[name]) && props.formfield) {
+                onChange(event, listener == null ? void 0 : listener.Widgets[name], value, displayValue);
+              }
+              setInvalidFormat(true);
+            }
+          }
+        } catch (error) {
+          if (required) {
+            setInvalidFormat(true);
+          }
+        }
       },
-      popper: {
-        anchorEl: anchorRef.current,
-        placement: adaptiveposition ? "bottom-end" : "bottom-start",
-        className: "wm-datetime-date-picker-popper",
-        style: {
-          "--wm-datetime-calendar-width": showweeks ? "420px" : "370px"
+      [datepattern, handleFinalDateChange, isValidDate, dataentrymode, required]
+    );
+    const handleInputClick = useCallback(
+      (event) => {
+        var _a2;
+        if (readonly) return;
+        if (onClick && name) {
+          onClick(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+        }
+        if (shouldOpenOnInput && !readonly && !disabled && !isCurrentDate) {
+          setIsDateOpen(true);
+          setIsTimeOpen(false);
+          setTempDateValue(null);
         }
       },
-      calendarHeader: {
-        format: "MMMM YYYY"
+      [shouldOpenOnInput, readonly, disabled, isCurrentDate, onClick, name, listener]
+    );
+    const toggleDatePicker = useCallback(
+      (event) => {
+        if (disabled || readonly || isCurrentDate) return;
+        setIsDateOpen((prev) => !prev);
+        setIsTimeOpen(false);
+        setTempDateValue(null);
       },
-      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"
+      [disabled, readonly, isCurrentDate]
+    );
+    const toggleTimePicker = useCallback(
+      (event) => {
+        if (disabled || readonly || isCurrentDate) return;
+        let dateForTimeSelection = localDateValue;
+        dateForTimeSelection = ensureTime(dateForTimeSelection) || /* @__PURE__ */ new Date();
+        setTempDateValue(dateForTimeSelection);
+        setIsTimeOpen((prev) => !prev);
+        setIsDateOpen(false);
       },
-      popper: {
-        anchorEl: anchorRef.current,
-        placement: adaptiveposition ? "bottom-start" : "bottom-start",
-        className: "wm-datetime-time-picker-popper"
+      [disabled, readonly, isCurrentDate, localDateValue]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        var _a2;
+        if (props.handleKeyDown) {
+          props.handleKeyDown(event);
+        }
+        if (shortcutkey && event.altKey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
+          event.preventDefault();
+          (_a2 = inputRef.current) == null ? void 0 : _a2.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]
+    );
+    const shouldDisableDateCallback = useCallback(
+      (date) => {
+        return shouldDisableDate(date, excludedDaysArray, excludedDatesArray);
       },
-      actionBar: {
-        actions: ["accept"]
+      [excludedDaysArray, excludedDatesArray]
+    );
+    const handleToday = useCallback(() => {
+      const today = moment().toDate();
+      handleFinalDateChange(today);
+      setIsTimeOpen(true);
+    }, [handleFinalDateChange]);
+    const handleClear = useCallback(() => {
+      handleFinalDateChange(null);
+    }, [handleFinalDateChange]);
+    useEffect(() => {
+      var _a2;
+      if (onBeforeload && name && ((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]) && !onBeforeloadExecutedRef.current) {
+        const syntheticEvent = {};
+        onBeforeload(syntheticEvent, listener.Widgets[name]);
+        onBeforeloadExecutedRef.current = true;
+      }
+    }, [onBeforeload, name, listener]);
+    const syncDataValueToState = useCallback(() => {
+      if (datavalue === "CURRENT_DATE") {
+        const currentTime = moment().tz(getTimezone()).toDate();
+        const display_time = formatDateWithPattern(currentTime);
+        setLocalDateValue(currentTime);
+        setDisplayValue(display_time);
+        setIsCurrentDate(true);
+        updateListener(
+          name,
+          listener,
+          display_time,
+          formatDateWithPattern(currentTime, outputformat),
+          props,
+          void 0,
+          "",
+          formatDateWithPattern(currentTime, "timestamp")
+        );
+      } else {
+        if (invalidFormat) return;
+        setIsCurrentDate(false);
+        const parsedDate = parseDateValue(datavalue, datepattern);
+        if (!parsedDate && datavalue) {
+          if (typeof datavalue === "string" || typeof datavalue === "number") {
+            setDisplayValue(String(datavalue));
+          }
+          setLocalDateValue(null);
+        } else {
+          if (datavalue == void 0) {
+            setLocalDateValue(null);
+            setDisplayValue("");
+            return;
+          }
+          setLocalDateValue(parsedDate);
+          const formattedValue = formatDateWithPattern(parsedDate);
+          setDisplayValue(formattedValue);
+          const validationResult = validateDate(
+            parsedDate,
+            minDateObj,
+            maxDateObj,
+            excludedDaysArray,
+            excludedDatesArray,
+            validators,
+            validationmessage
+          );
+          if (validationResult && !validationResult.isValid) {
+            setValidationFailureMessage(validationResult.validationMessage || "");
+          }
+          updateListener(
+            name,
+            listener,
+            formattedValue,
+            formatDateWithPattern(parsedDate, outputformat),
+            props,
+            void 0,
+            "",
+            formatDateWithPattern(parsedDate, "timestamp")
+          );
+        }
+      }
+    }, [datavalue, datepattern, formatDateWithPattern]);
+    useEffect(() => {
+      if (datavalue === "CURRENT_DATE") {
+        syncDataValueToState();
+        const interval = setInterval(syncDataValueToState, 1e3);
+        return () => clearInterval(interval);
+      } else {
+        syncDataValueToState();
       }
-    },
-    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]);
-  });
-});
+    }, [datavalue, syncDataValueToState]);
+    useEffect(() => {
+      if (autofocus && inputRef.current) {
+        const timer = setTimeout(() => {
+          var _a2;
+          return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        }, 0);
+        return () => clearTimeout(timer);
+      }
+    }, [autofocus]);
+    const timeViews = getTimeViews(datepattern);
+    const isDisabled = useMemo(() => {
+      return readonly || disabled || isCurrentDate;
+    }, [readonly, disabled, isCurrentDate]);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: styles,
+        ref: anchorRef,
+        className: clsx(DEFAULT_CLS, className == null ? void 0 : className.replace("form-control", "")),
+        title: hint,
+        hidden: props.hidden,
+        children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              disabled: disabled || readonly,
+              "aria-readonly": readonly,
+              inputRef,
+              "aria-label": arialabel,
+              name,
+              tabIndex: readonly || disabled || isCurrentDate ? -1 : tabindex,
+              type: "text",
+              value: displayValue,
+              label: floatinglabel,
+              onClick: handleInputClick,
+              onFocus: (event) => {
+                if (readonly || disabled || isCurrentDate) {
+                  event.target.blur();
+                  return;
+                }
+                if (onFocus && name) {
+                  onFocus(event, listener == null ? void 0 : listener.Widgets[name]);
+                }
+              },
+              onBlur: (event) => {
+                if (readonly) return;
+                onBlur && name && onBlur(event, listener == null ? void 0 : listener.Widgets[name]);
+              },
+              onChange: handleInputChange,
+              onMouseEnter: (event) => {
+                var _a2;
+                return onMouseEnter && name && onMouseEnter(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+              },
+              onMouseLeave: (event) => {
+                var _a2;
+                return onMouseLeave && name && onMouseLeave(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+              },
+              autoFocus: autofocus,
+              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 ? void 0 : placeholder
+              },
+              InputLabelProps: {
+                shrink: floatinglabel ? void 0 : false,
+                className: floatinglabel ? "wm-datetime-input-label" : void 0
+              },
+              inputProps: __spreadValues(__spreadValues({
+                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"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { component: "span", className: "input-group-btn", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "btn-date",
+                tabIndex: tabindex,
+                "aria-hidden": true,
+                disableRipple: true,
+                "aria-label": displayValue ? `Change Date ${displayValue}` : "Choose date by pressing enter",
+                "aria-haspopup": "true",
+                "aria-expanded": isDateOpen,
+                onClick: toggleDatePicker,
+                variant: "outlined",
+                disabled: isDisabled,
+                children: /* @__PURE__ */ jsx(Box, { component: "i", className: "app-icon wm-sl-l sl-calendar", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              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,
+                children: /* @__PURE__ */ jsx(Box, { component: "i", className: "app-icon wm-sl-l sl-time", "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          isDateOpen && !isCurrentDate && /* @__PURE__ */ jsx(
+            DatePicker,
+            {
+              open: isDateOpen,
+              onClose: handleDateClose,
+              onAccept: handleDateAccept,
+              value: localDateValue && isCurrentMonth ? moment(localDateValue) : null,
+              onViewChange: (view) => {
+                handleVeiwChange(view);
+              },
+              onChange: (newValue) => {
+                if (!newValue) return;
+                setLocalDateValue(newValue.toDate());
+                if (datePickerView === "day") {
+                  handleDateSelection(newValue.toDate());
+                }
+              },
+              onMonthChange: (newDate) => {
+                if (!localDateValue) return;
+                const isSameMonth = newDate.month() === moment(localDateValue).month();
+                setIsCurrentMonth(isSameMonth);
+              },
+              minDate: minDateObj ? moment(minDateObj) : void 0,
+              maxDate: maxDateObj ? moment(maxDateObj) : void 0,
+              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: (() => {
+                    const actions = [];
+                    if (todaybutton) actions.push("today");
+                    if (clearbutton) actions.push("clear");
+                    return actions;
+                  })(),
+                  onClick: (event) => {
+                    var _a2;
+                    const target = event.target;
+                    const action = target.getAttribute("data-action") || ((_a2 = target.textContent) == null ? void 0 : _a2.toLowerCase());
+                    if (action === "today") handleToday();
+                    if (action === "clear") handleClear();
+                  },
+                  className: "wm-datetime-datepicker-action-bar"
+                }
+              },
+              views: ["year", "month", "day"],
+              displayWeekNumber: showweeks
+            }
+          ),
+          isTimeOpen && !isCurrentDate && /* @__PURE__ */ jsx(
+            TimePicker,
+            {
+              open: isTimeOpen,
+              onClose: handleTimeClose,
+              onAccept: handleTimeAccept,
+              value: tempDateValue ? moment(tempDateValue) : moment(),
+              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
+            }
+          )
+        ]
+      }
+    );
+  },
+  (prev, next) => {
+    const 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((key) => {
+      return compare(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);
+const withForm = withBaseDateTime(withFormController(WmDateTime));
+const WmDateTimeStandalone = withStandalone(withForm);
+var datetime_default = withBaseWrapper(withForm);
+export {
+  WmDateTimeStandalone as WmDatetime,
+  datetime_default as default
+};