@wavemaker-ai/react-runtime 1.0.0-rc.330 → 1.0.0-rc.334

package/components/dialogs/dialog-actions/index.js

@@ -1,9 +1,18 @@
 import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
 import DialogActions from "@mui/material/DialogActions";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
 const WmDialogFooter = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ jsx(DialogActions, { className: "app-dialog-footer modal-footer", children });
+  const { children, className, styles, hidden } = props;
+  return /* @__PURE__ */ jsx(
+    DialogActions,
+    {
+      className: clsx("app-dialog-footer modal-footer", className),
+      style: styles,
+      hidden: hidden != null ? hidden : false,
+      children
+    }
+  );
 };
 WmDialogFooter.displayName = "WmDialogFooter";
 var dialog_actions_default = withBaseWrapper(WmDialogFooter);

package/components/dialogs/dialog-body/index.d.ts

@@ -23,6 +23,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/dialog-content/index.d.ts

@@ -26,6 +26,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/dialog-header/index.d.ts

@@ -40,6 +40,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/iframe-dialog/index.d.ts

@@ -39,6 +39,7 @@ declare const WmIframeDialogStandalone: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -135,6 +136,7 @@ declare const _default: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/login-dialog/index.d.ts

@@ -38,6 +38,7 @@ declare const WmLoginDialogStandalone: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -123,6 +124,7 @@ declare const _default: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/page-dialog/index.d.ts

@@ -33,6 +33,7 @@ declare const WmPageDialogStandalone: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -122,6 +123,7 @@ declare const _default: {
         width?: number | string;
         height?: number | string;
         className?: string;
+        class?: string;
         conditionalstyle?: React.CSSProperties;
         conditionalclass?: string;
         showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/dialogs/withDialogWrapper.js

@@ -30,8 +30,9 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useState, useEffect, useMemo, useRef } from "react";
+import { useCallback, useState, useEffect, useMemo, useRef, useContext } from "react";
 import DialogService from "../../core/dialog.service";
+import { PopoverContext } from "../../context/PopoverContext";
 const BaseDialog = (Component) => {
   const WrappedComponent = (props) => {
     const _a = props, {
@@ -52,6 +53,8 @@ const BaseDialog = (Component) => {
       "appLocale"
     ]);
     const [dialogOpen, setDialogOpen] = useState(!!isopen);
+    const popoverContext = useContext(PopoverContext);
+    const wasDialogOpenRef = useRef(!!isopen);
     const appLocaleMessages = useMemo(
       () => {
         var _a2;
@@ -65,15 +68,22 @@ const BaseDialog = (Component) => {
       setDialogOpen(!!isopen);
       isDialogOpenRef.current = !!isopen;
     }, [isopen]);
+    useEffect(() => {
+      if (wasDialogOpenRef.current && !dialogOpen) {
+        popoverContext == null ? void 0 : popoverContext.onDialogClose();
+      }
+      wasDialogOpenRef.current = dialogOpen;
+    }, [dialogOpen, popoverContext]);
     const handleTransitionEntered = useCallback(() => {
       if (onOpened) {
         onOpened();
       }
     }, [onOpened]);
     const handleOpen = useCallback(() => {
+      popoverContext == null ? void 0 : popoverContext.closeForDialog();
       setDialogOpen(true);
       isDialogOpenRef.current = true;
-    }, []);
+    }, [popoverContext]);
     const handleClose = useCallback(
       (event) => {
         if (isDialogOpenRef.current) {

package/components/form/button/index.d.ts

@@ -34,6 +34,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/form/button-group/index.d.ts

@@ -26,6 +26,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/calendar/index.d.ts

@@ -29,6 +29,7 @@ export declare const WmCalendar: React.ForwardRefExoticComponent<Omit<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -89,6 +90,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/chips/index.d.ts

@@ -62,6 +62,7 @@ declare const WmChipsStandalone: React.ComponentType<import("../../data/form/for
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -188,6 +189,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/color-picker/index.d.ts

@@ -29,6 +29,7 @@ declare const WmColorPickerStandalone: React.ComponentType<import("../../data/fo
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -118,6 +119,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/composite/index.d.ts

@@ -26,6 +26,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/composite/index.js

@@ -10,6 +10,7 @@ const CAPTION_POSITION = {
   top: "caption-top",
   floating: "caption-floating"
 };
+const getPlaceholderOption = (input) => input instanceof HTMLSelectElement ? input.querySelector("#placeholderOption") : null;
 function WmComposite(props) {
   const { children, styles, className, captionposition = "left", id, required } = props;
   const containerRef = useRef(null);
@@ -17,6 +18,11 @@ function WmComposite(props) {
   const hasInputValue = useCallback(
     (input) => {
       var _a;
+      if (input instanceof HTMLSelectElement) {
+        return Array.from(input.selectedOptions).some(
+          (option) => option.id !== "placeholderOption" && Boolean(option.value.trim())
+        );
+      }
       return Boolean((_a = input.value) == null ? void 0 : _a.trim());
     },
     []
@@ -32,7 +38,12 @@ function WmComposite(props) {
       const target = event.target;
       const originalPlaceholder = target.getAttribute("data-original-placeholder");
       if (originalPlaceholder) {
-        target.setAttribute("placeholder", originalPlaceholder);
+        const placeholderOption = getPlaceholderOption(target);
+        if (placeholderOption) {
+          placeholderOption.textContent = originalPlaceholder;
+        } else {
+          target.setAttribute("placeholder", originalPlaceholder);
+        }
       }
     },
     [isFloating, toggleFloatActive]
@@ -42,21 +53,31 @@ function WmComposite(props) {
       if (!isFloating) return;
       const target = event.target;
       toggleFloatActive(hasInputValue(target));
-      target.setAttribute("placeholder", "");
+      const placeholderOption = getPlaceholderOption(target);
+      if (placeholderOption) {
+        placeholderOption.textContent = "";
+      } else {
+        target.setAttribute("placeholder", "");
+      }
     },
     [isFloating, toggleFloatActive, hasInputValue]
   );
   useEffect(() => {
     if (!isFloating || !containerRef.current) return;
     const container = containerRef.current;
-    const INPUT_SELECTOR = "input, select, textarea";
+    const INPUT_SELECTOR = 'input, select, textarea:not([aria-hidden="true"])';
     const inputElements = container.querySelectorAll(INPUT_SELECTOR);
     if (inputElements.length === 0) return;
     inputElements.forEach((input) => {
-      const originalPlaceholder = input.getAttribute("placeholder");
+      const placeholderOption = getPlaceholderOption(input);
+      const originalPlaceholder = (placeholderOption == null ? void 0 : placeholderOption.textContent) || input.getAttribute("placeholder");
       if (originalPlaceholder) {
         input.setAttribute("data-original-placeholder", originalPlaceholder);
-        input.setAttribute("placeholder", "");
+        if (placeholderOption) {
+          placeholderOption.textContent = "";
+        } else {
+          input.setAttribute("placeholder", "");
+        }
       }
       if (hasInputValue(input)) {
         toggleFloatActive(true);
@@ -68,7 +89,12 @@ function WmComposite(props) {
       inputElements.forEach((input) => {
         const originalPlaceholder = input.getAttribute("data-original-placeholder");
         if (originalPlaceholder) {
-          input.setAttribute("placeholder", originalPlaceholder);
+          const placeholderOption = getPlaceholderOption(input);
+          if (placeholderOption) {
+            placeholderOption.textContent = originalPlaceholder;
+          } else {
+            input.setAttribute("placeholder", originalPlaceholder);
+          }
           input.removeAttribute("data-original-placeholder");
         }
         input.removeEventListener("focus", handleFocus);

package/components/input/default/checkbox/index.d.ts

@@ -28,6 +28,7 @@ declare const WmCheckboxStandalone: React.ComponentType<import("../../../data/fo
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -119,6 +120,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/default/checkboxset/index.d.ts

@@ -50,6 +50,7 @@ declare const WmCheckboxsetStandalone: React.ComponentType<import("../../../data
     padding?: string;
     margin?: string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -160,6 +161,7 @@ declare const _default: React.ComponentType<{
     padding?: string;
     margin?: string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/default/radioset/index.d.ts

@@ -43,6 +43,7 @@ declare const WmRadiosetStandalone: React.ComponentType<import("../../../data/fo
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -149,6 +150,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/default/switch/index.d.ts

@@ -43,6 +43,7 @@ declare const WmSwitchStandalone: React.ComponentType<import("../../../data/form
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -145,6 +146,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/epoch/date/index.d.ts

@@ -20,6 +20,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

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

@@ -153,7 +153,7 @@ const WmDate = forwardRef((props, ref) => {
     () => {
       var _a2;
       return [
-        defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "MMM d, y",
+        defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "yyyy-MM-dd",
         selectedLocale || (listener == null ? void 0 : listener.selectedLocale) || "en"
       ];
     },
@@ -255,6 +255,7 @@ const WmDate = forwardRef((props, ref) => {
     if (!dateValue) return "";
     try {
       const momentDate = moment(dateValue).locale(currentLocale);
+      if (!momentDate.isValid()) return "";
       const momentPattern = convertToMomentFormat(datepattern);
       return momentDate.format(momentPattern);
     } catch (e) {

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

@@ -57,10 +57,12 @@ const parseExcludedDates = (excludedates, getDateObj) => {
 };
 const defaultGetDateObj = (date) => {
   if (!date) return null;
-  if (date instanceof Date) return date;
+  if (date instanceof Date) return isNaN(date.getTime()) ? null : date;
   if (typeof date === "string") {
     const parsedDate = moment(date).toDate();
-    return isNaN(parsedDate.getTime()) ? new Date(date) : parsedDate;
+    if (!isNaN(parsedDate.getTime())) return parsedDate;
+    const fallbackDate = new Date(date);
+    return isNaN(fallbackDate.getTime()) ? null : fallbackDate;
   }
   return null;
 };

package/components/input/epoch/datetime/index.d.ts

@@ -20,6 +20,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

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

@@ -96,8 +96,8 @@ const WmDateTime = memo(
     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";
+        const datePart = defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "yyyy-MM-dd";
+        const timePart = defaultTimeFormat || ((_b2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _b2.time) || "hh:mm a";
         return `${datePart} ${timePart}`;
       };
       return combinedFromParts();
@@ -586,10 +586,12 @@ const WmDateTime = memo(
               },
               InputLabelProps: {
                 shrink: floatinglabel ? void 0 : false,
-                className: floatinglabel ? "wm-datetime-input-label" : void 0
+                className: floatinglabel ? "wm-datetime-input-label" : void 0,
+                sx: floatinglabel ? { ".app-composite-widget.caption-floating &": { display: "none" } } : void 0
               },
               inputProps: __spreadValues(__spreadValues({
                 accessKey: shortcutkey,
+                "aria-label": arialabel || floatinglabel,
                 "aria-invalid": invalidFormat || dateNotInRange,
                 className: "form-control app-textbox display-input wm-datetime-html-input"
               }, disabled ? { disabled: true } : {}), readonly ? { readOnly: true } : {}),

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

@@ -45,12 +45,12 @@ export interface DateTimeProps {
     defaultDateTimeFormat?: string;
     /**
      * Default date segment for display when `datepattern` is unset and `defaultDateTimeFormat` is not set.
-     * Falls back to `listener.localeFormats.date`, then `"MMM d, y"`.
+     * Falls back to `listener.localeFormats.date`, then `"yyyy-MM-dd"`.
      */
     defaultDateFormat?: string;
     /**
      * Default time segment for display when `datepattern` is unset and `defaultDateTimeFormat` is not set.
-     * Falls back to `listener.localeFormats.time`, then `"h:mm:ss a"`.
+     * Falls back to `listener.localeFormats.time`, then `"hh:mm a"`.
      */
     defaultTimeFormat?: string;
     /**

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

@@ -20,6 +20,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

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

@@ -9,7 +9,7 @@ export declare function validateTimeRange(timeValue: Date | moment.Moment | null
 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_TIMEPATTERN = "hh:mm a";
 export declare const DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
 export declare const READONLY_STYLES: {
     cursor: string;

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

@@ -76,7 +76,7 @@ function formatDisplayTimeValue(value, pattern) {
     if (pattern === "timestamp") {
       return momentObj.valueOf().toString();
     }
-    return momentObj.isValid() ? momentObj.format(pattern) : "";
+    return momentObj.isValid() ? momentObj.format(pattern.replace(/\ba\b/g, "A")) : "";
   } catch (error) {
     console.warn("Error formatting display value:", error);
     return "";
@@ -178,7 +178,7 @@ function parseTimeObj(timeValue) {
   }
 }
 const DEFAULT_CLASS = "input-group app-timeinput";
-const DEFAULT_TIMEPATTERN = "h:mm:ss A";
+const DEFAULT_TIMEPATTERN = "hh:mm a";
 const DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
 const READONLY_STYLES = {
   cursor: "not-allowed"

package/components/input/fileupload/index.d.ts

@@ -52,6 +52,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/fileupload/index.js

@@ -250,7 +250,8 @@ const WmFileUpload = memo(
       "onDelete",
       "onBeforedelete",
       "onError",
-      "hidden"
+      "hidden",
+      "className"
     ];
     const propsChanged = keysToCheck.some((key) => prevProps[key] !== nextProps[key]);
     const filesChanged = prevProps.datasource !== nextProps.datasource || prevProps.deletedatasource !== nextProps.deletedatasource;

package/components/input/fileupload/useFileUpload.js

@@ -30,7 +30,6 @@ const useFileUpload = (props) => {
     disabled = !fileUploadConstants.DEFAULT_VALUES.ENABLED,
     contenttype = "",
     maxfilesize,
-    uploadpath,
     datasource,
     extensions,
     filetype,
@@ -104,7 +103,7 @@ const useFileUpload = (props) => {
       const eventHandler = (_b2 = (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]) == null ? void 0 : _b2[eventName];
       return eventHandler ? eventHandler(payload.$event, listener.Widgets[name], payload.files) || true : true;
     },
-    [listener, name]
+    [name]
   );
   const fileUploadProgress = (progress) => {
     setUploadedFiles((prevFiles) => {
@@ -125,26 +124,18 @@ const useFileUpload = (props) => {
       });
     });
   };
-  useEffect(() => {
-    const progressObs = datasource && datasource._progressObservable;
-    if (progressObs) {
-      progressObs.subscribe((progress) => {
-        var _a2, _b2;
-        fileUploadProgress(progress);
-        if (progress.progress === 100) {
-          (_a2 = listener == null ? void 0 : listener.App) == null ? void 0 : _a2.notifyApp("File uploaded successfully", "Success");
-        } else if (progress.errMsg) {
-          (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp("File upload failed", "Error");
-        }
-      });
-    }
-    return () => {
-      const progressObs2 = datasource && datasource._progressObservable;
-      if (progressObs2 == null ? void 0 : progressObs2.unsubscribe) {
-        progressObs2.unsubscribe();
+  const subscribeToProgress = useCallback((progressObs) => {
+    if (!progressObs) return;
+    progressObs.subscribe((progress) => {
+      var _a2, _b2;
+      fileUploadProgress(progress);
+      if (progress.progress === 100) {
+        (_a2 = listener == null ? void 0 : listener.App) == null ? void 0 : _a2.notifyApp("File uploaded successfully", "Success");
+      } else if (progress.errMsg) {
+        (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp("File upload failed", "Error");
       }
-    };
-  }, [invokeEventCallback]);
+    });
+  }, []);
   useEffect(() => {
     const selected = getChooseFilter();
     setChooseFilter(selected);
@@ -193,7 +184,7 @@ const useFileUpload = (props) => {
     window.removeEventListener("focus", disableDropZone);
   };
   const onBeforeSelectEventCall = ($event, $files) => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2;
     const files = getValidFiles(
       $files,
       contenttype,
@@ -237,14 +228,18 @@ const useFileUpload = (props) => {
         });
         if (datasource) {
           datasource._progressObservable = eventObserver();
+          subscribeToProgress(datasource._progressObservable);
           datasource.dataBinding = datasource.dataBinding || {};
           datasource.dataBinding.files = filesWithIds;
           datasource.dataSet = filesWithIds;
         }
         setUploadedFiles((prev) => multiple ? [...prev, ...filesWithIds] : [...filesWithIds]);
         listener == null ? void 0 : listener.onChange(name, { selectedFiles: filesWithIds });
-        const selectedFile = (_d = filesWithIds[0]) != null ? _d : (_c = (_b2 = fileInputRef.current) == null ? void 0 : _b2.files) == null ? void 0 : _c[0];
-        onSelect == null ? void 0 : onSelect($event, selectedFile, filesWithIds);
+        onSelect == null ? void 0 : onSelect(
+          $event,
+          (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name],
+          filesWithIds
+        );
       }
     }
   };

package/components/input/number/index.d.ts

@@ -35,6 +35,7 @@ declare const WmNumberStandalone: React.ComponentType<import("../../data/form/fo
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -132,6 +133,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/input/rating/index.d.ts

@@ -56,6 +56,7 @@ declare const WmRatingStandalone: React.ComponentType<import("../../data/form/fo
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -176,6 +177,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];