@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

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

@@ -1,322 +1,364 @@
-"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 () {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from "react";
+import moment from "moment-timezone";
+import { TextField, Box } from "@mui/material";
+import withBaseDateTime from "../../../../higherOrder/BaseDateTime";
+import {
+  convertToMomentFormat,
+  formatDate,
+  parseExcludedDays,
+  parseExcludedDates,
+  defaultGetDateObj,
+  getWidthStyle,
+  validateDate
+} from "./utils";
+import DatePickerPopover from "./components/DatePickerPopover";
+import withFormController from "../../../data/form/form-controller/withFormController";
+import { WmButton } from "../../../form/button";
+import withStandalone from "../../../../higherOrder/withStandalone";
+import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
+const WmDate = forwardRef((props, ref) => {
+  var _b;
+  const _a = props, {
+    name,
+    hint,
+    shortcutkey,
+    datavalue,
+    width,
+    arialabel,
+    invokeOnChange,
+    handleKeyDown,
+    getDateObj = defaultGetDateObj,
+    updatePrevDatavalue,
+    updateBoundVariable,
+    onChange,
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseEnter,
+    onMouseLeave,
+    onBeforeload,
+    placeholder = "Select Date",
+    tabindex = 0,
+    datepattern: datepatternProp,
+    outputformat = "yyyy-MM-dd",
+    defaultDateFormat,
+    selectedLocale,
+    required = false,
+    excludedays = "",
+    excludedates = "",
+    showweeks = false,
+    showbuttonbar = true,
+    autofocus = false,
+    readonly = false,
+    disabled = false,
+    showdropdownon = "default",
+    adaptiveposition = true,
+    selectfromothermonth = true,
+    todaybutton = true,
+    clearbutton = true,
+    todaybuttonlabel = "Today",
+    clearbuttonlabel = "Clear",
+    showcustompicker = false,
+    showdateformatasplaceholder = false,
+    viewmode = "day",
+    dataentrymode = "default",
+    listener,
+    className,
+    styles,
+    validators = [],
+    validationmessage
+  } = _a, restProps = __objRest(_a, [
+    "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"
+  ]);
+  const [resolvedDateFormat, currentLocale] = useMemo(
+    () => {
+      var _a2;
+      return [
+        defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "MMM d, y",
+        selectedLocale || (listener == null ? void 0 : listener.selectedLocale) || "en"
+      ];
+    },
+    [defaultDateFormat, selectedLocale, (_b = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _b.date, listener == null ? void 0 : listener.selectedLocale]
+  );
+  const datepattern = useMemo(
+    () => datepatternProp != null ? datepatternProp : resolvedDateFormat,
+    [datepatternProp, resolvedDateFormat]
+  );
+  const [showPicker, setShowPicker] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [invalidDateTimeFormat, setInvalidDateTimeFormat] = useState(false);
+  const [dateNotInRange, setDateNotInRange] = useState(false);
+  const [validationFailureMessage, setValidationFailureMessage] = useState("");
+  const [calendarViewMode, setCalendarViewMode] = useState(
+    viewmode
+  );
+  const [calendarDate, setCalendarDate] = useState(moment());
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [isCurrentDate, setIsCurrentDate] = useState(false);
+  const datepickerRef = useRef(null);
+  const inputRef = useRef(null);
+  const onBeforeloadExecutedRef = useRef(false);
+  const excludedDaysToDisable = useMemo(() => parseExcludedDays(excludedays), [excludedays]);
+  const excludedDatesToDisable = useMemo(
+    () => parseExcludedDates(excludedates, getDateObj),
+    [excludedates, getDateObj]
+  );
+  const dateValue = useMemo(() => {
     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 () {
+    return getDateObj(datavalue);
+  }, [datavalue, getDateObj]);
+  const minDateObj = useMemo(() => {
+    return restProps.mindate ? getDateObj(restProps.mindate) : null;
+  }, [restProps.mindate, getDateObj]);
+  const maxDateObj = useMemo(() => {
+    return restProps.maxdate ? getDateObj(restProps.maxdate) : null;
+  }, [restProps.maxdate, getDateObj]);
+  const validateDateWithProps = useCallback(
+    (date) => {
+      if (!date) return true;
+      const validation = 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
+    ]
+  );
+  const isDateDisabled = useCallback(
+    (date) => {
+      if (!(date == null ? void 0 : date.isValid())) return false;
+      const validation = validateDate(
+        date,
+        minDateObj,
+        maxDateObj,
+        excludedDaysToDisable,
+        excludedDatesToDisable,
+        validators,
+        validationmessage
+      );
+      return validation.isDisabled || false;
+    },
+    [
+      minDateObj,
+      maxDateObj,
+      excludedDaysToDisable,
+      excludedDatesToDisable,
+      validators,
+      validationmessage
+    ]
+  );
+  const isNavigationDisabled = useMemo(() => {
     if (!restProps.mindate || !restProps.maxdate) return false;
-    var minMoment = (0, _momentTimezone["default"])(_getDateObj(restProps.mindate));
-    var maxMoment = (0, _momentTimezone["default"])(_getDateObj(restProps.maxdate));
+    const minMoment = moment(getDateObj(restProps.mindate));
+    const maxMoment = moment(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 () {
+  }, [restProps.mindate, restProps.maxdate, getDateObj]);
+  const shouldOpenOnInput = showdropdownon === "default" || dataentrymode === "picker" && showdropdownon !== "button";
+  const getDisplayValue = useCallback(() => {
     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);
+      const momentDate = moment(dateValue).locale(currentLocale);
+      const momentPattern = convertToMomentFormat(datepattern);
       return momentDate.format(momentPattern);
-    } catch (_unused) {
+    } catch (e) {
       return "";
     }
   }, [dateValue, datepattern, currentLocale]);
-  var getPlaceholderText = (0, _react.useCallback)(function () {
+  const getPlaceholderText = useCallback(() => {
     return showdateformatasplaceholder ? datepattern.toUpperCase() : placeholder;
   }, [showdateformatasplaceholder, datepattern, placeholder]);
-
-  // Effects
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (invalidDateTimeFormat) return;
-    var displayValue = getDisplayValue();
+    const displayValue = getDisplayValue();
     setInputValue(displayValue);
     if (dateValue) {
-      var momentDateValue = (0, _momentTimezone["default"])(dateValue);
+      const momentDateValue = moment(dateValue);
       setSelectedDate(momentDateValue);
       setCalendarDate(momentDateValue);
-      if (listener !== null && listener !== void 0 && listener.onChange) {
+      if (listener == null ? 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")
+          displayValue,
+          datavalue: formatDate(momentDateValue.toDate(), outputformat),
+          timestamp: 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
+      const maxDate = moment(props.maxdate);
+      const currentDate = moment();
       if (maxDate.isValid() && maxDate.isBefore(currentDate)) {
         setSelectedDate(maxDate);
         setCalendarDate(maxDate);
       }
     } else {
       setSelectedDate(null);
-      setCalendarDate((0, _momentTimezone["default"])());
+      setCalendarDate(moment());
     }
   }, [dateValue, getDisplayValue, datavalue, props.maxdate]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     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();
+      const timer = setTimeout(() => {
+        var _a2;
+        return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
       }, 0);
-      return function () {
-        return clearTimeout(timer);
-      };
+      return () => clearTimeout(timer);
     }
   }, [autofocus]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     setCalendarViewMode(viewmode);
   }, [viewmode]);
-
-  // Update input value when locale changes
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (dateValue && !invalidDateTimeFormat) {
-      var newDisplayValue = getDisplayValue();
+      const newDisplayValue = getDisplayValue();
       setInputValue(newDisplayValue);
-
-      // Update listener widget display value if it exists
-      if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
+      if (name && (listener == null ? 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]);
+  useEffect(() => {
+    var _a2, _b2, _c, _d;
+    if (onBeforeload && name && ((_b2 = (_a2 = props.listener) == null ? void 0 : _a2.Widgets) == null ? void 0 : _b2[name]) && !onBeforeloadExecutedRef.current) {
+      const syntheticEvent = {};
+      onBeforeload(syntheticEvent, (_d = (_c = props.listener) == null ? void 0 : _c.Widgets) == null ? void 0 : _d[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();
+  const handleOpen = useCallback(
+    (event) => {
+      if (disabled || readonly) return;
+      setAnchorEl(event.currentTarget);
+      setShowPicker(true);
+      const targetDate = (selectedDate == null ? void 0 : selectedDate.isValid()) ? selectedDate : dateValue ? moment(dateValue) : moment();
+      setCalendarDate(targetDate);
+      if (dateValue && !selectedDate) {
+        setSelectedDate(moment(dateValue));
+      }
+      setCalendarViewMode(viewmode === "month" ? "month" : viewmode);
+    },
+    [disabled, readonly, selectedDate, dateValue, viewmode]
+  );
+  const clearDateValue = useCallback(
+    (invokeOnChange2, updatePrevDatavalue2, updateBoundVariable2, setInputValue2, setSelectedDate2, setInvalidDateTimeFormat2, setDateNotInRange2) => {
+      const oldValue = inputValue;
+      invokeOnChange2 == null ? void 0 : invokeOnChange2("");
+      updatePrevDatavalue2 == null ? void 0 : updatePrevDatavalue2("");
+      updateBoundVariable2 == null ? void 0 : updateBoundVariable2("");
+      setInputValue2 == null ? void 0 : setInputValue2("");
+      setSelectedDate2 == null ? void 0 : setSelectedDate2(null);
+      setInvalidDateTimeFormat2 == null ? void 0 : setInvalidDateTimeFormat2(false);
+      setDateNotInRange2 == null ? void 0 : setDateNotInRange2(false);
+      setValidationFailureMessage == null ? void 0 : setValidationFailureMessage("");
+      if (listener == null ? void 0 : listener.onChange) {
+        listener.onChange(props.fieldName || name, __spreadProps(__spreadValues({}, props), {
+          datavalue: "",
+          timestamp: null
+        }));
+      }
+      if (onChange && name && ((listener == null ? void 0 : listener.Widgets[name]) || props.standalone)) {
+        onChange({}, listener == null ? void 0 : listener.Widgets[name], "", oldValue);
+      }
+    },
+    [name, onChange, props, inputValue]
+  );
+  const handleDateSelection = (date, shouldClose = false) => {
+    const dateObj = date.toDate();
     if (!validateDateWithProps(dateObj)) {
       return;
     }
@@ -330,8 +372,7 @@ var WmDate = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       handleClose();
     }
   };
-  var handleValidationError = function handleValidationError(errorType) {
-    var isRequired = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const handleValidationError = (errorType, isRequired = false) => {
     if (errorType === "dateNotInRange") {
       setDateNotInRange(true);
       setValidationFailureMessage(validationmessage || "Date not in range");
@@ -340,267 +381,346 @@ var WmDate = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       setValidationFailureMessage(validationmessage || "Invalid date format");
     }
   };
-  var handleClose = (0, _react.useCallback)(function () {
+  const handleClose = useCallback(() => {
     setAnchorEl(null);
     setShowPicker(false);
-    setTimeout(function () {
+    setTimeout(() => {
       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;
+  const updateDateValue = useCallback(
+    (date) => {
+      const outputValue = formatDate(date.toDate(), outputformat);
+      const displayValue = moment(date.toDate()).locale(currentLocale).format(convertToMomentFormat(datepattern));
+      invokeOnChange == null ? void 0 : invokeOnChange(outputValue);
+      updatePrevDatavalue == null ? void 0 : updatePrevDatavalue(outputValue);
+      updateBoundVariable == null ? void 0 : updateBoundVariable(outputValue);
+      setInputValue(displayValue);
+      const oldValue = inputValue;
+      if (name && (listener == null ? void 0 : listener.Widgets[name])) {
+        listener.Widgets[name].displayValue = displayValue;
       }
-    }
-    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);
+      if (listener == null ? void 0 : listener.onChange) {
+        listener.onChange(props.fieldName || name, __spreadProps(__spreadValues({}, props), {
+          datavalue: outputValue,
+          timestamp: formatDate(date.toDate(), "timestamp")
+        }));
       }
-      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);
+      if (onChange && name && ((listener == null ? void 0 : listener.Widgets[name]) || props.standalone)) {
+        onChange(
+          {},
+          name && (listener == null ? void 0 : listener.Widgets[name]),
+          outputValue,
+          oldValue
+        );
       }
-      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);
+    },
+    [
+      outputformat,
+      datepattern,
+      currentLocale,
+      invokeOnChange,
+      updatePrevDatavalue,
+      updateBoundVariable,
+      inputValue,
+      props.formfield,
+      name,
+      onChange,
+      listener
+    ]
+  );
+  const handleCalendarChange = useCallback(
+    (date) => {
+      if (!(date == null ? void 0 : date.isValid())) return;
+      setCalendarDate(date);
+      const isMonthOrYearView = viewmode === "month" || viewmode === "year";
+      if (!isMonthOrYearView) {
+        const dateObj = date.toDate();
+        if (!validateDateWithProps(dateObj)) {
           return;
         }
-        var parsedDate = (0, _momentTimezone["default"])(inputValue, datepattern, true);
-        if (parsedDate.isValid()) {
-          var dateObj = parsedDate.toDate();
-          if (!validateDateWithProps(dateObj)) {
+      }
+      handleDateSelection(date, true);
+    },
+    [viewmode, validateDateWithProps, handleDateSelection]
+  );
+  const handleMonthChange = useCallback(
+    (value) => {
+      if (!(value == null ? void 0 : value.isValid())) return;
+      if (viewmode === "month") {
+        handleCalendarChange(value);
+      } else {
+        const newDate = calendarDate.clone().month(value.month()).year(value.year());
+        setCalendarDate(newDate);
+        setCalendarViewMode("day");
+      }
+    },
+    [viewmode, calendarDate, handleCalendarChange]
+  );
+  const handleYearChange = useCallback(
+    (value) => {
+      if (!(value == null ? void 0 : value.isValid())) return;
+      if (viewmode === "year") {
+        handleCalendarChange(value);
+      } else if (viewmode === "month") {
+        const newDate = calendarDate.clone().year(value.year());
+        setCalendarDate(newDate);
+        setCalendarViewMode("month");
+      } else {
+        const newDate = calendarDate.clone().year(value.year());
+        setCalendarDate(newDate);
+        setCalendarViewMode("month");
+      }
+    },
+    [viewmode, calendarDate, handleCalendarChange]
+  );
+  const handleInputChange = useCallback(
+    (event) => {
+      if (dataentrymode === "picker") return;
+      const value = event.target.value;
+      setInputValue(value);
+      if (!value) {
+        clearDateValue(
+          invokeOnChange,
+          updatePrevDatavalue,
+          updateBoundVariable,
+          void 0,
+          setSelectedDate,
+          setInvalidDateTimeFormat,
+          setDateNotInRange
+        );
+        return;
+      }
+      const parsedDate = datepattern === "timestamp" ? moment(parseInt(value, 10)) : moment(value, convertToMomentFormat(datepattern), true);
+      if (!parsedDate.isValid()) {
+        handleValidationError("invalidFormat", props.required);
+        if (onChange && name && ((listener == null ? void 0 : listener.Widgets[name]) || props.standalone) && props.formfield) {
+          onChange({}, listener == null ? void 0 : listener.Widgets[name], value, inputValue);
+        }
+        return;
+      }
+      setInvalidDateTimeFormat(false);
+      const dateObj = parsedDate.toDate();
+      if (!validateDateWithProps(dateObj)) {
+        if (onChange && name && ((listener == null ? void 0 : listener.Widgets[name]) || props.standalone) && props.formfield) {
+          onChange({}, listener == null ? void 0 : listener.Widgets[name], value, inputValue);
+        }
+        return;
+      }
+      handleDateSelection(parsedDate, false);
+    },
+    [
+      dataentrymode,
+      datepattern,
+      validateDateWithProps,
+      invokeOnChange,
+      updatePrevDatavalue,
+      updateBoundVariable,
+      inputValue
+    ]
+  );
+  const handleInputKeyDown = useCallback(
+    (event) => {
+      const allowedKeys = [
+        "Tab",
+        "Escape",
+        "Enter",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight"
+      ];
+      if (dataentrymode === "picker" && !allowedKeys.includes(event.key)) {
+        event.preventDefault();
+        return;
+      }
+      handleKeyDown == null ? void 0 : handleKeyDown(event);
+      switch (event.key) {
+        case "Enter":
+          event.preventDefault();
+          if (!inputValue) {
+            clearDateValue(
+              invokeOnChange,
+              updatePrevDatavalue,
+              updateBoundVariable,
+              void 0,
+              setSelectedDate,
+              void 0,
+              void 0
+            );
             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"])());
+          const parsedDate = moment(inputValue, datepattern, true);
+          if (parsedDate.isValid()) {
+            const 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
+    ]
+  );
+  const handleTodayClick = useCallback(() => {
+    handleCalendarChange(moment());
   }, [handleCalendarChange]);
-  var handleClearClick = (0, _react.useCallback)(function () {
-    clearDateValue(invokeOnChange, updatePrevDatavalue, updateBoundVariable, setInputValue, setSelectedDate, undefined, undefined);
+  const handleClearClick = useCallback(() => {
+    clearDateValue(
+      invokeOnChange,
+      updatePrevDatavalue,
+      updateBoundVariable,
+      setInputValue,
+      setSelectedDate,
+      void 0,
+      void 0
+    );
     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]);
-        }
+  const handleIconButtonClick = useCallback(
+    (event) => {
+      if (!disabled && !readonly && event) {
+        handleOpen(event);
       }
     },
-    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);
+    [disabled, readonly, handleOpen]
+  );
+  const handleInputClick = useCallback(
+    (event) => {
+      if (onClick && name) {
+        onClick(event, listener == null ? void 0 : listener.Widgets[name]);
+      }
+      if (shouldOpenOnInput && !readonly && !disabled) {
+        handleIconButtonClick(event);
+      }
     },
-    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
-  }));
+    [shouldOpenOnInput, readonly, disabled, handleIconButtonClick]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    __spreadProps(__spreadValues(__spreadValues({
+      className: `ng-pristine ng-valid app-date input-group ng-touched ${className}`,
+      ref: datepickerRef,
+      style: __spreadValues(__spreadValues({}, getWidthStyle(width)), styles),
+      title: hint,
+      hidden: props.hidden
+    }, readonly && { readOnly: true }), disabled && { disabled: true }), {
+      children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            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 ${getPlaceholderText()}`,
+                tabIndex: tabindex,
+                accessKey: shortcutkey,
+                "aria-invalid": validationFailureMessage || invalidDateTimeFormat || dateNotInRange,
+                readOnly: readonly || dataentrymode === "picker",
+                required,
+                autoFocus: autofocus,
+                name,
+                className: `form-control app-textbox app-dateinput display-input`,
+                style: __spreadValues({}, getWidthStyle(width)),
+                onMouseEnter: (event) => onMouseEnter && name && onMouseEnter(event, listener == null ? void 0 : listener.Widgets[name]),
+                onMouseLeave: (event) => onMouseLeave && name && onMouseLeave(event, listener == null ? void 0 : listener.Widgets[name])
+              }
+            },
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsx(Box, { component: "span", className: "input-group-btn", children: /* @__PURE__ */ jsx(
+                WmButton,
+                {
+                  type: "button",
+                  className: `btn btn-default btn-time`,
+                  tabindex,
+                  disabled: disabled || readonly,
+                  "aria-label": inputValue ? `Change Date ${inputValue}` : "Choose date by pressing enter",
+                  "aria-haspopup": "true",
+                  "aria-expanded": showPicker,
+                  onClick: handleIconButtonClick,
+                  children: /* @__PURE__ */ jsx(Box, { component: "i", "aria-hidden": "true", className: "app-icon wm-sl-l sl-calendar" })
+                }
+              ) })
+            },
+            value: inputValue,
+            onChange: handleInputChange,
+            onKeyDown: handleInputKeyDown,
+            onClick: handleInputClick,
+            onFocus: (event) => onFocus && name && onFocus(event, listener == null ? void 0 : listener.Widgets[name]),
+            onBlur: (event) => onBlur && name && onBlur(event, listener == null ? void 0 : listener.Widgets[name]),
+            style: getWidthStyle(width)
+          }
+        ),
+        showPicker && /* @__PURE__ */ jsx(
+          DatePickerPopover,
+          {
+            open: showPicker,
+            anchorEl,
+            onClose: handleClose,
+            adaptiveposition,
+            showbuttonbar,
+            todaybutton,
+            clearbutton,
+            todaybuttonlabel,
+            clearbuttonlabel,
+            isNavigationDisabled,
+            restProps,
+            getDateObj: (date) => getDateObj(date != null ? date : null),
+            viewmode,
+            calendarViewMode,
+            calendarDate,
+            selectedDate,
+            selectfromothermonth,
+            showweeks,
+            isDateDisabled,
+            handleYearChange,
+            handleMonthChange,
+            handleCalendarChange,
+            setCalendarViewMode,
+            setCalendarDate,
+            handleTodayClick,
+            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));
+const WithFormController = withFormController(WmDate);
+const WmDateStandalone = withStandalone(withBaseDateTime(WithFormController));
+var date_default = withBaseWrapper(withBaseDateTime(WithFormController));
+export {
+  WmDateStandalone as WmDate,
+  date_default as default
+};