@wavemaker-ai/react-runtime 1.0.0-rc.647499 → 1.0.0-rc.647565

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

@@ -1,287 +1,311 @@
-"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.WmTime = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _xDatePickers = require("@mui/x-date-pickers");
-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 _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;
-var WmTime = function WmTime(props) {
-  // Destructure props with defaults
-  var name = props.name,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Select time" : _props$placeholder,
-    hint = props.hint,
-    arialabel = props.arialabel,
-    _props$tabindex = props.tabindex,
-    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
-    shortcutkey = props.shortcutkey,
-    datavalue = props.datavalue,
-    _props$timepattern = props.timepattern,
-    timepattern = _props$timepattern === void 0 ? _utils.DEFAULT_TIMEPATTERN : _props$timepattern,
-    _props$hourstep = props.hourstep,
-    hourstep = _props$hourstep === void 0 ? 1 : _props$hourstep,
-    _props$minutestep = props.minutestep,
-    minutestep = _props$minutestep === void 0 ? 1 : _props$minutestep,
-    _props$outputformat = props.outputformat,
-    outputformat = _props$outputformat === void 0 ? _utils.DEFAULT_OUTPUT_FORMAT : _props$outputformat,
-    mintime = props.mintime,
-    maxtime = props.maxtime,
-    _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$secondsstep = props.secondsstep,
-    secondsstep = _props$secondsstep === void 0 ? 1 : _props$secondsstep,
-    _props$dataentrymode = props.dataentrymode,
-    dataentrymode = _props$dataentrymode === void 0 ? "default" : _props$dataentrymode,
-    className = props.className,
-    invokeOnChange = props.invokeOnChange,
-    setShowPicker = props.setShowPicker,
-    showPicker = props.showPicker,
-    listener = props.listener,
-    onChange = props.onChange,
-    onClick = props.onClick,
-    _onFocus = props.onFocus,
-    _onBlur = props.onBlur,
-    _onMouseEnter = props.onMouseEnter,
-    _onMouseLeave = props.onMouseLeave,
-    onBeforeload = props.onBeforeload,
-    _props$showampmbutton = props.showampmbuttons,
-    showampmbuttons = _props$showampmbutton === void 0 ? false : _props$showampmbutton,
-    _props$validators = props.validators,
-    validators = _props$validators === void 0 ? [] : _props$validators,
-    validationmessage = props.validationmessage;
-
-  // State
-  var _useState = (0, _react.useState)(null),
-    internalValue = _useState[0],
-    setInternalValue = _useState[1];
-  var _useState2 = (0, _react.useState)(""),
-    displayValue = _useState2[0],
-    setDisplayValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    isCurrentTime = _useState3[0],
-    setIsCurrentTime = _useState3[1];
-  var _useState4 = (0, _react.useState)({
-      isValid: true
-    }),
-    validationResult = _useState4[0],
-    setValidationResult = _useState4[1];
-
-  // Refs
-  var onBeforeloadExecutedRef = (0, _react.useRef)(false);
-  var timeIntervalRef = (0, _react.useRef)(null);
-  var anchorRef = (0, _react.useRef)(null);
-
-  // Computed values
-  var isReadOnly = (0, _react.useMemo)(function () {
-    return readonly || dataentrymode !== "undefined" && dataentrymode !== "default";
-  }, [readonly, dataentrymode]);
-  var timeFormatOptions = (0, _react.useMemo)(function () {
-    return (0, _utils.parseTimeFormat)(timepattern);
-  }, [timepattern]);
-  var minTimeObj = (0, _react.useMemo)(function () {
-    return (0, _utils.parseTimeObj)(mintime);
-  }, [mintime]);
-  var maxTimeObj = (0, _react.useMemo)(function () {
-    return (0, _utils.parseTimeObj)(maxtime);
-  }, [maxtime]);
-  // Helper functions
-  var isDropDownDisplayEnabledOnInput = (0, _react.useCallback)(function (dropdownvalue) {
-    return dropdownvalue === "default";
-  }, []);
-  var handleTimeChange = (0, _react.useCallback)(function (newTime, event) {
-    var shouldClosePicker = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    if (!newTime) {
-      var oldValue = displayValue;
-      setInternalValue(null);
-      setDisplayValue("");
-      setValidationResult({
-        isValid: true
-      });
-      invokeOnChange === null || invokeOnChange === void 0 || invokeOnChange("", {
-        $event: event,
-        type: "change"
-      });
-      if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
-        listener.Widgets[name].displayValue = "";
-      }
-      (0, _utils.updateListener)(name, listener, props, "", null, "");
-      if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
-        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], "", oldValue);
-      }
-      if (shouldClosePicker) setShowPicker === null || setShowPicker === void 0 || setShowPicker(false);
-      return;
-    }
-    var validation = (0, _utils.validateTimeRange)(newTime, mintime, maxtime, validators, validationmessage);
-    setValidationResult(validation);
-    if (validation.isValid) {
-      setInternalValue((0, _momentTimezone["default"])(newTime));
-      var formattedValue = (0, _utils.formatDisplayTimeValue)(newTime, timepattern);
-      var outputFormattedValue = (0, _utils.formatDisplayTimeValue)(newTime, outputformat);
-      setDisplayValue(formattedValue);
-      invokeOnChange === null || invokeOnChange === void 0 || invokeOnChange(outputFormattedValue, {
-        $event: event,
-        type: "change"
-      });
-      if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
-        listener.Widgets[name].displayValue = formattedValue;
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { TextField, Button, Box } from "@mui/material";
+import { TimePicker } from "@mui/x-date-pickers";
+import moment from "moment-timezone";
+import clsx from "clsx";
+import withBaseDateTime from "../../../../higherOrder/BaseDateTime";
+import withFormController from "../../../data/form/form-controller/withFormController";
+import {
+  parseTimeFormat,
+  parseTimeValue,
+  formatDisplayTimeValue,
+  validateTimeRange,
+  validateTimeFormat,
+  parseTimeObj,
+  DEFAULT_TIMEPATTERN,
+  DEFAULT_OUTPUT_FORMAT,
+  DEFAULT_CLASS,
+  updateListener,
+  createWidgetEvent
+} from "./utils";
+import withStandalone from "../../../../higherOrder/withStandalone";
+import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
+const WmTime = (props) => {
+  const {
+    name,
+    required = false,
+    placeholder = "Select time",
+    hint,
+    arialabel,
+    tabindex = 0,
+    shortcutkey,
+    datavalue,
+    timepattern = DEFAULT_TIMEPATTERN,
+    hourstep = 1,
+    minutestep = 1,
+    outputformat = DEFAULT_OUTPUT_FORMAT,
+    mintime,
+    maxtime,
+    autofocus = false,
+    readonly = false,
+    disabled = false,
+    showdropdownon = "default",
+    secondsstep = 1,
+    dataentrymode = "default",
+    className,
+    invokeOnChange,
+    setShowPicker,
+    showPicker,
+    listener,
+    onChange,
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseEnter,
+    onMouseLeave,
+    onBeforeload,
+    showampmbuttons = false,
+    validators = [],
+    validationmessage
+  } = props;
+  const [internalValue, setInternalValue] = useState(null);
+  const [displayValue, setDisplayValue] = useState("");
+  const [isCurrentTime, setIsCurrentTime] = useState(false);
+  const [validationResult, setValidationResult] = useState({ isValid: true });
+  const onBeforeloadExecutedRef = useRef(false);
+  const timeIntervalRef = useRef(null);
+  const anchorRef = useRef(null);
+  const isReadOnly = useMemo(
+    () => readonly || dataentrymode !== "undefined" && dataentrymode !== "default",
+    [readonly, dataentrymode]
+  );
+  const timeFormatOptions = useMemo(() => parseTimeFormat(timepattern), [timepattern]);
+  const minTimeObj = useMemo(() => parseTimeObj(mintime), [mintime]);
+  const maxTimeObj = useMemo(() => parseTimeObj(maxtime), [maxtime]);
+  const isDropDownDisplayEnabledOnInput = useCallback(
+    (dropdownvalue) => dropdownvalue === "default",
+    []
+  );
+  const handleTimeChange = useCallback(
+    (newTime, event2, shouldClosePicker = false) => {
+      if (!newTime) {
+        const oldValue = displayValue;
+        setInternalValue(null);
+        setDisplayValue("");
+        setValidationResult({ isValid: true });
+        invokeOnChange == null ? void 0 : invokeOnChange("", { $event: event2, type: "change" });
+        if (name && (listener == null ? void 0 : listener.Widgets[name])) {
+          listener.Widgets[name].displayValue = "";
+        }
+        updateListener(name, listener, props, "", null, "");
+        if (onChange && name && (listener == null ? void 0 : listener.Widgets[name])) {
+          onChange(event2, listener == null ? void 0 : listener.Widgets[name], "", oldValue);
+        }
+        if (shouldClosePicker) setShowPicker == null ? void 0 : setShowPicker(false);
+        return;
       }
-      (0, _utils.updateListener)(name, listener, props, formattedValue, (0, _utils.formatDisplayTimeValue)(newTime, "timestamp"), outputFormattedValue);
-      if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
-        onChange(event, name && (listener === null || listener === void 0 ? void 0 : listener.Widgets[name]), outputFormattedValue, displayValue);
+      const validation = validateTimeRange(
+        newTime,
+        mintime,
+        maxtime,
+        validators,
+        validationmessage
+      );
+      setValidationResult(validation);
+      if (validation.isValid) {
+        setInternalValue(moment(newTime));
+        const formattedValue = formatDisplayTimeValue(newTime, timepattern);
+        const outputFormattedValue = formatDisplayTimeValue(newTime, outputformat);
+        setDisplayValue(formattedValue);
+        invokeOnChange == null ? void 0 : invokeOnChange(outputFormattedValue, { $event: event2, type: "change" });
+        if (name && (listener == null ? void 0 : listener.Widgets[name])) {
+          listener.Widgets[name].displayValue = formattedValue;
+        }
+        updateListener(
+          name,
+          listener,
+          props,
+          formattedValue,
+          formatDisplayTimeValue(newTime, "timestamp"),
+          outputFormattedValue
+        );
+        if (onChange && name && (listener == null ? void 0 : listener.Widgets[name])) {
+          onChange(event2, name && (listener == null ? void 0 : listener.Widgets[name]), outputFormattedValue, displayValue);
+        }
+      } else {
+        const formattedValue = formatDisplayTimeValue(newTime, timepattern);
+        if (onChange && name && (listener == null ? void 0 : listener.Widgets[name]) && props.formfield) {
+          onChange(event2, name && (listener == null ? void 0 : listener.Widgets[name]), formattedValue, displayValue);
+        }
       }
-    } else {
-      var _formattedValue = (0, _utils.formatDisplayTimeValue)(newTime, timepattern);
-      if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield) {
-        onChange(event, name && (listener === null || listener === void 0 ? void 0 : listener.Widgets[name]), _formattedValue, displayValue);
+      if (shouldClosePicker) setShowPicker == null ? void 0 : setShowPicker(false);
+    },
+    [
+      mintime,
+      maxtime,
+      validators,
+      timepattern,
+      outputformat,
+      invokeOnChange,
+      setShowPicker,
+      name,
+      listener,
+      props,
+      onChange,
+      displayValue
+    ]
+  );
+  const handlePickerAccept = useCallback(
+    (value) => {
+      if (value && value.isValid()) {
+        const changeEvent = createWidgetEvent({
+          type: "change",
+          name,
+          value,
+          anchor: anchorRef.current,
+          originalEvent: event
+        });
+        handleTimeChange(value.toDate(), changeEvent, true);
       }
-    }
-    if (shouldClosePicker) setShowPicker === null || setShowPicker === void 0 || setShowPicker(false);
-  }, [mintime, maxtime, validators, timepattern, outputformat, invokeOnChange, setShowPicker, name, listener, props, onChange, displayValue]);
-  var handlePickerAccept = (0, _react.useCallback)(function (value) {
-    if (value && value.isValid()) {
-      var changeEvent = (0, _utils.createWidgetEvent)({
-        type: "change",
-        name: name,
-        value: value,
-        anchor: anchorRef.current,
-        originalEvent: event
-      });
-      handleTimeChange(value.toDate(), changeEvent, true);
-    }
-  }, [handleTimeChange]);
-  var handlePickerClose = (0, _react.useCallback)(function () {
-    setShowPicker === null || setShowPicker === void 0 || setShowPicker(false);
+    },
+    [handleTimeChange]
+  );
+  const handlePickerClose = useCallback(() => {
+    setShowPicker == null ? void 0 : setShowPicker(false);
   }, [setShowPicker]);
-  var handleInputChange = (0, _react.useCallback)(function (event) {
-    try {
-      var inputValue = event.target.value;
-      if (!inputValue) {
-        handleTimeChange(null, event, false);
-        return;
-      }
-      var formatValidation = (0, _utils.validateTimeFormat)(inputValue, timepattern, required, validationmessage);
-      if (!formatValidation.isValid) {
-        setValidationResult(formatValidation);
-        if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield) {
-          onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], inputValue, displayValue);
+  const handleInputChange = useCallback(
+    (event2) => {
+      try {
+        const inputValue = event2.target.value;
+        if (!inputValue) {
+          handleTimeChange(null, event2, false);
+          return;
         }
-        setDisplayValue(inputValue);
-        return;
-      }
-      var parsedTime = (0, _utils.parseTimeValue)(inputValue, timepattern);
-      if (parsedTime && parsedTime.isValid()) {
-        var rangeValidation = (0, _utils.validateTimeRange)(parsedTime.toDate(), mintime, maxtime, validators, validationmessage);
-        setValidationResult(rangeValidation);
-        if (rangeValidation.isValid) {
-          handleTimeChange(parsedTime.toDate(), event, false);
-        } else {
-          if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name] && props.formfield) {
-            onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], inputValue, displayValue);
+        const formatValidation = validateTimeFormat(
+          inputValue,
+          timepattern,
+          required,
+          validationmessage
+        );
+        if (!formatValidation.isValid) {
+          setValidationResult(formatValidation);
+          if (onChange && name && (listener == null ? void 0 : listener.Widgets[name]) && props.formfield) {
+            onChange(event2, listener == null ? void 0 : listener.Widgets[name], inputValue, displayValue);
           }
           setDisplayValue(inputValue);
+          return;
         }
-      } else {
-        if (required) {
-          setValidationResult({
-            isValid: false,
-            errorType: "format",
-            message: validationmessage || "Invalid time format. Expected: ".concat(timepattern)
-          });
+        const parsedTime = parseTimeValue(inputValue, timepattern);
+        if (parsedTime && parsedTime.isValid()) {
+          const rangeValidation = validateTimeRange(
+            parsedTime.toDate(),
+            mintime,
+            maxtime,
+            validators,
+            validationmessage
+          );
+          setValidationResult(rangeValidation);
+          if (rangeValidation.isValid) {
+            handleTimeChange(parsedTime.toDate(), event2, false);
+          } else {
+            if (onChange && name && (listener == null ? void 0 : listener.Widgets[name]) && props.formfield) {
+              onChange(event2, listener == null ? void 0 : listener.Widgets[name], inputValue, displayValue);
+            }
+            setDisplayValue(inputValue);
+          }
+        } else {
+          if (required) {
+            setValidationResult({
+              isValid: false,
+              errorType: "format",
+              message: validationmessage || `Invalid time format. Expected: ${timepattern}`
+            });
+          }
+          setDisplayValue(inputValue);
         }
-        setDisplayValue(inputValue);
+      } catch (error) {
+        console.error("Error in handleInputChange:", error);
+        setValidationResult({
+          isValid: false,
+          errorType: "format",
+          message: validationmessage || "Error processing input"
+        });
       }
-    } catch (error) {
-      console.error("Error in handleInputChange:", error);
-      setValidationResult({
-        isValid: false,
-        errorType: "format",
-        message: validationmessage || "Error processing input"
-      });
-    }
-  }, [handleTimeChange, timepattern, mintime, maxtime, validators, required, validationmessage]);
-  var handleClick = (0, _react.useCallback)(function (event) {
-    try {
-      if (disabled || readonly || isCurrentTime) return;
-
-      // Ensure the input gets focus on click
-      if (anchorRef.current && !anchorRef.current.contains(document.activeElement)) {
-        anchorRef.current.focus();
-      }
-      if (isDropDownDisplayEnabledOnInput(showdropdownon)) {
-        setShowPicker === null || setShowPicker === void 0 || setShowPicker(true);
-      }
-      if (onClick && name) {
-        onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-      }
-    } catch (error) {
-      console.error("Error in handleClick:", error);
-    }
-  }, [disabled, readonly, isCurrentTime, showdropdownon, isDropDownDisplayEnabledOnInput, setShowPicker]);
-  var handleInputKeyDown = (0, _react.useCallback)(function (event) {
-    try {
-      if (shortcutkey && event.altKey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
-        var _anchorRef$current;
-        event.preventDefault();
-        (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 || _anchorRef$current.focus();
-        return;
+    },
+    [handleTimeChange, timepattern, mintime, maxtime, validators, required, validationmessage]
+  );
+  const handleClick = useCallback(
+    (event2) => {
+      try {
+        if (disabled || readonly || isCurrentTime) return;
+        if (anchorRef.current && !anchorRef.current.contains(document.activeElement)) {
+          anchorRef.current.focus();
+        }
+        if (isDropDownDisplayEnabledOnInput(showdropdownon)) {
+          setShowPicker == null ? void 0 : setShowPicker(true);
+        }
+        if (onClick && name) {
+          onClick(event2, listener == null ? void 0 : listener.Widgets[name]);
+        }
+      } catch (error) {
+        console.error("Error in handleClick:", error);
       }
-      if (isDropDownDisplayEnabledOnInput(showdropdownon)) {
-        if (event.key === "Enter" || event.key === "ArrowDown") {
-          event.preventDefault();
-          setShowPicker === null || setShowPicker === void 0 || setShowPicker(true);
-        } else if (event.key === "Escape") {
-          setShowPicker === null || setShowPicker === void 0 || setShowPicker(false);
+    },
+    [
+      disabled,
+      readonly,
+      isCurrentTime,
+      showdropdownon,
+      isDropDownDisplayEnabledOnInput,
+      setShowPicker
+    ]
+  );
+  const handleInputKeyDown = useCallback(
+    (event2) => {
+      var _a;
+      try {
+        if (shortcutkey && event2.altKey && event2.key.toLowerCase() === shortcutkey.toLowerCase()) {
+          event2.preventDefault();
+          (_a = anchorRef.current) == null ? void 0 : _a.focus();
+          return;
         }
+        if (isDropDownDisplayEnabledOnInput(showdropdownon)) {
+          if (event2.key === "Enter" || event2.key === "ArrowDown") {
+            event2.preventDefault();
+            setShowPicker == null ? void 0 : setShowPicker(true);
+          } else if (event2.key === "Escape") {
+            setShowPicker == null ? void 0 : setShowPicker(false);
+          }
+        }
+      } catch (error) {
+        console.error("Error in handleInputKeyDown:", error);
       }
-    } catch (error) {
-      console.error("Error in handleInputKeyDown:", error);
-    }
-  }, [shortcutkey, showdropdownon, isDropDownDisplayEnabledOnInput, setShowPicker]);
-  var handleTimePickerChange = (0, _react.useCallback)(function (newValue) {
-    if (newValue && newValue.isValid()) {
-      var newDate = newValue.toDate();
-      setInternalValue((0, _momentTimezone["default"])(newDate));
-      setDisplayValue((0, _utils.formatDisplayTimeValue)(newDate, timepattern));
-    } else {
-      setInternalValue(null);
-      setDisplayValue("");
-    }
-  }, [timepattern]);
-
-  // Data value effect
-  (0, _react.useEffect)(function () {
+    },
+    [shortcutkey, showdropdownon, isDropDownDisplayEnabledOnInput, setShowPicker]
+  );
+  const handleTimePickerChange = useCallback(
+    (newValue) => {
+      if (newValue && newValue.isValid()) {
+        const newDate = newValue.toDate();
+        setInternalValue(moment(newDate));
+        setDisplayValue(formatDisplayTimeValue(newDate, timepattern));
+      } else {
+        setInternalValue(null);
+        setDisplayValue("");
+      }
+    },
+    [timepattern]
+  );
+  useEffect(() => {
     if (datavalue === "CURRENT_TIME") {
       setIsCurrentTime(true);
-      var now = (0, _momentTimezone["default"])();
+      const now = moment();
       setInternalValue(now);
-      setDisplayValue((0, _utils.formatDisplayTimeValue)(now, timepattern));
-      timeIntervalRef.current = setInterval(function () {
-        var current = (0, _momentTimezone["default"])();
+      setDisplayValue(formatDisplayTimeValue(now, timepattern));
+      timeIntervalRef.current = setInterval(() => {
+        const current = moment();
         setInternalValue(current);
-        setDisplayValue((0, _utils.formatDisplayTimeValue)(current, timepattern));
-        (0, _utils.updateListener)(name, listener, props, (0, _utils.formatDisplayTimeValue)(current, timepattern), (0, _utils.formatDisplayTimeValue)(current, "timestamp"), (0, _utils.formatDisplayTimeValue)(current, outputformat));
-      }, 1000);
+        setDisplayValue(formatDisplayTimeValue(current, timepattern));
+        updateListener(
+          name,
+          listener,
+          props,
+          formatDisplayTimeValue(current, timepattern),
+          formatDisplayTimeValue(current, "timestamp"),
+          formatDisplayTimeValue(current, outputformat)
+        );
+      }, 1e3);
     } else {
       if (timeIntervalRef.current) {
         clearInterval(timeIntervalRef.current);
@@ -289,190 +313,192 @@ var WmTime = function WmTime(props) {
       }
       setIsCurrentTime(false);
       if (datavalue) {
-        var parsed;
+        let parsed;
         if (typeof datavalue === "string" && /^\d+$/.test(datavalue)) {
-          parsed = (0, _momentTimezone["default"])(parseInt(datavalue, 10), timepattern, true);
+          parsed = moment(parseInt(datavalue, 10), timepattern, true);
         } else if (typeof datavalue === "number") {
-          parsed = (0, _momentTimezone["default"])(datavalue);
+          parsed = moment(datavalue);
         } else if (datavalue instanceof Date) {
-          parsed = (0, _momentTimezone["default"])(datavalue);
+          parsed = moment(datavalue);
         } else {
-          parsed = (0, _momentTimezone["default"])(datavalue, timepattern, true);
+          parsed = moment(datavalue, timepattern, true);
         }
         setInternalValue(parsed);
         if (parsed.isValid()) {
-          setDisplayValue((0, _utils.formatDisplayTimeValue)(parsed, timepattern));
+          setDisplayValue(formatDisplayTimeValue(parsed, timepattern));
         } else {
           setDisplayValue(datavalue);
         }
-        (0, _utils.updateListener)(name, listener, props, (0, _utils.formatDisplayTimeValue)(parsed, timepattern), (0, _utils.formatDisplayTimeValue)(parsed, "timestamp"), (0, _utils.formatDisplayTimeValue)(parsed, outputformat));
+        updateListener(
+          name,
+          listener,
+          props,
+          formatDisplayTimeValue(parsed, timepattern),
+          formatDisplayTimeValue(parsed, "timestamp"),
+          formatDisplayTimeValue(parsed, outputformat)
+        );
       } else {
         setInternalValue(null);
         setDisplayValue("");
       }
     }
-    return function () {
+    return () => {
       if (timeIntervalRef.current) {
         clearInterval(timeIntervalRef.current);
         timeIntervalRef.current = null;
       }
     };
   }, [datavalue, timepattern]);
-
-  // Shortcut key setup
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (!shortcutkey) return;
-    var handleGlobalKeyDown = function handleGlobalKeyDown(event) {
-      if (event.altKey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
-        var _anchorRef$current2;
-        event.preventDefault();
-        (_anchorRef$current2 = anchorRef.current) === null || _anchorRef$current2 === void 0 || _anchorRef$current2.focus();
+    const handleGlobalKeyDown = (event2) => {
+      var _a;
+      if (event2.altKey && event2.key.toLowerCase() === shortcutkey.toLowerCase()) {
+        event2.preventDefault();
+        (_a = anchorRef.current) == null ? void 0 : _a.focus();
       }
     };
     document.addEventListener("keydown", handleGlobalKeyDown);
-    return function () {
-      return document.removeEventListener("keydown", handleGlobalKeyDown);
-    };
+    return () => document.removeEventListener("keydown", handleGlobalKeyDown);
   }, [shortcutkey]);
-  (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 beforeEvent = (0, _utils.createWidgetEvent)({
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    if (onBeforeload && name && ((_b = (_a = props.listener) == null ? void 0 : _a.Widgets) == null ? void 0 : _b[name]) && !onBeforeloadExecutedRef.current) {
+      const beforeEvent = createWidgetEvent({
         type: "beforeload",
-        name: name,
+        name,
         value: displayValue,
         anchor: anchorRef.current
       });
-      onBeforeload(beforeEvent, (_props$listener2 = props.listener) === null || _props$listener2 === void 0 || (_props$listener2 = _props$listener2.Widgets) === null || _props$listener2 === void 0 ? void 0 : _props$listener2[name]);
+      onBeforeload(beforeEvent, (_d = (_c = props.listener) == null ? void 0 : _c.Widgets) == null ? void 0 : _d[name]);
       onBeforeloadExecutedRef.current = true;
     }
   }, []);
-
-  // Render the main TextField component
-  var renderTextField = (0, _react.useCallback)(function () {
-    return __jsx(_material.TextField, {
-      inputRef: anchorRef,
-      autoFocus: autofocus && !disabled && !readonly && !isReadOnly,
-      fullWidth: true,
-      name: name,
-      required: required,
-      disabled: disabled || readonly,
-      "aria-readonly": readonly || isCurrentTime,
-      value: displayValue,
-      onChange: handleInputChange,
-      onClick: handleClick,
-      onFocus: function onFocus(event) {
-        return _onFocus && name && _onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-      },
-      onBlur: function onBlur(event) {
-        var _listener$Widgets;
-        return _onBlur && name && listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[name] ? _onBlur(event, listener.Widgets[name]) : undefined;
-      },
-      onMouseEnter: function onMouseEnter(event) {
-        var _listener$Widgets2;
-        return _onMouseEnter && name && listener !== null && listener !== void 0 && (_listener$Widgets2 = listener.Widgets) !== null && _listener$Widgets2 !== void 0 && _listener$Widgets2[name] ? _onMouseEnter(event, listener.Widgets[name]) : undefined;
-      },
-      onMouseLeave: function onMouseLeave(event) {
-        var _listener$Widgets3;
-        return _onMouseLeave && name && listener !== null && listener !== void 0 && (_listener$Widgets3 = listener.Widgets) !== null && _listener$Widgets3 !== void 0 && _listener$Widgets3[name] ? _onMouseLeave(event, listener.Widgets[name]) : undefined;
-      },
-      onKeyDown: handleInputKeyDown,
-      placeholder: placeholder,
-      error: !validationResult.isValid,
-      helperText: validationResult.message || "",
-      slotProps: {
-        htmlInput: {
-          tabIndex: readonly || isReadOnly || isCurrentTime ? -1 : tabindex,
-          readOnly: isReadOnly || readonly || isCurrentTime,
-          className: "form-control app-textbox app-dateinput display-input",
-          "aria-label": arialabel || placeholder,
-          accessKey: shortcutkey,
-          role: "timer",
-          "aria-atomic": isCurrentTime ? "true" : "false",
-          title: hint,
-          onFocus: readonly || isReadOnly || isCurrentTime ? function (e) {
-            return e.target.blur();
-          } : undefined
+  const renderTextField = useCallback(
+    () => /* @__PURE__ */ jsx(
+      TextField,
+      {
+        inputRef: anchorRef,
+        autoFocus: autofocus && !disabled && !readonly && !isReadOnly,
+        fullWidth: true,
+        name,
+        required,
+        disabled: disabled || readonly,
+        "aria-readonly": readonly || isCurrentTime,
+        value: displayValue,
+        onChange: handleInputChange,
+        onClick: handleClick,
+        onFocus: (event2) => onFocus && name && onFocus(event2, listener == null ? void 0 : listener.Widgets[name]),
+        onBlur: (event2) => {
+          var _a;
+          return onBlur && name && ((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]) ? onBlur(event2, listener.Widgets[name]) : void 0;
+        },
+        onMouseEnter: (event2) => {
+          var _a;
+          return onMouseEnter && name && ((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]) ? onMouseEnter(event2, listener.Widgets[name]) : void 0;
+        },
+        onMouseLeave: (event2) => {
+          var _a;
+          return onMouseLeave && name && ((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]) ? onMouseLeave(event2, listener.Widgets[name]) : void 0;
+        },
+        onKeyDown: handleInputKeyDown,
+        placeholder,
+        error: !validationResult.isValid,
+        helperText: validationResult.message || "",
+        slotProps: {
+          htmlInput: {
+            tabIndex: readonly || isReadOnly || isCurrentTime ? -1 : tabindex,
+            readOnly: isReadOnly || readonly || isCurrentTime,
+            className: "form-control app-textbox app-dateinput display-input",
+            "aria-label": arialabel || placeholder,
+            accessKey: shortcutkey,
+            role: "timer",
+            "aria-atomic": isCurrentTime ? "true" : "false",
+            title: hint,
+            onFocus: readonly || isReadOnly || isCurrentTime ? (e) => e.target.blur() : void 0
+          }
+        },
+        InputProps: {
+          className: readonly || isReadOnly ? "readonly" : "",
+          endAdornment: /* @__PURE__ */ jsx(Box, { component: "span", className: "input-group-btn dropdown-toggle", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "btn btn-default btn-date",
+              variant: "contained",
+              disableRipple: false,
+              onClick: () => setShowPicker == null ? void 0 : setShowPicker(true),
+              "aria-label": "Select time",
+              "aria-haspopup": "true",
+              "aria-expanded": showPicker ? "true" : "false",
+              tabIndex: readonly || isReadOnly || isCurrentTime ? -1 : tabindex,
+              disableTouchRipple: true,
+              disabled: disabled || readonly || isCurrentTime,
+              children: /* @__PURE__ */ jsx("span", { className: "app-icon wm-sl-l sl-time", "aria-hidden": "true" })
+            }
+          ) })
         }
-      },
-      InputProps: {
-        className: readonly || isReadOnly ? "readonly" : "",
-        endAdornment: __jsx(_material.Box, {
-          component: "span",
-          className: "input-group-btn dropdown-toggle"
-        }, __jsx(_material.Button, {
-          className: "btn btn-default btn-date",
-          variant: "contained",
-          disableRipple: false,
-          onClick: function onClick() {
-            return setShowPicker === null || setShowPicker === void 0 ? void 0 : setShowPicker(true);
-          },
-          "aria-label": "Select time",
-          "aria-haspopup": "true",
-          "aria-expanded": showPicker ? "true" : "false",
-          tabIndex: readonly || isReadOnly || isCurrentTime ? -1 : tabindex,
-          disableTouchRipple: true,
-          disabled: disabled || readonly || isCurrentTime
-        }, __jsx("span", {
-          className: "app-icon wm-sl-l sl-time",
-          "aria-hidden": "true"
-        })))
       }
-    });
-  }, [name, required, disabled, isCurrentTime, displayValue, handleInputChange, handleClick, handleInputKeyDown, placeholder, tabindex, arialabel, shortcutkey, isReadOnly, readonly, validationResult, setShowPicker, showPicker, hint]);
-  var views = ["hours", "minutes"];
+    ),
+    [
+      name,
+      required,
+      disabled,
+      isCurrentTime,
+      displayValue,
+      handleInputChange,
+      handleClick,
+      handleInputKeyDown,
+      placeholder,
+      tabindex,
+      arialabel,
+      shortcutkey,
+      isReadOnly,
+      readonly,
+      validationResult,
+      setShowPicker,
+      showPicker,
+      hint
+    ]
+  );
+  const views = ["hours", "minutes"];
   if (timeFormatOptions.hasSeconds) views.push("seconds");
-  return __jsx(_material.Box, {
-    hidden: props.hidden,
-    className: (0, _clsx["default"])(_utils.DEFAULT_CLASS, className)
-  }, renderTextField(), showPicker && __jsx(_xDatePickers.TimePicker, {
-    disableIgnoringDatePartForTimeValidation: true,
-    open: showPicker,
-    onClose: handlePickerClose,
-    onAccept: handlePickerAccept,
-    value: internalValue,
-    onChange: handleTimePickerChange,
-    timeSteps: {
-      minutes: minutestep,
-      hours: hourstep,
-      seconds: secondsstep
-    },
-    minTime: minTimeObj ? (0, _momentTimezone["default"])(minTimeObj) : undefined,
-    maxTime: maxTimeObj ? (0, _momentTimezone["default"])(maxTimeObj) : undefined,
-    ampm: timeFormatOptions.is12Hour && showampmbuttons,
-    views: views,
-    skipDisabled: true,
-    ampmInClock: timeFormatOptions.is12Hour,
-    format: timepattern,
-    slotProps: {
-      textField: {
-        hidden: true
-      },
-      popper: {
-        anchorEl: anchorRef.current,
-        placement: "bottom-start",
-        className: "wm-timepicker-popper"
-      },
-      actionBar: {
-        actions: ["accept"]
+  return /* @__PURE__ */ jsxs(Box, { hidden: props.hidden, className: clsx(DEFAULT_CLASS, className), children: [
+    renderTextField(),
+    showPicker && /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        disableIgnoringDatePartForTimeValidation: true,
+        open: showPicker,
+        onClose: handlePickerClose,
+        onAccept: handlePickerAccept,
+        value: internalValue,
+        onChange: handleTimePickerChange,
+        timeSteps: { minutes: minutestep, hours: hourstep, seconds: secondsstep },
+        minTime: minTimeObj ? moment(minTimeObj) : void 0,
+        maxTime: maxTimeObj ? moment(maxTimeObj) : void 0,
+        ampm: timeFormatOptions.is12Hour && showampmbuttons,
+        views,
+        skipDisabled: true,
+        ampmInClock: timeFormatOptions.is12Hour,
+        format: timepattern,
+        slotProps: {
+          textField: { hidden: true },
+          popper: {
+            anchorEl: anchorRef.current,
+            placement: "bottom-start",
+            className: "wm-timepicker-popper"
+          },
+          actionBar: { actions: ["accept"] }
+        }
       }
-    }
-  }));
+    )
+  ] });
 };
 WmTime.displayName = "WmTime";
-var WithForm = (0, _withFormController["default"])(WmTime);
-
-// @ts-expect-error baseDateTime is valid schenario
-var WmTimeStandalone = exports.WmTime = (0, _withStandalone["default"])((0, _BaseDateTime["default"])(WithForm));
-/**
- * The WmTime component provides a time picker input with format and interval support.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-time--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-time--docs)
- *
- * @param props - {@link WmTimeProps}
- */
-// @ts-expect-error baseDateTime is valid schenario
-var _default = exports["default"] = (0, _withBaseWrapper["default"])((0, _BaseDateTime["default"])(WithForm));
+const WithForm = withFormController(WmTime);
+const WmTimeStandalone = withStandalone(withBaseDateTime(WithForm));
+var time_default = withBaseWrapper(withBaseDateTime(WithForm));
+export {
+  WmTimeStandalone as WmTime,
+  time_default as default
+};