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

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/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

@@ -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/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/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/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")[];

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

@@ -30,6 +30,7 @@ declare const WmSliderStandalone: 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")[];
@@ -129,6 +130,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/text/index.d.ts

@@ -41,6 +41,7 @@ declare const WmTextStandalone: import("react").ComponentType<import("../../data
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -146,6 +147,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/input/text/index.js

@@ -84,11 +84,13 @@ const WmText = memo(
     const [isTouched, setIsTouched] = useState(false);
     const [isAutofilled, setIsAutofilled] = useState(false);
     const ref = useRef(null);
+    const wrapperRef = useRef(null);
     const cursorPositionRef = useRef(0);
     const displayError = error || isDirty && showError;
     const isInternalChange = useRef(false);
     const prevValueRef = useRef(datavalue);
     useEffect(() => {
+      var _a, _b, _c;
       const normalizedValue = sanitizeInputValue(datavalue);
       if (!isInternalChange.current && normalizedValue !== rawValue) {
         setRawValue(normalizedValue);
@@ -100,6 +102,12 @@ const WmText = memo(
       if (datavalue === "" || datavalue === null || datavalue === void 0) {
         setIsAutofilled(false);
       }
+      const type_attr = (_a = wrapperRef.current) == null ? void 0 : _a.getAttribute("type");
+      if (type && !type_attr) {
+        (_b = wrapperRef.current) == null ? void 0 : _b.setAttribute("type", type);
+      } else {
+        (_c = wrapperRef.current) == null ? void 0 : _c.removeAttribute("type");
+      }
     }, [datavalue]);
     const validateInput = useCallback(
       (value) => {
@@ -360,6 +368,7 @@ const WmText = memo(
     return /* @__PURE__ */ jsx(
       TextField,
       __spreadProps(__spreadValues({}, events), {
+        ref: wrapperRef,
         hidden: props.hidden,
         title: hint || "Text Input",
         name,
@@ -399,7 +408,6 @@ const WmText = memo(
                 name: "leadingIcon",
                 className: "btn-leading-icon",
                 onClick: handleLeadingIconClick,
-                "aria-hidden": "true",
                 tabIndex: -1,
                 children: /* @__PURE__ */ jsx(
                   WmAppIcon,
@@ -418,7 +426,6 @@ const WmText = memo(
                 name: "trailingIcon",
                 className: "btn-trailing-icon",
                 onClick: handleTrailingIconClick,
-                "aria-hidden": "true",
                 tabIndex: -1,
                 children: /* @__PURE__ */ jsx(
                   WmAppIcon,

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

@@ -27,6 +27,7 @@ declare const WmTextareaStandalone: 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")[];
@@ -117,6 +118,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/upload/index.d.ts

@@ -21,6 +21,7 @@ declare const WithForm: React.NamedExoticComponent<import("../../data/form/form-
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -106,6 +107,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/navbar/index.d.ts

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

package/components/navbar/nav-item/index.d.ts

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

package/components/navigation/breadcrumb/index.d.ts

@@ -22,6 +22,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/navigation/menu/index.d.ts

@@ -39,6 +39,7 @@ declare const _default: React.ComponentType<{
     datavalue?: any;
     width?: string | number;
     height?: string | number;
+    class?: string;
     onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
     onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
     onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;

package/components/navigation/menu/index.js

@@ -314,7 +314,8 @@ const WmMenu = memo((props) => {
         link: (node == null ? void 0 : node[itemlink]) || dataObject[itemlink] || dataObject["link"],
         hint: (node == null ? void 0 : node[hint]) || dataObject[hint],
         disabled: (node == null ? void 0 : node.disabled) || dataObject.disabled,
-        children: children2
+        children: children2,
+        itemClass: (node == null ? void 0 : node.class) || dataObject["class"]
       };
     },
     [itemlabel, itemicon, itemlink, hint, itemchildren]
@@ -331,23 +332,25 @@ const WmMenu = memo((props) => {
     [menualign]
   );
   const getMenuLayoutStyles = useCallback(() => {
+    const positionStyles = {
+      inset: "100% auto auto 0px",
+      transform: "translateY(0px)"
+    };
     switch (menulayout) {
       case LAYOUT.HORIZONTAL:
-        return {
+        return __spreadProps(__spreadValues({}, positionStyles), {
           display: "flex",
           flexDirection: "row"
-        };
+        });
       case LAYOUT.GRID:
-        return {
+        return __spreadProps(__spreadValues({}, positionStyles), {
           display: "grid",
           gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
           gap: "8px"
-        };
+        });
       case LAYOUT.VERTICAL:
       default:
-        return {
-          display: "block"
-        };
+        return __spreadValues({}, positionStyles);
     }
   }, [menulayout]);
   const handleMenuClick = useCallback(
@@ -636,7 +639,7 @@ const WmMenu = memo((props) => {
       if (!nodes || !Array.isArray(nodes)) return null;
       return nodes.map((node, index) => {
         var _a2;
-        const { label, icon, link, hint: hint2, disabled, children: children2 } = getNodeProperties(node);
+        const { label, icon, link, hint: hint2, disabled, children: children2, itemClass } = getNodeProperties(node);
         const itemPath = pathPrefix ? `${pathPrefix}-${index}` : `${index}`;
         const nodeValueLink = (_a2 = node == null ? void 0 : node.value) == null ? void 0 : _a2.link;
         const isActive = nodeValueLink && typeof nodeValueLink === "string" ? isPathMatchingLink(path, nodeValueLink) : link ? isPathMatchingLink(path, link) : false;
@@ -659,6 +662,7 @@ const WmMenu = memo((props) => {
             className: clsx(
               children2 && children2.length > 0 && "dropdown-submenu",
               "app-menu-item",
+              itemClass,
               {
                 active: isActive,
                 hovered: isHovered

package/components/navigation/menu/props.d.ts

@@ -56,6 +56,7 @@ export interface MenuNode {
     nodeRef?: React.RefObject<HTMLDivElement | null>;
     dataObject?: any;
     isactive?: boolean;
+    class?: string;
 }
 export interface WmMenuExtendedProps extends Omit<WmMenuProps, "name"> {
     styles?: React.CSSProperties;

package/components/navigation/popover/index.d.ts

@@ -54,6 +54,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")[];