@wavemaker-ai/react-runtime 1.0.0-rc.647712 → 12.0.0-rc.647733

package/components/data/table/utils/index.js

@@ -18,15 +18,12 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import {
-  forEach,
-  entries,
   size,
   isEmpty,
   isArray,
   map,
   get,
   trim,
-  startsWith,
   findIndex,
   assign,
   floor,
@@ -409,74 +406,6 @@ const getActionButtonClass = (action) => {
 const getTableActionButtonClass = (action) => {
   return `btn ${get(action, "className", "btn-primary")} ${isAddNewAction(get(action, "key")) ? "add-action" : ""}`;
 };
-const validateEditingFields = (fieldRefs, editingRowId) => {
-  const invalidElements = [];
-  const invalidFieldKeys = [];
-  const shouldValidateField = (fieldKey) => {
-    if (!editingRowId) return true;
-    return startsWith(fieldKey, `${editingRowId}_`);
-  };
-  forEach(entries(fieldRefs), ([fieldKey, fieldElement]) => {
-    if (!shouldValidateField(fieldKey) || !fieldElement) {
-      return;
-    }
-    let isInvalid = false;
-    const inputs = fieldElement.querySelectorAll("input, select, textarea");
-    forEach(inputs, (input) => {
-      if (input && !input.validity.valid && input.hasAttribute("required")) {
-        invalidElements.push(input);
-        isInvalid = true;
-      }
-      if (input && input.classList.contains("ng-invalid")) {
-        invalidElements.push(input);
-        isInvalid = true;
-      }
-      if (input && input.hasAttribute("required") && !trim(input.value)) {
-        invalidElements.push(input);
-        isInvalid = true;
-      }
-    });
-    if (fieldElement.hasAttribute("required")) {
-      const inputEl = fieldElement.querySelector("input, textarea, select");
-      if (inputEl && !trim(inputEl.value)) {
-        invalidElements.push(inputEl);
-        isInvalid = true;
-      }
-    }
-    if (isInvalid) {
-      invalidFieldKeys.push(fieldKey);
-    }
-  });
-  if (size(invalidElements) > 0) {
-    const logPrefix = editingRowId ? `[${editingRowId}]` : "[Validation]";
-    console.log(`${logPrefix} Validation failed: Found ${size(invalidElements)} invalid elements`);
-    const firstInvalidElement = get(invalidElements, "[0]");
-    if (firstInvalidElement) {
-      const cell = firstInvalidElement.closest("td, .app-datagrid-cell, .form-field");
-      if (cell) {
-        const focusTarget = cell.querySelector(
-          "[focus-target], input, textarea, select"
-        );
-        if (focusTarget) {
-          setTimeout(() => {
-            focusTarget.focus();
-            console.log(`${logPrefix} Focused first invalid field:`, focusTarget);
-          }, 0);
-        }
-      } else {
-        setTimeout(() => {
-          firstInvalidElement.focus();
-        }, 0);
-      }
-    }
-  }
-  return {
-    isValid: isEmpty(invalidElements),
-    invalidElements,
-    invalidFieldKeys,
-    firstInvalidElement: size(invalidElements) > 0 ? get(invalidElements, "[0]") : void 0
-  };
-};
 const getButtonClasses = (action, spacing = "normal", isGridEditMode = false, isLoading = false) => {
   const baseClass = `btn ${get(action, "className", "btn-primary")} ${isAddNewAction(get(action, "key")) ? "add-action" : ""}`;
   const spacingClass = spacing === "condensed" ? "btn-sm" : "";
@@ -659,11 +588,17 @@ import {
   INTERACTIVE_ROLES,
   INTERACTIVE_DATA_ROLES,
   INTERACTIVE_TAG_NAMES,
+  SELECTION_COLUMN_DATA_ROLES,
   UNSUPPORTED_STATE_PERSISTENCE_TYPES
 } from "./constants";
 import { renderDisplayCell } from "./renderDisplayCell";
 import { buildSelectionColumns } from "./buildSelectionColumns";
-import { validateField, resetValidationState, updateValidationErrors } from "./validation";
+import {
+  cloneValidators,
+  collectNativeValidityErrors,
+  focusFirstInvalidCell,
+  isColumnValidatable
+} from "./columnValidation";
 import {
   hasInteractiveClass,
   hasInteractiveAttributes,
@@ -694,6 +629,7 @@ export {
   INTERACTIVE_ROLES,
   INTERACTIVE_TAG_NAMES,
   INTERNAL_PROPERTIES,
+  SELECTION_COLUMN_DATA_ROLES,
   TABLE_CSS_CLASSES2 as TABLE_CSS_CLASSES,
   TABLE_DATA_STATES,
   TABLE_MESSAGES,
@@ -702,6 +638,8 @@ export {
   buildSelectionColumns,
   cleanRowData,
   clearTableState,
+  cloneValidators,
+  collectNativeValidityErrors,
   convertFilterArrayToObject,
   convertFilterObjectToArray,
   createDataColumn,
@@ -712,6 +650,7 @@ export {
   distributeColumnWidths,
   extractDataArray,
   flattenTableStructure,
+  focusFirstInvalidCell,
   getActionButtonClass,
   getActionColumnSize,
   getAggregateFunctions,
@@ -733,6 +672,7 @@ export {
   hasInteractiveClass,
   isAddNewAction,
   isColumnDomHidden,
+  isColumnValidatable,
   isColumnVisibleForViewport,
   isDataColumn,
   isDeleteAction,
@@ -746,13 +686,9 @@ export {
   parseTableStructureWithGroups,
   parseWidth,
   renderDisplayCell,
-  resetValidationState,
   rowExistsInDataset,
   saveTableState,
   selectionStateHelpers,
   shouldShowPagination,
-  shouldShowPanelHeading,
-  updateValidationErrors,
-  validateEditingFields,
-  validateField
+  shouldShowPanelHeading
 };

package/components/data/table/utils/selectionUtils.js

@@ -3,7 +3,8 @@ import {
   INTERACTIVE_CLASSES,
   INTERACTIVE_ROLES,
   INTERACTIVE_DATA_ROLES,
-  INTERACTIVE_TAG_NAMES
+  INTERACTIVE_TAG_NAMES,
+  SELECTION_COLUMN_DATA_ROLES
 } from "./constants";
 const hasInteractiveClass = (element) => {
   if (!element.className || typeof element.className !== "string") return false;
@@ -24,9 +25,12 @@ const hasInteractiveAttributes = (element) => {
     return true;
   }
   const dataRole = element.getAttribute("data-role");
+  if (dataRole && SELECTION_COLUMN_DATA_ROLES.includes(dataRole)) {
+    return false;
+  }
   if (dataRole) {
     for (const interactiveRole of INTERACTIVE_DATA_ROLES) {
-      if (dataRole.includes(interactiveRole)) {
+      if (dataRole === interactiveRole) {
         return true;
       }
     }
@@ -41,14 +45,18 @@ const isSelectionCheckboxRenamed = (event) => {
   const checkbox = (_b = row == null ? void 0 : row.querySelector) == null ? void 0 : _b.call(row, 'input[type="checkbox"]');
   return !!checkbox && checkbox.getAttribute("name") !== MULTI_SELECT_INPUT_NAME;
 };
+const isSelectionColumnTarget = (target) => {
+  if (!(target == null ? void 0 : target.closest)) return false;
+  return SELECTION_COLUMN_DATA_ROLES.some((role) => target.closest(`[data-role="${role}"]`));
+};
 const isInteractiveElement = (event) => {
   const target = event.target;
-  if (INTERACTIVE_TAG_NAMES.includes(target.tagName)) {
-    return true;
+  if (isSelectionColumnTarget(target)) {
+    return false;
   }
   let element = target;
   while (element) {
-    if (hasInteractiveClass(element) || hasInteractiveAttributes(element)) {
+    if (INTERACTIVE_TAG_NAMES.includes(element.tagName) || hasInteractiveClass(element) || hasInteractiveAttributes(element)) {
       return true;
     }
     element = element.parentElement;

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

@@ -119,6 +119,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -82,6 +82,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue: any;
     defaultvalue?: any;

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

@@ -93,6 +93,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -84,6 +84,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -104,6 +104,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -99,6 +99,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -96,6 +96,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -122,9 +122,11 @@ const WmDateTime = memo(
     const [datePickerView, setDatePickerView] = useState("day");
     const [isCurrentMonth, setIsCurrentMonth] = useState(true);
     const [validationFailureMessage, setValidationFailureMessage] = useState("");
+    const [isDirty, setIsDirty] = useState(false);
     const inputRef = useRef(null);
     const onBeforeloadExecutedRef = useRef(false);
     const anchorRef = useRef(null);
+    const showValidationError = isDirty && Boolean(validationFailureMessage || invalidFormat || dateNotInRange);
     const isReadOnly = useMemo(
       () => readonly || isCurrentDate || dataentrymode !== "undefined" && dataentrymode !== "default",
       [readonly, dataentrymode, isCurrentDate]
@@ -241,6 +243,7 @@ const WmDateTime = memo(
     );
     const handleDateSelection = useCallback(
       (date) => {
+        setIsDirty(true);
         if (!date) {
           handleFinalDateChange(null);
           setIsDateOpen(false);
@@ -300,6 +303,7 @@ const WmDateTime = memo(
     }, []);
     const handleTimeSelection = useCallback(
       (time) => {
+        setIsDirty(true);
         if (!time || !tempDateValue) return;
         const combinedDateTime = moment(tempDateValue).hour(moment(time).hour()).minute(moment(time).minute()).second(moment(time).second()).toDate();
         setLocalDateValue(combinedDateTime);
@@ -328,6 +332,7 @@ const WmDateTime = memo(
       (event) => {
         var _a2, _b2;
         if (dataentrymode === "picker") return;
+        setIsDirty(true);
         const value = event.target.value;
         setDisplayValue(value);
         if (!value) {
@@ -433,11 +438,13 @@ const WmDateTime = memo(
       [excludedDaysArray, excludedDatesArray]
     );
     const handleToday = useCallback(() => {
+      setIsDirty(true);
       const today = moment().toDate();
       handleFinalDateChange(today);
       setIsTimeOpen(true);
     }, [handleFinalDateChange]);
     const handleClear = useCallback(() => {
+      setIsDirty(true);
       handleFinalDateChange(null);
     }, [handleFinalDateChange]);
     useEffect(() => {
@@ -565,6 +572,7 @@ const WmDateTime = memo(
               onBlur: (event) => {
                 var _a2;
                 if (readonly) return;
+                setIsDirty(true);
                 onBlur && name && onBlur(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
               },
               onChange: handleInputChange,
@@ -578,8 +586,8 @@ const WmDateTime = memo(
               },
               autoFocus: autofocus,
               required,
-              error: Boolean(validationFailureMessage || invalidFormat || dateNotInRange),
-              helperText: validationFailureMessage || (invalidFormat ? validationmessage || "Invalid date format" : dateNotInRange ? validationmessage || "Date not in valid range" : ""),
+              error: showValidationError,
+              helperText: showValidationError ? validationFailureMessage || (invalidFormat ? validationmessage || "Invalid date format" : dateNotInRange ? validationmessage || "Date not in valid range" : "") : "",
               InputProps: {
                 readOnly: isReadOnly,
                 placeholder: floatinglabel ? void 0 : placeholder

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

@@ -89,6 +89,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -113,6 +113,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -92,6 +92,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -89,6 +89,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -98,6 +98,7 @@ declare const _default: import("react").ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -83,6 +83,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

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

@@ -78,6 +78,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

package/components/layout/footer/index.js

@@ -1,10 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { Box } from "@mui/material";
+import { PartialContentWrapper } from "../../common";
 const DEFAULT_CLASS = "app-footer clearfix";
 const WmFooter = (props) => {
-  const { styles, children, render, className, id } = props;
-  return /* @__PURE__ */ jsx(Box, { component: "div", sx: styles, className: clsx(DEFAULT_CLASS, className), id, children: render ? render(props) : children });
+  const { styles, children, render, className, id, content } = props;
+  const rendered = render ? render(props) : children;
+  return /* @__PURE__ */ jsx(Box, { component: "div", sx: styles, className: clsx(DEFAULT_CLASS, className), id, children: /* @__PURE__ */ jsx(PartialContentWrapper, { content, children: rendered }) });
 };
 WmFooter.displayName = "WmFooter";
 var footer_default = WmFooter;

package/components/layout/footer/props.d.ts

@@ -3,6 +3,7 @@ export interface FooterProps {
     className?: string;
     styles?: React.CSSProperties;
     id?: string;
+    content?: string;
     render?: (props: Record<string, any>) => React.ReactNode;
 }
 export type WmFooterProps = FooterProps;

package/components/layout/header/index.js

@@ -1,10 +1,36 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import { PartialContentWrapper } from "../../common";
+import { PageLayoutContext } from "../../page/page-context";
 const DEFAULT_CLASS = "app-header clearfix app-header-shrink";
 const WmHeader = (props) => {
-  const { styles, children, render, className, id } = props;
-  return /* @__PURE__ */ jsx(Box, { component: "header", className: clsx(DEFAULT_CLASS, className), id, sx: styles, children: /* @__PURE__ */ jsx(Box, { component: "div", className: "app-header-container", children: render ? render(props) : children }) });
+  const { styles, children, render, className, id, content } = props;
+  const {
+    hasLeftPanel,
+    leftPanelExpanded = false,
+    toggleLeftPanel
+  } = useContext(PageLayoutContext);
+  const rendered = render ? render(props) : children;
+  const handleLeftNavToggle = (event) => {
+    event.stopPropagation();
+    toggleLeftPanel == null ? void 0 : toggleLeftPanel();
+  };
+  return /* @__PURE__ */ jsxs(Box, { component: "header", className: clsx(DEFAULT_CLASS, className), id, sx: styles, children: [
+    hasLeftPanel && /* @__PURE__ */ jsx(Box, { component: "div", className: "app-header-menu", "data-role": "page-left-panel-icon", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: "app-header-action btn-text",
+        "aria-expanded": leftPanelExpanded,
+        "aria-label": "Expand Left navigation",
+        onClick: handleLeftNavToggle,
+        children: /* @__PURE__ */ jsx("i", { className: "wi wi-menu", "aria-hidden": "true" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { component: "div", className: "app-header-container", children: /* @__PURE__ */ jsx(PartialContentWrapper, { content, children: rendered }) })
+  ] });
 };
 WmHeader.displayName = "WmHeader";
 var header_default = WmHeader;

package/components/layout/header/props.d.ts

@@ -3,6 +3,7 @@ export interface HeaderProps {
     className?: string;
     styles?: React.CSSProperties;
     id?: string;
+    content?: string;
     render?: (props: Record<string, any>) => React.ReactNode;
 }
 export type WmHeaderProps = HeaderProps;

package/components/layout/leftnav/index.js

@@ -2,12 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import { useContext, useEffect } from "react";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
+import { PartialContentWrapper } from "../../common";
 import { PageLayoutContext } from "../../page/page-context";
 import { getLeftPanelPageClasses } from "./utils/page-class-util";
-const DEFAULT_CLASS = "app-nav-drawer app-left-panel left-panel-collapsed ";
+const DEFAULT_CLASS = "app-nav-drawer app-left-panel";
 const SLIDE_IN = "slide-in";
 const WmLeftPanel = (props) => {
-  const { onLeftPanelPageClassesChange } = useContext(PageLayoutContext);
+  const {
+    onLeftPanelPageClassesChange,
+    onLeftPanelPresenceChange,
+    leftPanelExpanded = false
+  } = useContext(PageLayoutContext);
   const {
     styles,
     children,
@@ -19,7 +24,8 @@ const WmLeftPanel = (props) => {
     navtype,
     navheight,
     animation = SLIDE_IN,
-    onNavHeightChange
+    onNavHeightChange,
+    content
   } = props;
   useEffect(() => {
     if (onNavHeightChange) {
@@ -31,18 +37,27 @@ const WmLeftPanel = (props) => {
       }
     };
   }, [navheight, onNavHeightChange]);
+  useEffect(() => {
+    onLeftPanelPresenceChange == null ? void 0 : onLeftPanelPresenceChange(true);
+    return () => {
+      onLeftPanelPresenceChange == null ? void 0 : onLeftPanelPresenceChange(false);
+    };
+  }, [onLeftPanelPresenceChange]);
   useEffect(() => {
     onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(
       getLeftPanelPageClasses({
         animation,
         columnwidth,
-        xscolumnwidth
+        xscolumnwidth,
+        expanded: leftPanelExpanded
       })
     );
+  }, [animation, columnwidth, xscolumnwidth, leftPanelExpanded, onLeftPanelPageClassesChange]);
+  useEffect(() => {
     return () => {
       onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(void 0);
     };
-  }, [animation, columnwidth, xscolumnwidth]);
+  }, [onLeftPanelPageClassesChange]);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -51,11 +66,12 @@ const WmLeftPanel = (props) => {
       sx: styles,
       className: clsx(
         DEFAULT_CLASS,
+        leftPanelExpanded ? "left-panel-expanded" : "left-panel-collapsed",
         className,
         animation,
         `col-md-${columnwidth} col-sm-${columnwidth} col-xs-${xscolumnwidth} ${navtype ? `app-nav-${navtype}` : ""} ${navheight ? `app-nav-${navheight}` : ""}`
       ),
-      children: render ? render(props) : children
+      children: /* @__PURE__ */ jsx(PartialContentWrapper, { content, children: render ? render(props) : children })
     }
   );
 };

package/components/layout/leftnav/props.d.ts

@@ -29,6 +29,7 @@ export interface LeftNavProps {
     className?: string;
     styles?: React.CSSProperties;
     id?: string;
+    content?: string;
     render?: (props: Record<string, any>) => React.ReactNode;
 }
 export type WmLeftNavProps = LeftNavProps;

package/components/layout/leftnav/utils/page-class-util.d.ts

@@ -2,6 +2,7 @@ export type LeftPanelPageLayout = {
     animation?: string;
     columnwidth?: number | string;
     xscolumnwidth?: number | string;
+    expanded?: boolean;
 };
 /**
  * (slide-in-left-panel-container, left-panel-container-*-*, etc.).

package/components/layout/leftnav/utils/page-class-util.js

@@ -9,9 +9,10 @@ const getPageWidthClass = (device, panelWidth) => {
   return `left-panel-container-${device}-${12 - width}`;
 };
 const getLeftPanelPageClasses = (layout) => {
+  const containerClass = layout.expanded ? "left-panel-expanded-container" : "left-panel-collapsed-container";
   if (layout.animation === SLIDE_IN) {
     return clsx(
-      "left-panel-collapsed-container",
+      containerClass,
       "slide-in-left-panel-container",
       getPageWidthClass("md", layout.columnwidth),
       getPageWidthClass("sm", layout.columnwidth),
@@ -19,9 +20,9 @@ const getLeftPanelPageClasses = (layout) => {
     );
   }
   if (layout.animation === SLIDE_OVER) {
-    return clsx("left-panel-collapsed-container", "slide-over-left-panel-container");
+    return clsx(containerClass, "slide-over-left-panel-container");
   }
-  return "left-panel-collapsed-container";
+  return containerClass;
 };
 export {
   getLeftPanelPageClasses

package/components/layout/rightnav/index.js

@@ -1,10 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
+import { PartialContentWrapper } from "../../common";
 const DEFAULT_CLASS = "app-right-panel";
 const WmRightPanel = (props) => {
-  const { styles, children, render, className, columnwidth = 2, id } = props;
-  return /* @__PURE__ */ jsx(Box, { id, sx: styles, className: clsx(DEFAULT_CLASS, className, `col-sm-${columnwidth}`), children: render ? render(props) : children });
+  const { styles, children, render, className, columnwidth = 2, id, content } = props;
+  const rendered = render ? render(props) : children;
+  return /* @__PURE__ */ jsx(Box, { id, sx: styles, className: clsx(DEFAULT_CLASS, className, `col-sm-${columnwidth}`), children: /* @__PURE__ */ jsx(PartialContentWrapper, { content, children: rendered }) });
 };
 WmRightPanel.displayName = "WmRightPanel";
 var rightnav_default = WmRightPanel;

package/components/layout/rightnav/props.d.ts

@@ -8,6 +8,7 @@ export interface RightNavProps {
     className?: string;
     styles?: React.CSSProperties;
     id?: string;
+    content?: string;
     render?: (props: Record<string, any>) => React.ReactNode;
 }
 export type WmRightNavProps = RightNavProps;

package/components/layout/topnav/index.js

@@ -1,9 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
+import { PartialContentWrapper } from "../../common";
 const DEFAULT_CLASS = "app-top-nav";
 const WmTopNav = (props) => {
-  const { styles, children, render, className, id } = props;
+  const { styles, children, render, className, id, content } = props;
+  const rendered = render ? render(props) : children;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -14,7 +16,7 @@ const WmTopNav = (props) => {
       role: "navigation",
       "aria-label": "Second level navigation",
       "data-role": "page-topnav",
-      children: render ? render(props) : children
+      children: /* @__PURE__ */ jsx(PartialContentWrapper, { content, children: rendered })
     }
   );
 };

package/components/layout/topnav/props.d.ts

@@ -3,6 +3,7 @@ export interface TopNavProps {
     className?: string;
     styles?: React.CSSProperties;
     id?: string;
+    content?: string;
     render?: (props: Record<string, any>) => React.ReactNode;
 }
 export type WmTopNavProps = TopNavProps;