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

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

@@ -0,0 +1,606 @@
+"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.WmDate = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _material = require("@mui/material");
+var _BaseDateTime = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/BaseDateTime"));
+var _utils = require("./utils");
+var _DatePickerPopover = _interopRequireDefault(require("./components/DatePickerPopover"));
+var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
+var _button = require("@wavemaker-ai/react-runtime/components/form/button");
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _excluded = ["name", "hint", "shortcutkey", "datavalue", "width", "arialabel", "invokeOnChange", "handleKeyDown", "getDateObj", "updatePrevDatavalue", "updateBoundVariable", "onChange", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onBeforeload", "placeholder", "tabindex", "datepattern", "outputformat", "defaultDateFormat", "selectedLocale", "required", "excludedays", "excludedates", "showweeks", "showbuttonbar", "autofocus", "readonly", "disabled", "showdropdownon", "adaptiveposition", "selectfromothermonth", "todaybutton", "clearbutton", "todaybuttonlabel", "clearbuttonlabel", "showcustompicker", "showdateformatasplaceholder", "viewmode", "dataentrymode", "listener", "className", "styles", "validators", "validationmessage"];
+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; }
+// Types
+
+// Main Component
+var WmDate = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _listener$localeForma2;
+  // Merge props with defaults
+  var name = props.name,
+    hint = props.hint,
+    shortcutkey = props.shortcutkey,
+    datavalue = props.datavalue,
+    width = props.width,
+    arialabel = props.arialabel,
+    invokeOnChange = props.invokeOnChange,
+    handleKeyDown = props.handleKeyDown,
+    _props$getDateObj = props.getDateObj,
+    _getDateObj = _props$getDateObj === void 0 ? _utils.defaultGetDateObj : _props$getDateObj,
+    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,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Select Date" : _props$placeholder,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    datepatternProp = props.datepattern,
+    _props$outputformat = props.outputformat,
+    outputformat = _props$outputformat === void 0 ? "yyyy-MM-dd" : _props$outputformat,
+    defaultDateFormat = props.defaultDateFormat,
+    selectedLocale = props.selectedLocale,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$excludedays = props.excludedays,
+    excludedays = _props$excludedays === void 0 ? "" : _props$excludedays,
+    _props$excludedates = props.excludedates,
+    excludedates = _props$excludedates === void 0 ? "" : _props$excludedates,
+    _props$showweeks = props.showweeks,
+    showweeks = _props$showweeks === void 0 ? false : _props$showweeks,
+    _props$showbuttonbar = props.showbuttonbar,
+    showbuttonbar = _props$showbuttonbar === void 0 ? true : _props$showbuttonbar,
+    _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$showdropdownon = props.showdropdownon,
+    showdropdownon = _props$showdropdownon === void 0 ? "default" : _props$showdropdownon,
+    _props$adaptivepositi = props.adaptiveposition,
+    adaptiveposition = _props$adaptivepositi === void 0 ? true : _props$adaptivepositi,
+    _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$todaybuttonlab = props.todaybuttonlabel,
+    todaybuttonlabel = _props$todaybuttonlab === void 0 ? "Today" : _props$todaybuttonlab,
+    _props$clearbuttonlab = props.clearbuttonlabel,
+    clearbuttonlabel = _props$clearbuttonlab === void 0 ? "Clear" : _props$clearbuttonlab,
+    _props$showcustompick = props.showcustompicker,
+    showcustompicker = _props$showcustompick === void 0 ? false : _props$showcustompick,
+    _props$showdateformat = props.showdateformatasplaceholder,
+    showdateformatasplaceholder = _props$showdateformat === void 0 ? false : _props$showdateformat,
+    _props$viewmode = props.viewmode,
+    viewmode = _props$viewmode === void 0 ? "day" : _props$viewmode,
+    _props$dataentrymode = props.dataentrymode,
+    dataentrymode = _props$dataentrymode === void 0 ? "default" : _props$dataentrymode,
+    listener = props.listener,
+    className = props.className,
+    styles = props.styles,
+    _props$validators = props.validators,
+    validators = _props$validators === void 0 ? [] : _props$validators,
+    validationmessage = props.validationmessage,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useMemo = (0, _react.useMemo)(function () {
+      var _listener$localeForma;
+      return [defaultDateFormat || (listener === null || listener === void 0 || (_listener$localeForma = listener.localeFormats) === null || _listener$localeForma === void 0 ? void 0 : _listener$localeForma.date) || "MMM d, y", selectedLocale || (listener === null || listener === void 0 ? void 0 : listener.selectedLocale) || "en"];
+    }, [defaultDateFormat, selectedLocale, listener === null || listener === void 0 || (_listener$localeForma2 = listener.localeFormats) === null || _listener$localeForma2 === void 0 ? void 0 : _listener$localeForma2.date, listener === null || listener === void 0 ? void 0 : listener.selectedLocale]),
+    resolvedDateFormat = _useMemo[0],
+    currentLocale = _useMemo[1];
+  var datepattern = (0, _react.useMemo)(function () {
+    return datepatternProp !== null && datepatternProp !== void 0 ? datepatternProp : resolvedDateFormat;
+  }, [datepatternProp, resolvedDateFormat]);
+
+  // State
+  var _useState = (0, _react.useState)(false),
+    showPicker = _useState[0],
+    setShowPicker = _useState[1];
+  var _useState2 = (0, _react.useState)(""),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    anchorEl = _useState3[0],
+    setAnchorEl = _useState3[1];
+  var _useState4 = (0, _react.useState)(false),
+    invalidDateTimeFormat = _useState4[0],
+    setInvalidDateTimeFormat = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    dateNotInRange = _useState5[0],
+    setDateNotInRange = _useState5[1];
+  var _useState6 = (0, _react.useState)(""),
+    validationFailureMessage = _useState6[0],
+    setValidationFailureMessage = _useState6[1];
+  var _useState7 = (0, _react.useState)(viewmode),
+    calendarViewMode = _useState7[0],
+    setCalendarViewMode = _useState7[1];
+  var _useState8 = (0, _react.useState)((0, _momentTimezone["default"])()),
+    calendarDate = _useState8[0],
+    setCalendarDate = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
+    selectedDate = _useState9[0],
+    setSelectedDate = _useState9[1];
+  var _useState0 = (0, _react.useState)(false),
+    isCurrentDate = _useState0[0],
+    setIsCurrentDate = _useState0[1];
+
+  // Refs
+  var datepickerRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var onBeforeloadExecutedRef = (0, _react.useRef)(false);
+
+  // Memoized values
+  var excludedDaysToDisable = (0, _react.useMemo)(function () {
+    return (0, _utils.parseExcludedDays)(excludedays);
+  }, [excludedays]);
+  var excludedDatesToDisable = (0, _react.useMemo)(function () {
+    return (0, _utils.parseExcludedDates)(excludedates, _getDateObj);
+  }, [excludedates, _getDateObj]);
+  var dateValue = (0, _react.useMemo)(function () {
+    if (datavalue === "CURRENT_DATE") {
+      setIsCurrentDate(true);
+    }
+    return _getDateObj(datavalue);
+  }, [datavalue, _getDateObj]);
+
+  // Parse min/max dates
+  var minDateObj = (0, _react.useMemo)(function () {
+    return restProps.mindate ? _getDateObj(restProps.mindate) : null;
+  }, [restProps.mindate, _getDateObj]);
+  var maxDateObj = (0, _react.useMemo)(function () {
+    return restProps.maxdate ? _getDateObj(restProps.maxdate) : null;
+  }, [restProps.maxdate, _getDateObj]);
+
+  // Unified validation function - handles both validation messages and UI disabling
+  var validateDateWithProps = (0, _react.useCallback)(function (date) {
+    if (!date) return true;
+    var validation = (0, _utils.validateDate)(date, minDateObj, maxDateObj, excludedDaysToDisable, excludedDatesToDisable, validators, validationmessage);
+    setDateNotInRange(validation.isOutOfRange);
+    setValidationFailureMessage(validation.validationMessage || "");
+    setInvalidDateTimeFormat(false);
+    return validation.isValid;
+  }, [minDateObj, maxDateObj, excludedDaysToDisable, excludedDatesToDisable, validators, validationmessage]);
+
+  // Function for calendar UI - returns boolean for disabling dates
+  var isDateDisabled = (0, _react.useCallback)(function (date) {
+    if (!(date !== null && date !== void 0 && date.isValid())) return false;
+    var validation = (0, _utils.validateDate)(date, minDateObj, maxDateObj, excludedDaysToDisable, excludedDatesToDisable, validators, validationmessage);
+    return validation.isDisabled || false;
+  }, [minDateObj, maxDateObj, excludedDaysToDisable, excludedDatesToDisable, validators, validationmessage]);
+  var isNavigationDisabled = (0, _react.useMemo)(function () {
+    if (!restProps.mindate || !restProps.maxdate) return false;
+    var minMoment = (0, _momentTimezone["default"])(_getDateObj(restProps.mindate));
+    var maxMoment = (0, _momentTimezone["default"])(_getDateObj(restProps.maxdate));
+    return minMoment.isValid() && maxMoment.isValid() && minMoment.isSame(maxMoment, "day");
+  }, [restProps.mindate, restProps.maxdate, _getDateObj]);
+  var shouldOpenOnInput = showdropdownon === "default" || dataentrymode === "picker" && showdropdownon !== "button";
+
+  // Computed values
+  var getDisplayValue = (0, _react.useCallback)(function () {
+    if (!dateValue) return "";
+    try {
+      // Use moment with current locale for proper localization
+      var momentDate = (0, _momentTimezone["default"])(dateValue).locale(currentLocale);
+      var momentPattern = (0, _utils.convertToMomentFormat)(datepattern);
+      return momentDate.format(momentPattern);
+    } catch (_unused) {
+      return "";
+    }
+  }, [dateValue, datepattern, currentLocale]);
+  var getPlaceholderText = (0, _react.useCallback)(function () {
+    return showdateformatasplaceholder ? datepattern.toUpperCase() : placeholder;
+  }, [showdateformatasplaceholder, datepattern, placeholder]);
+
+  // Effects
+  (0, _react.useEffect)(function () {
+    if (invalidDateTimeFormat) return;
+    var displayValue = getDisplayValue();
+    setInputValue(displayValue);
+    if (dateValue) {
+      var momentDateValue = (0, _momentTimezone["default"])(dateValue);
+      setSelectedDate(momentDateValue);
+      setCalendarDate(momentDateValue);
+      if (listener !== null && listener !== void 0 && listener.onChange) {
+        listener.onChange(name || props.fieldName, {
+          displayValue: displayValue,
+          datavalue: (0, _utils.formatDate)(momentDateValue.toDate(), outputformat),
+          timestamp: (0, _utils.formatDate)(momentDateValue.toDate(), "timestamp")
+        });
+      }
+    } else if (props.maxdate) {
+      var maxDate = (0, _momentTimezone["default"])(props.maxdate);
+
+      // Get the current date
+      var currentDate = (0, _momentTimezone["default"])();
+      // If maxDate is valid and less than current date, set to maxDate
+      if (maxDate.isValid() && maxDate.isBefore(currentDate)) {
+        setSelectedDate(maxDate);
+        setCalendarDate(maxDate);
+      }
+    } else {
+      setSelectedDate(null);
+      setCalendarDate((0, _momentTimezone["default"])());
+    }
+  }, [dateValue, getDisplayValue, datavalue, props.maxdate]);
+  (0, _react.useEffect)(function () {
+    if (autofocus && inputRef.current) {
+      var timer = setTimeout(function () {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }, 0);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [autofocus]);
+  (0, _react.useEffect)(function () {
+    setCalendarViewMode(viewmode);
+  }, [viewmode]);
+
+  // Update input value when locale changes
+  (0, _react.useEffect)(function () {
+    if (dateValue && !invalidDateTimeFormat) {
+      var newDisplayValue = getDisplayValue();
+      setInputValue(newDisplayValue);
+
+      // Update listener widget display value if it exists
+      if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
+        listener.Widgets[name].displayValue = newDisplayValue;
+      }
+    }
+  }, [currentLocale, getDisplayValue, dateValue, name, invalidDateTimeFormat]);
+
+  // Call onBeforeload callback on component mount
+  (0, _react.useEffect)(function () {
+    var _props$listener;
+    if (onBeforeload && name && (_props$listener = props.listener) !== null && _props$listener !== void 0 && (_props$listener = _props$listener.Widgets) !== null && _props$listener !== void 0 && _props$listener[name] && !onBeforeloadExecutedRef.current) {
+      var _props$listener2;
+      var syntheticEvent = {};
+      onBeforeload(syntheticEvent, (_props$listener2 = props.listener) === null || _props$listener2 === void 0 || (_props$listener2 = _props$listener2.Widgets) === null || _props$listener2 === void 0 ? void 0 : _props$listener2[name]);
+      onBeforeloadExecutedRef.current = true;
+    }
+  }, [onBeforeload, name]);
+
+  // Event Handlers
+  var handleOpen = (0, _react.useCallback)(function (event) {
+    if (disabled || readonly) return;
+    setAnchorEl(event.currentTarget);
+    setShowPicker(true);
+    var targetDate = selectedDate !== null && selectedDate !== void 0 && selectedDate.isValid() ? selectedDate : dateValue ? (0, _momentTimezone["default"])(dateValue) : (0, _momentTimezone["default"])();
+    setCalendarDate(targetDate);
+    if (dateValue && !selectedDate) {
+      setSelectedDate((0, _momentTimezone["default"])(dateValue));
+    }
+    setCalendarViewMode(viewmode === "month" ? "month" : viewmode);
+  }, [disabled, readonly, selectedDate, dateValue, viewmode]);
+  var clearDateValue = (0, _react.useCallback)(function (invokeOnChange, updatePrevDatavalue, updateBoundVariable, setInputValue, setSelectedDate, setInvalidDateTimeFormat, setDateNotInRange) {
+    var oldValue = inputValue;
+    invokeOnChange === null || invokeOnChange === void 0 || invokeOnChange("");
+    updatePrevDatavalue === null || updatePrevDatavalue === void 0 || updatePrevDatavalue("");
+    updateBoundVariable === null || updateBoundVariable === void 0 || updateBoundVariable("");
+    setInputValue === null || setInputValue === void 0 || setInputValue("");
+    setSelectedDate === null || setSelectedDate === void 0 || setSelectedDate(null);
+    setInvalidDateTimeFormat === null || setInvalidDateTimeFormat === void 0 || setInvalidDateTimeFormat(false);
+    setDateNotInRange === null || setDateNotInRange === void 0 || setDateNotInRange(false);
+    setValidationFailureMessage === null || setValidationFailureMessage === void 0 || setValidationFailureMessage("");
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.fieldName || name, _objectSpread(_objectSpread({}, props), {}, {
+        datavalue: "",
+        timestamp: null
+      }));
+    }
+    if (onChange && name && (listener !== null && listener !== void 0 && listener.Widgets[name] || props.standalone)) {
+      onChange({}, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], "", oldValue);
+    }
+  }, [name, onChange, props, inputValue]);
+  var handleDateSelection = function handleDateSelection(date) {
+    var shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var dateObj = date.toDate();
+    if (!validateDateWithProps(dateObj)) {
+      return;
+    }
+    setDateNotInRange(false);
+    setInvalidDateTimeFormat(false);
+    setValidationFailureMessage("");
+    setSelectedDate(date.clone());
+    updateDateValue(date);
+    setCalendarDate(date);
+    if (shouldClose) {
+      handleClose();
+    }
+  };
+  var handleValidationError = function handleValidationError(errorType) {
+    var isRequired = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (errorType === "dateNotInRange") {
+      setDateNotInRange(true);
+      setValidationFailureMessage(validationmessage || "Date not in range");
+    } else if (errorType === "invalidFormat" && isRequired) {
+      setInvalidDateTimeFormat(true);
+      setValidationFailureMessage(validationmessage || "Invalid date format");
+    }
+  };
+  var handleClose = (0, _react.useCallback)(function () {
+    setAnchorEl(null);
+    setShowPicker(false);
+    setTimeout(function () {
+      if (inputRef.current && !disabled && !readonly) {
+        inputRef.current.focus();
+      }
+    }, 0);
+  }, [disabled, readonly]);
+  var updateDateValue = (0, _react.useCallback)(function (date) {
+    var outputValue = (0, _utils.formatDate)(date.toDate(), outputformat);
+    // Use locale-aware formatting for display value
+    var displayValue = (0, _momentTimezone["default"])(date.toDate()).locale(currentLocale).format((0, _utils.convertToMomentFormat)(datepattern));
+    invokeOnChange === null || invokeOnChange === void 0 || invokeOnChange(outputValue);
+    updatePrevDatavalue === null || updatePrevDatavalue === void 0 || updatePrevDatavalue(outputValue);
+    updateBoundVariable === null || updateBoundVariable === void 0 || updateBoundVariable(outputValue);
+    setInputValue(displayValue);
+    var oldValue = inputValue;
+    if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
+      listener.Widgets[name].displayValue = displayValue;
+    }
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.fieldName || name, _objectSpread(_objectSpread({}, props), {}, {
+        datavalue: outputValue,
+        timestamp: (0, _utils.formatDate)(date.toDate(), "timestamp")
+      }));
+    }
+    if (onChange && name && (listener !== null && listener !== void 0 && listener.Widgets[name] || props.standalone)) {
+      onChange({}, name && (listener === null || listener === void 0 ? void 0 : listener.Widgets[name]), outputValue, oldValue);
+    }
+  }, [outputformat, datepattern, currentLocale, invokeOnChange, updatePrevDatavalue, updateBoundVariable, inputValue, props.formfield, name, onChange, listener]);
+  var handleCalendarChange = (0, _react.useCallback)(function (date) {
+    if (!(date !== null && date !== void 0 && date.isValid())) return;
+    setCalendarDate(date);
+    var isMonthOrYearView = viewmode === "month" || viewmode === "year";
+    if (!isMonthOrYearView) {
+      var dateObj = date.toDate();
+      if (!validateDateWithProps(dateObj)) {
+        return;
+      }
+    }
+    handleDateSelection(date, true);
+  }, [viewmode, validateDateWithProps, handleDateSelection]);
+  var handleMonthChange = (0, _react.useCallback)(function (value) {
+    if (!(value !== null && value !== void 0 && value.isValid())) return;
+    if (viewmode === "month") {
+      handleCalendarChange(value);
+    } else {
+      var newDate = calendarDate.clone().month(value.month()).year(value.year());
+      setCalendarDate(newDate);
+      setCalendarViewMode("day");
+    }
+  }, [viewmode, calendarDate, handleCalendarChange]);
+  var handleYearChange = (0, _react.useCallback)(function (value) {
+    if (!(value !== null && value !== void 0 && value.isValid())) return;
+    if (viewmode === "year") {
+      handleCalendarChange(value);
+    } else if (viewmode === "month") {
+      var newDate = calendarDate.clone().year(value.year());
+      setCalendarDate(newDate);
+      setCalendarViewMode("month");
+    } else {
+      var _newDate = calendarDate.clone().year(value.year());
+      setCalendarDate(_newDate);
+      setCalendarViewMode("month");
+    }
+  }, [viewmode, calendarDate, handleCalendarChange]);
+  var handleInputChange = (0, _react.useCallback)(function (event) {
+    if (dataentrymode === "picker") return;
+    var value = event.target.value;
+    setInputValue(value);
+    if (!value) {
+      clearDateValue(invokeOnChange, updatePrevDatavalue, updateBoundVariable, undefined, setSelectedDate, setInvalidDateTimeFormat, setDateNotInRange);
+      return;
+    }
+    var parsedDate = datepattern === "timestamp" ? (0, _momentTimezone["default"])(parseInt(value, 10)) : (0, _momentTimezone["default"])(value, (0, _utils.convertToMomentFormat)(datepattern), true);
+    if (!parsedDate.isValid()) {
+      handleValidationError("invalidFormat", props.required);
+      if (onChange && name && (listener !== null && listener !== void 0 && listener.Widgets[name] || props.standalone) && props.formfield) {
+        onChange({}, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], value, inputValue);
+      }
+      return;
+    }
+    setInvalidDateTimeFormat(false);
+    var dateObj = parsedDate.toDate();
+    if (!validateDateWithProps(dateObj)) {
+      if (onChange && name && (listener !== null && listener !== void 0 && listener.Widgets[name] || props.standalone) && props.formfield) {
+        onChange({}, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], value, inputValue);
+      }
+      return;
+    }
+    handleDateSelection(parsedDate, false);
+  }, [dataentrymode, datepattern, validateDateWithProps, invokeOnChange, updatePrevDatavalue, updateBoundVariable, inputValue]);
+  var handleInputKeyDown = (0, _react.useCallback)(function (event) {
+    var allowedKeys = ["Tab", "Escape", "Enter", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+    if (dataentrymode === "picker" && !allowedKeys.includes(event.key)) {
+      event.preventDefault();
+      return;
+    }
+    handleKeyDown === null || handleKeyDown === void 0 || handleKeyDown(event);
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        if (!inputValue) {
+          clearDateValue(invokeOnChange, updatePrevDatavalue, updateBoundVariable, undefined, setSelectedDate, undefined, undefined);
+          return;
+        }
+        var parsedDate = (0, _momentTimezone["default"])(inputValue, datepattern, true);
+        if (parsedDate.isValid()) {
+          var dateObj = parsedDate.toDate();
+          if (!validateDateWithProps(dateObj)) {
+            return;
+          }
+          handleCalendarChange(parsedDate);
+        } else {
+          handleValidationError("invalidFormat", props.required);
+        }
+        break;
+      case "Escape":
+        handleClose();
+        break;
+      case "Tab":
+        if (showPicker) handleClose();
+        break;
+    }
+  }, [dataentrymode, datepattern, inputValue, showPicker, handleKeyDown, handleCalendarChange, handleClose, validateDateWithProps, invokeOnChange, updatePrevDatavalue, updateBoundVariable]);
+  var handleTodayClick = (0, _react.useCallback)(function () {
+    handleCalendarChange((0, _momentTimezone["default"])());
+  }, [handleCalendarChange]);
+  var handleClearClick = (0, _react.useCallback)(function () {
+    clearDateValue(invokeOnChange, updatePrevDatavalue, updateBoundVariable, setInputValue, setSelectedDate, undefined, undefined);
+    handleClose();
+  }, [invokeOnChange, updatePrevDatavalue, updateBoundVariable, handleClose]);
+  var handleIconButtonClick = (0, _react.useCallback)(function (event) {
+    if (!disabled && !readonly && event) {
+      handleOpen(event);
+    }
+  }, [disabled, readonly, handleOpen]);
+  var handleInputClick = (0, _react.useCallback)(function (event) {
+    if (onClick && name) {
+      onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+    if (shouldOpenOnInput && !readonly && !disabled) {
+      handleIconButtonClick(event);
+    }
+  }, [shouldOpenOnInput, readonly, disabled, handleIconButtonClick]);
+
+  // Render
+  return __jsx(_material.Box, (0, _extends2["default"])({
+    className: "ng-pristine ng-valid app-date input-group ng-touched ".concat(className),
+    ref: datepickerRef,
+    style: _objectSpread(_objectSpread({}, (0, _utils.getWidthStyle)(width)), styles),
+    title: hint,
+    hidden: props.hidden
+  }, readonly && {
+    readOnly: true
+  }, disabled && {
+    disabled: true
+  }), __jsx(_material.TextField, {
+    inputRef: inputRef,
+    fullWidth: true,
+    placeholder: getPlaceholderText(),
+    disabled: disabled || readonly,
+    "aria-readonly": readonly,
+    error: Boolean(validationFailureMessage || invalidDateTimeFormat || dateNotInRange),
+    helperText: validationFailureMessage || (invalidDateTimeFormat ? "Invalid date format" : dateNotInRange ? "Date not in valid range" : ""),
+    slotProps: {
+      htmlInput: {
+        "aria-label": arialabel || "Date input ".concat(getPlaceholderText()),
+        tabIndex: tabindex,
+        accessKey: shortcutkey,
+        "aria-invalid": validationFailureMessage || invalidDateTimeFormat || dateNotInRange,
+        readOnly: readonly || dataentrymode === "picker",
+        required: required,
+        autoFocus: autofocus,
+        name: name,
+        className: "form-control app-textbox app-dateinput display-input",
+        style: _objectSpread({}, (0, _utils.getWidthStyle)(width)),
+        onMouseEnter: function onMouseEnter(event) {
+          return _onMouseEnter && name && _onMouseEnter(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+        },
+        onMouseLeave: function onMouseLeave(event) {
+          return _onMouseLeave && name && _onMouseLeave(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+        }
+      }
+    },
+    InputProps: {
+      endAdornment: __jsx(_material.Box, {
+        component: "span",
+        className: "input-group-btn"
+      }, __jsx(_button.WmButton, {
+        type: "button",
+        className: "btn btn-default btn-time",
+        tabindex: tabindex,
+        disabled: disabled || readonly,
+        "aria-label": inputValue ? "Change Date ".concat(inputValue) : "Choose date by pressing enter",
+        "aria-haspopup": "true",
+        "aria-expanded": showPicker,
+        onClick: handleIconButtonClick
+      }, __jsx(_material.Box, {
+        component: "i",
+        "aria-hidden": "true",
+        className: "app-icon wm-sl-l sl-calendar"
+      })))
+    },
+    value: inputValue,
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown,
+    onClick: handleInputClick,
+    onFocus: function onFocus(event) {
+      return _onFocus && name && _onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    },
+    onBlur: function onBlur(event) {
+      return _onBlur && name && _onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    },
+    style: (0, _utils.getWidthStyle)(width)
+  }), showPicker && __jsx(_DatePickerPopover["default"], {
+    open: showPicker,
+    anchorEl: anchorEl,
+    onClose: handleClose,
+    adaptiveposition: adaptiveposition,
+    showbuttonbar: showbuttonbar,
+    todaybutton: todaybutton,
+    clearbutton: clearbutton,
+    todaybuttonlabel: todaybuttonlabel,
+    clearbuttonlabel: clearbuttonlabel,
+    isNavigationDisabled: isNavigationDisabled,
+    restProps: restProps,
+    getDateObj: function getDateObj(date) {
+      return _getDateObj(date !== null && date !== void 0 ? date : null);
+    },
+    viewmode: viewmode,
+    calendarViewMode: calendarViewMode,
+    calendarDate: calendarDate,
+    selectedDate: selectedDate,
+    selectfromothermonth: selectfromothermonth,
+    showweeks: showweeks,
+    isDateDisabled: isDateDisabled,
+    handleYearChange: handleYearChange,
+    handleMonthChange: handleMonthChange,
+    handleCalendarChange: handleCalendarChange,
+    setCalendarViewMode: setCalendarViewMode,
+    setCalendarDate: setCalendarDate,
+    handleTodayClick: handleTodayClick,
+    handleClearClick: handleClearClick,
+    selectedLocale: currentLocale
+  }));
+});
+WmDate.displayName = "WmDate";
+var WithFormController = (0, _withFormController["default"])(WmDate);
+
+// @ts-expect-error baseDatetime is valid schenaio
+var WmDateStandalone = exports.WmDate = (0, _withStandalone["default"])((0, _BaseDateTime["default"])(WithFormController));
+/**
+ * The WmDate component provides a date picker input with calendar popup and formatting.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-date--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-date--docs)
+ *
+ * @param props - {@link WmDateProps}
+ */
+// @ts-expect-error baseDatetime is valid schenaio
+var _default = exports["default"] = (0, _withBaseWrapper["default"])((0, _BaseDateTime["default"])(WithFormController));