@wavemaker-ai/react-runtime 1.0.0-next.27766

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

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