@wavemaker-ai/react-runtime 1.0.0-rc.647684 → 12.0.0-rc.335

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")[];
@@ -118,6 +119,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -188,6 +190,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")[];
@@ -81,6 +82,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue: any;
     defaultvalue?: any;
@@ -118,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/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/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

@@ -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")[];
@@ -83,6 +84,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -119,6 +121,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")[];
@@ -103,6 +104,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -160,6 +162,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")[];
@@ -98,6 +99,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -149,6 +151,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")[];
@@ -95,6 +96,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -145,6 +147,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

@@ -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,18 +586,20 @@ 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
               },
               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")[];
@@ -88,6 +89,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -132,6 +134,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")[];
@@ -112,6 +113,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -176,6 +178,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/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

@@ -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")[];
@@ -88,6 +89,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -129,6 +131,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")[];
@@ -97,6 +98,7 @@ declare const _default: import("react").ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -146,6 +148,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")[];
@@ -82,6 +83,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -117,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/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")[];
@@ -77,6 +78,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -106,6 +108,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/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;