@wavemaker-ai/react-runtime 1.0.0-rc.647469 → 1.0.0-rc.647499

package/components/input/rating/index.js

@@ -106,24 +106,21 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
   var getStarState = (0, _react.useCallback)(function (index) {
     var isActive = isStarActive(index);
     var isHovered = isStarHovered(index);
+    var labelColor = isActive ? iconcolor !== null && iconcolor !== void 0 ? iconcolor : DEFAULT_COLORS.inactive : DEFAULT_COLORS.inactive;
+    var borderColorVar = isHovered ? iconcolor !== null && iconcolor !== void 0 ? iconcolor : "transparent" : "transparent";
+    var starStyle = _objectSpread({
+      "--wm-rating-star-color": labelColor,
+      "--wm-rating-star-border-color": borderColorVar
+    }, iconsize ? {
+      "--wm-rating-star-font-size": iconsize
+    } : {});
     return {
       isActive: isActive,
       isHovered: isHovered,
-      color: isActive ? iconcolor : isHovered ? iconcolor : DEFAULT_COLORS.inactive,
       iconClass: isActive ? activeiconclass : inactiveiconclass,
-      sx: {
-        fontSize: iconsize,
-        opacity: readonly ? 0.5 : 1,
-        pointerEvents: readonly ? "none" : "auto",
-        transition: "all 0.2s ease-in-out",
-        color: isActive ? iconcolor : DEFAULT_COLORS.inactive,
-        borderColor: isHovered ? iconcolor : "transparent",
-        "& .app-icon": {
-          color: "inherit"
-        }
-      }
+      starStyle: starStyle
     };
-  }, [isStarActive, isStarHovered, iconcolor, activeiconclass, inactiveiconclass, iconsize, readonly]);
+  }, [isStarActive, isStarHovered, iconcolor, activeiconclass, inactiveiconclass, iconsize]);
 
   // Event handlers
   var invokeOnChange = (0, _react.useCallback)(function (newValue) {
@@ -394,7 +391,7 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     var _getStarState = getStarState(rate.index),
       isActive = _getStarState.isActive,
       iconClass = _getStarState.iconClass,
-      sx = _getStarState.sx;
+      starStyle = _getStarState.starStyle;
     return __jsx(_Tooltip["default"], {
       key: rate.key,
       title: rate.label,
@@ -411,11 +408,11 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
         return handleMouseOver(rate);
       },
       onMouseLeave: handleMouseLeave,
-      sx: sx,
-      className: (0, _clsx["default"])("app-icon-container", isActive && "active")
+      style: starStyle,
+      className: (0, _clsx["default"])("app-icon-container", "wm-rating-star", readonly && "wm-rating-star-readonly", isActive && "active")
     }, __jsx(_material.Box, {
       component: "i",
-      className: (0, _clsx["default"])("app-icon", iconClass),
+      className: (0, _clsx["default"])("app-icon", "wm-rating-star-icon", iconClass),
       "aria-hidden": "true"
     }), __jsx("input", {
       type: "radio",

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

@@ -53,6 +53,7 @@ declare const WmSelectStandalone: React.ComponentType<import("../../data/form/fo
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -149,6 +150,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/select/index.js

@@ -458,10 +458,7 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
   }, placeholder), groupby && transformedDataset ? transformedDataset.map(function (group) {
     return __jsx("optgroup", {
       key: group.key,
-      label: group.key,
-      style: {
-        backgroundColor: "rgba(0, 0, 0, .1)"
-      }
+      label: group.key
     }, group.data.map(function (item) {
       return __jsx("option", {
         key: "".concat(group.key, "-").concat(item.key),

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

@@ -45,6 +45,7 @@ declare const WmSliderStandalone: React.ComponentType<import("../../data/form/fo
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -137,6 +138,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/slider/index.js

@@ -63,7 +63,6 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
     setValue = _useState[1];
   var prevDatavalueRef = (0, _react.useRef)(initialValue);
   var sliderRef = (0, _react.useRef)(null);
-  var sliderControlRef = (0, _react.useRef)(null);
   var _useState2 = (0, _react.useState)(false),
     isTouched = _useState2[0],
     setIsTouched = _useState2[1];
@@ -110,15 +109,17 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
     }
     prevDatavalueRef.current = newVal;
   }, [onChange, name]);
-  var updateSliderValue = (0, _react.useCallback)(function () {
-    if (!sliderControlRef.current) return;
-    var sliderValue = 100 - ((Number(value) || 0) - (minvalue || 0)) / ((maxvalue || 100) - (minvalue || 0)) * 100;
+  var sliderControlStyle = (0, _react.useMemo)(function () {
+    var min = Number(minvalue || 0);
+    var max = Number(maxvalue || 100);
+    var current = Number(value) || 0;
+    var denominator = max - min;
+    var sliderValue = denominator === 0 ? 100 : 100 - (current - min) / denominator * 100;
     var safePercent = Math.min(100, Math.max(0, sliderValue));
-    sliderControlRef.current.style.setProperty("--end", "".concat(safePercent, "%"));
+    return {
+      "--wm-slider-end": "".concat(safePercent, "%")
+    };
   }, [value, minvalue, maxvalue]);
-  (0, _react.useEffect)(function () {
-    updateSliderValue();
-  }, [value, updateSliderValue]);
   var handleBlur = (0, _react.useCallback)(function (e) {
     setIsTouched(true);
   }, [listener, name, props, value]);
@@ -250,8 +251,8 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
     "aria-hidden": "true",
     className: starticon
   })), __jsx(_Box["default"], {
-    className: "slider-control",
-    ref: sliderControlRef
+    className: "slider-control wm-slider-control",
+    style: sliderControlStyle
   }, !showmarkers && (minvalue || maxvalue) && __jsx(_react["default"].Fragment, null, __jsx(_Box["default"], {
     component: "span",
     className: "app-slider-value pull-left"
@@ -301,9 +302,9 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, markerItems.map(function (marker, index) {
     return __jsx("span", {
       key: index,
-      className: "marker-wrapper",
+      className: "marker-wrapper wm-slider-marker-wrapper",
       style: {
-        left: marker.left + "px"
+        "--wm-slider-marker-left": "".concat(marker.left, "px")
       },
       title: marker.label
     }, __jsx("span", {

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

@@ -56,6 +56,7 @@ declare const WmTextStandalone: import("react").ComponentType<import("../../data
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -154,6 +155,7 @@ declare const _default: import("react").ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: import("react").CSSProperties;

package/components/input/text/index.js

@@ -17,7 +17,7 @@ var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
 var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
 var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
 var _util = require("./util");
-var _delay = _interopRequireDefault(require("lodash/delay"));
+var _delay = _interopRequireDefault(require("lodash-es/delay"));
 var _util2 = require("../util");
 var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
@@ -432,7 +432,7 @@ var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
     className: (0, _clsx["default"])("app-input-wrapper", isTouched ? "ng-touched" : "ng-untouched", displayError && "ng-invalid"),
     slotProps: {
       formHelperText: {
-        className: "app-label help-block supporting-text",
+        className: (0, _clsx["default"])("app-label help-block supporting-text", "wm-text-helper-text", displayError && "wm-text-helper-text-error"),
         name: "supportingText"
       },
       input: {
@@ -467,7 +467,7 @@ var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
         tabIndex: tabindex,
         readOnly: readonly,
         autoCapitalize: autocapitalize,
-        className: (0, _clsx["default"])(DEFAULT_CLASS, className, leadingiconclass && "with-leading-icon", trailingiconclass && "with-trailing-icon", isTouched ? "ng-touched" : "ng-untouched", displayError && "ng-invalid"),
+        className: (0, _clsx["default"])(DEFAULT_CLASS, className, "wm-text-input", leadingiconclass && "with-leading-icon", trailingiconclass && "with-trailing-icon", isTouched ? "ng-touched" : "ng-untouched", displayError && "ng-invalid"),
         style: styles,
         "aria-label": arialabel,
         maxLength: maxchars,
@@ -476,17 +476,6 @@ var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
         max: props.maxvalue,
         step: props.step
       }
-    },
-    sx: {
-      "& .MuiInputBase-input.Mui-disabled": {
-        WebkitTextFillColor: "inherit"
-      },
-      "& .MuiFormHelperText-root": {
-        marginLeft: 0,
-        "&.Mui-error": {
-          color: "#ee5f5b"
-        }
-      }
     }
   }));
 }, function (prev, current) {

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

@@ -43,6 +43,7 @@ declare const WmTextareaStandalone: React.ComponentType<import("../../data/form/
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -128,6 +129,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/textarea/index.js

@@ -14,7 +14,7 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var lodash = _interopRequireWildcard(require("lodash-es"));
 var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
 var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _delay = _interopRequireDefault(require("lodash/delay"));
+var _delay = _interopRequireDefault(require("lodash-es/delay"));
 var _util = require("@wavemaker-ai/react-runtime/components/input/util");
 var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
@@ -318,7 +318,7 @@ var WmTextarea = /*#__PURE__*/(0, _react.memo)(function (props) {
     required: required,
     disabled: disabled,
     error: isDirty && error.show,
-    className: (0, _clsx["default"])("app-input-wrapper", isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid"),
+    className: (0, _clsx["default"])("app-input-wrapper", "wm-textarea-root", isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid"),
     style: styles,
     "aria-readonly": readonly,
     helperText: maxchars ? limitdisplaytext.replaceAll("undefined", "".concat((displayValue === null || displayValue === void 0 ? void 0 : displayValue.length) || 0)) : undefined,
@@ -334,19 +334,16 @@ var WmTextarea = /*#__PURE__*/(0, _react.memo)(function (props) {
         ref: textareaRef,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,
-        className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid", isEditable ? "wm-textarea-editable" : ""),
+        className: (0, _clsx["default"])(DEFAULT_CLASS, "wm-textarea-input", className, isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid", isEditable ? "wm-textarea-editable" : ""),
+        style: _objectSpread({}, styles.height ? {
+          "--wm-textarea-height": "".concat(styles.height)
+        } : {}),
         pattern: regexp
       }
     },
     slots: _objectSpread({}, maxchars ? {
       formHelperText: TextareaCount
-    } : {}),
-    sx: {
-      width: "100%",
-      "& .MuiInputBase-input": _objectSpread({}, styles.height ? {
-        height: "".concat(styles.height, " !important")
-      } : {})
-    }
+    } : {})
   }, events)));
 }, function (prev, current) {
   var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "limitdisplaytext", "hidden"];

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

@@ -36,6 +36,7 @@ declare const WithForm: React.NamedExoticComponent<import("../../data/form/form-
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -117,6 +118,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/upload/index.js

@@ -12,6 +12,7 @@ var _link = _interopRequireDefault(require("next/link"));
 var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
 var _withFormController = _interopRequireDefault(require("../../data/form/form-controller/withFormController"));
 var _image = _interopRequireDefault(require("next/image"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
 var WmUpload = /*#__PURE__*/(0, _react.memo)(function (props) {
@@ -80,10 +81,7 @@ var WmUpload = /*#__PURE__*/(0, _react.memo)(function (props) {
       className: "form-control-static",
       href: fileUrl
     }, __jsx(_image["default"], {
-      style: {
-        height: "2em"
-      },
-      className: "wi wi-file",
+      className: "wi wi-file wm-upload-existing-image",
       src: fileUrl,
       alt: "Existing file"
     })) : __jsx(_link["default"], {
@@ -102,7 +100,7 @@ var WmUpload = /*#__PURE__*/(0, _react.memo)(function (props) {
   return __jsx("div", {
     className: className,
     style: styles
-  }, renderExistingFile(), __jsx("input", (0, _extends2["default"])({}, props, {
+  }, renderExistingFile(), __jsx("input", (0, _extends2["default"])({}, (0, _attr.removeInvalidAttributes)(props), {
     hidden: props.hidden,
     ref: fileInputRef,
     type: "file",

package/components/layout/footer/index.js

@@ -13,6 +13,7 @@ var DEFAULT_CLASS = "app-footer clearfix";
 var WmFooter = exports.WmFooter = function WmFooter(props) {
   var styles = props.styles,
     children = props.children,
+    render = props.render,
     className = props.className,
     id = props.id;
   return __jsx(_material.Box, {
@@ -20,7 +21,7 @@ var WmFooter = exports.WmFooter = function WmFooter(props) {
     sx: styles,
     className: (0, _clsx["default"])(DEFAULT_CLASS, className),
     id: id
-  }, children);
+  }, render ? render(props) : children);
 };
 WmFooter.displayName = "WmFooter";
 

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

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

package/components/layout/header/index.js

@@ -13,6 +13,7 @@ var DEFAULT_CLASS = "app-header clearfix app-header-shrink";
 var WmHeader = exports.WmHeader = function WmHeader(props) {
   var styles = props.styles,
     children = props.children,
+    render = props.render,
     className = props.className,
     id = props.id;
   return __jsx(_Box["default"], {
@@ -23,7 +24,7 @@ var WmHeader = exports.WmHeader = function WmHeader(props) {
   }, __jsx(_Box["default"], {
     component: "div",
     className: "app-header-container"
-  }, children));
+  }, render ? render(props) : children));
 };
 WmHeader.displayName = "WmHeader";
 

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

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

package/components/layout/leftnav/index.js

@@ -15,6 +15,7 @@ var DEFAULT_CLASS = "app-nav-drawer app-left-panel left-panel-collapsed ";
 var WmLeftPanel = exports.WmLeftPanel = function WmLeftPanel(props) {
   var styles = props.styles,
     children = props.children,
+    render = props.render,
     className = props.className,
     _props$columnwidth = props.columnwidth,
     columnwidth = _props$columnwidth === void 0 ? 2 : _props$columnwidth,
@@ -37,7 +38,7 @@ var WmLeftPanel = exports.WmLeftPanel = function WmLeftPanel(props) {
     component: "div",
     sx: styles,
     className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth, " ").concat(navtype ? "app-nav-".concat(navtype) : "", " ").concat(navheight ? "app-nav-".concat(navheight) : ""))
-  }, children);
+  }, render ? render(props) : children);
 };
 WmLeftPanel.displayName = "WmLeftPanel";
 

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

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

package/components/layout/rightnav/index.js

@@ -13,6 +13,7 @@ var DEFAULT_CLASS = "app-right-panel";
 var WmRightPanel = exports.WmRightPanel = function WmRightPanel(props) {
   var styles = props.styles,
     children = props.children,
+    render = props.render,
     className = props.className,
     _props$columnwidth = props.columnwidth,
     columnwidth = _props$columnwidth === void 0 ? 2 : _props$columnwidth,
@@ -21,7 +22,7 @@ var WmRightPanel = exports.WmRightPanel = function WmRightPanel(props) {
     id: id,
     sx: styles,
     className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth))
-  }, children);
+  }, render ? render(props) : children);
 };
 WmRightPanel.displayName = "WmRightPanel";
 

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

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

package/components/layout/topnav/index.js

@@ -13,6 +13,7 @@ var DEFAULT_CLASS = "app-top-nav";
 var WmTopNav = exports.WmTopNav = function WmTopNav(props) {
   var styles = props.styles,
     children = props.children,
+    render = props.render,
     className = props.className,
     id = props.id;
   return __jsx(_Box["default"], {
@@ -23,7 +24,7 @@ var WmTopNav = exports.WmTopNav = function WmTopNav(props) {
     role: "navigation",
     "aria-label": "Second level navigation",
     "data-role": "page-topnav"
-  }, children);
+  }, render ? render(props) : children);
 };
 WmTopNav.displayName = "WmTopNav";
 

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

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

package/components/navbar/index.d.ts

@@ -40,6 +40,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/navbar/index.js

@@ -16,6 +16,7 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Link = _interopRequireDefault(require("@mui/material/Link"));
 var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
 var _button = require("@wavemaker-ai/react-runtime/components/form/button");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["className", "children", "styles", "id", "title", "brandHref", "showToggle", "listener"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
@@ -54,7 +55,7 @@ var WmNavbar = exports.WmNavbar = /*#__PURE__*/(0, _react.memo)(function (props)
     style: processedStyles,
     className: (0, _clsx["default"])(DEFAULT_CLASS, className),
     id: id
-  }, restProps), __jsx(_Box["default"], {
+  }, (0, _attr.removeInvalidAttributes)(restProps)), __jsx(_Box["default"], {
     component: "div",
     className: "container-fluid"
   }, __jsx(_Box["default"], {

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

@@ -66,6 +66,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

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

@@ -36,6 +36,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/navbar/nav-item/index.js

@@ -13,6 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _clsx = _interopRequireDefault(require("clsx"));
 var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["className", "styles", "id", "onMouseEnter", "onMouseLeave", "name"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
@@ -29,7 +30,7 @@ var WmNavItem = exports.WmNavItem = /*#__PURE__*/(0, _react.memo)(function (prop
     rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return __jsx(_ListItem["default"], (0, _extends2["default"])({
     component: "li"
-  }, rest, {
+  }, (0, _attr.removeInvalidAttributes)(rest), {
     name: name,
     id: id,
     sx: _objectSpread(_objectSpread({

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

@@ -39,6 +39,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

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

@@ -60,6 +60,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/navigation/menu/index.js

@@ -30,6 +30,7 @@ var _useKeyboardMovements = require("./hooks/useKeyboardMovements.hook");
 var _useTransformedDataset = require("./hooks/useTransformedDataset.hook");
 var _useHoverState2 = require("./hooks/useHoverState.hook");
 var _constants2 = require("@wavemaker-ai/react-runtime/core/constants");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["menualign", "menuposition", "menulayout", "menuclass", "linktarget", "iconclass", "type", "animateitems", "disableMenuContext", "showonhover", "panelPosition", "autoclose", "autoopen", "hint", "arialabel", "width", "height", "iconposition", "caption", "shortcutkey", "onClick", "onSelect", "navNodes", "styles", "conditionalstyles", "className", "children", "listener", "name", "resetNavNodes", "nodes$", "dataset", "orderby", "itemlabel", "itemlink", "itemicon", "itemaction", "userrole", "loggedInUser", "itemchildren", "isactive", "displayValue", "onActionsclick", "dataPath", "isFromNav", "onNavItemActivate", "isNavItemActive"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
@@ -369,7 +370,7 @@ var WmMenu = exports.WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
       icon: ((_item$dataObject4 = item.dataObject) === null || _item$dataObject4 === void 0 ? void 0 : _item$dataObject4.icon) || icon,
       link: link,
       target: (_item$dataObject5 = item.dataObject) === null || _item$dataObject5 === void 0 ? void 0 : _item$dataObject5.target
-    });
+    }, item === null || item === void 0 ? void 0 : item.value);
     if (onSelect) {
       onSelect(event, props, simplifiedItem);
     }
@@ -975,7 +976,7 @@ var WmMenu = exports.WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
       height: height !== undefined ? typeof height === "number" ? "".concat(height, "px") : height : undefined,
       textAlign: menualign
     }
-  }, restProps), iconclass && __jsx("i", {
+  }, (0, _attr.removeInvalidAttributes)(restProps)), iconclass && __jsx("i", {
     className: (0, _clsx["default"])("app-icon", iconclass),
     "aria-hidden": "true"
   }), __jsx("span", {
@@ -985,7 +986,7 @@ var WmMenu = exports.WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, caption || ""), __jsx("span", {
     className: (0, _clsx["default"])("pull-right caret fa", menuPosition !== null && menuPosition !== void 0 && menuPosition.startsWith("up") ? _constants.CARET_CLS.UP : _constants.CARET_CLS.DOWN)
   })) : __jsx(_Button["default"], (0, _extends2["default"])({
-    className: (0, _clsx["default"])("btn dropdown-toggle", "app-button", menuclass, "menu-layout-".concat(menulayout), "menu-align-".concat(menualign), open ? "open" : "", menuPosition !== null && menuPosition !== void 0 && menuPosition.startsWith("up") ? "dropup" : "", menuPosition === _constants.POSITION.INLINE ? "dropinline-menu" : ""),
+    className: (0, _clsx["default"])("btn dropdown-toggle", "icon-position-".concat(iconposition), "app-button", menuclass, "menu-layout-".concat(menulayout), "menu-align-".concat(menualign), open ? "open" : "", menuPosition !== null && menuPosition !== void 0 && menuPosition.startsWith("up") ? "dropup" : "", menuPosition === _constants.POSITION.INLINE ? "dropinline-menu" : ""),
     ref: buttonRef,
     onClick: handleMenuClick,
     "aria-haspopup": "true",
@@ -997,7 +998,7 @@ var WmMenu = exports.WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
       width: width !== undefined ? typeof width === "number" ? "".concat(width, "px") : width : undefined,
       height: height !== undefined ? typeof height === "number" ? "".concat(height, "px") : height : undefined
     }, buttonStyles), menuContainerStyles)
-  }, restProps), iconclass && __jsx("i", {
+  }, (0, _attr.removeInvalidAttributes)(restProps)), iconclass && __jsx("i", {
     className: (0, _clsx["default"])("app-icon", iconclass),
     "aria-hidden": "true"
   }), __jsx("span", {

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

@@ -20,7 +20,7 @@ declare const _default: React.ComponentType<{
     popoverwidth: string;
     title?: string;
     adaptiveposition?: boolean;
-    autoclose?: "always" | "disabled" | "outsideClick";
+    autoclose?: "disabled" | "always" | "outsideClick";
     contentanimation?: string;
     onLoad?: (widget: WmPopoverProps) => void | Function;
     onShow?: (event: Event, widget: WmPopoverProps) => void;
@@ -71,6 +71,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/navigation/popover/index.js

@@ -9,7 +9,7 @@ exports["default"] = exports.WmPopover = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
 var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
 var _anchor = require("@wavemaker-ai/react-runtime/components/basic/anchor");