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

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

@@ -0,0 +1,478 @@
+"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;
+      }
+      (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);
+      }
+    } 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 || 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);
+  }, [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);
+        }
+        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);
+          }
+          setDisplayValue(inputValue);
+        }
+      } else {
+        if (required) {
+          setValidationResult({
+            isValid: false,
+            errorType: "format",
+            message: validationmessage || "Invalid time format. Expected: ".concat(timepattern)
+          });
+        }
+        setDisplayValue(inputValue);
+      }
+    } 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;
+      }
+      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);
+        }
+      }
+    } 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 () {
+    if (datavalue === "CURRENT_TIME") {
+      setIsCurrentTime(true);
+      var now = (0, _momentTimezone["default"])();
+      setInternalValue(now);
+      setDisplayValue((0, _utils.formatDisplayTimeValue)(now, timepattern));
+      timeIntervalRef.current = setInterval(function () {
+        var current = (0, _momentTimezone["default"])();
+        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);
+    } else {
+      if (timeIntervalRef.current) {
+        clearInterval(timeIntervalRef.current);
+        timeIntervalRef.current = null;
+      }
+      setIsCurrentTime(false);
+      if (datavalue) {
+        var parsed;
+        if (typeof datavalue === "string" && /^\d+$/.test(datavalue)) {
+          parsed = (0, _momentTimezone["default"])(parseInt(datavalue, 10), timepattern, true);
+        } else if (typeof datavalue === "number") {
+          parsed = (0, _momentTimezone["default"])(datavalue);
+        } else if (datavalue instanceof Date) {
+          parsed = (0, _momentTimezone["default"])(datavalue);
+        } else {
+          parsed = (0, _momentTimezone["default"])(datavalue, timepattern, true);
+        }
+        setInternalValue(parsed);
+        if (parsed.isValid()) {
+          setDisplayValue((0, _utils.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));
+      } else {
+        setInternalValue(null);
+        setDisplayValue("");
+      }
+    }
+    return function () {
+      if (timeIntervalRef.current) {
+        clearInterval(timeIntervalRef.current);
+        timeIntervalRef.current = null;
+      }
+    };
+  }, [datavalue, timepattern]);
+
+  // Shortcut key setup
+  (0, _react.useEffect)(function () {
+    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();
+      }
+    };
+    document.addEventListener("keydown", handleGlobalKeyDown);
+    return function () {
+      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)({
+        type: "beforeload",
+        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]);
+      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
+        }
+      },
+      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"];
+  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"]
+      }
+    }
+  }));
+};
+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));

package/components/input/epoch/time/props.d.ts

@@ -0,0 +1,155 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+import { ValidatorConfig } from "@/components/data/form/form-controller/props";
+/**
+ * Props specific to the WmTime component.
+ */
+export interface TimeProps {
+    /**
+     * Whether a time selection is required.
+     */
+    required?: boolean;
+    /**
+     * Placeholder text shown when no time is selected.
+     */
+    placeholder?: string;
+    /**
+     * Whether to show AM/PM toggle buttons.
+     */
+    showampmbuttons?: boolean;
+    /**
+     * Keyboard shortcut key to focus the time picker.
+     */
+    shortcutkey?: string;
+    /**
+     * The bound data value of the time input.
+     */
+    datavalue?: string | Date | null;
+    /**
+     * Time pattern for display formatting.
+     * @example "HH:mm:ss"
+     */
+    timepattern?: string;
+    /**
+     * Step increment for hours.
+     * @default 1
+     */
+    hourstep?: number;
+    /**
+     * Step increment for minutes.
+     * @default 1
+     */
+    minutestep?: number;
+    /**
+     * Output format for the time value.
+     */
+    outputformat?: string;
+    /**
+     * The minimum selectable time.
+     */
+    mintime?: string | Date;
+    /**
+     * The maximum selectable time.
+     */
+    maxtime?: string | Date;
+    /**
+     * Whether the input should be focused on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * Whether the time picker is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Whether the time picker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * When to show the dropdown picker.
+     */
+    showdropdownon?: string;
+    /**
+     * Step increment for seconds.
+     */
+    secondsstep?: number;
+    /**
+     * Data entry mode for the time input.
+     */
+    dataentrymode?: string;
+    /**
+     * Validator configurations for the time input.
+     */
+    validators?: ValidatorConfig[];
+    /**
+     * Custom validation message.
+     */
+    validationmessage?: string;
+    /**
+     * Invokes the onChange callback (from form controller).
+     */
+    invokeOnChange?: (value: string | Date | null, event: React.SyntheticEvent | {
+        $event: React.SyntheticEvent;
+        type: string;
+    }) => void;
+    /**
+     * Sets the picker visibility state (from HOC).
+     */
+    setShowPicker?: (show: boolean) => void;
+    /**
+     * Whether the picker is currently visible (from HOC).
+     */
+    showPicker?: boolean;
+    /**
+     * Callback invoked when the time value changes.
+     */
+    onChange?: (event: React.SyntheticEvent, widget: Record<string, unknown>, newVal: string | Date | null, oldVal: string | Date | null) => void;
+    /**
+     * Callback invoked when the time picker is clicked.
+     */
+    onClick?: (event: React.MouseEvent, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the time picker receives focus.
+     */
+    onFocus?: (event: React.FocusEvent, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the time picker loses focus.
+     */
+    onBlur?: (event: React.FocusEvent, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse enters the time picker.
+     */
+    onMouseEnter?: (event: React.MouseEvent, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse leaves the time picker.
+     */
+    onMouseLeave?: (event: React.MouseEvent, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked before the time widget loads.
+     */
+    onBeforeload?: (event: React.SyntheticEvent, widget: Record<string, unknown>) => void;
+}
+/**
+ * Combined props for the WmTime component, including base WaveMaker props.
+ */
+export type WmTimeProps = Prettify<TimeProps & BaseProps>;
+/**
+ * Parsed time format options.
+ */
+export interface TimeFormatOptions {
+    /** The parsed format string. */
+    format: string;
+    /** Whether the format includes seconds. */
+    hasSeconds: boolean;
+    /** Whether the format uses 12-hour time. */
+    is12Hour: boolean;
+}
+/**
+ * Result of a time validation check.
+ */
+export interface ValidationResult {
+    /** Whether the time value is valid. */
+    isValid: boolean;
+    /** The type of validation error, if any. */
+    errorType?: "mintime" | "maxtime" | "format" | "range";
+    /** Human-readable validation error message. */
+    message?: string;
+}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/input/epoch/time/utils.d.ts

@@ -0,0 +1,24 @@
+import moment from "moment-timezone";
+import { ValidationResult, TimeFormatOptions } from "./props";
+import { ValidatorConfig } from "@/components/data/form/form-controller/props";
+export declare function parseTimeFormat(timepattern?: string): TimeFormatOptions;
+export declare function getSupportedTimeFormats(): string[];
+export declare function parseTimeValue(value: any, timepattern: string): moment.Moment | null;
+export declare function formatDisplayTimeValue(value: Date | moment.Moment | null, pattern: string): string;
+export declare function validateTimeRange(timeValue: Date | moment.Moment | null, minTime?: Date | string | null, maxTime?: Date | string | null, validators?: ValidatorConfig[], validationmessage?: string): ValidationResult;
+export declare function validateTimeFormat(inputValue: string, pattern: string, required: boolean, validationmessage?: string): ValidationResult;
+export declare function parseTimeObj(timeValue: string | Date | null | undefined): Date | null;
+export declare const DEFAULT_CLASS = "input-group app-timeinput";
+export declare const DEFAULT_TIMEPATTERN = "h:mm:ss A";
+export declare const DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
+export declare const READONLY_STYLES: {
+    cursor: string;
+};
+export declare function updateListener(name: string | undefined, listener: any, props: any, displayValue: string, timestamp: string | null | undefined, datavalue: string | null | undefined): void;
+export declare function createWidgetEvent(args: {
+    type: string;
+    name?: string;
+    value?: any;
+    anchor?: HTMLElement | null;
+    originalEvent?: React.SyntheticEvent | Event | undefined;
+}): React.SyntheticEvent;