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

package/components/basic/search/index.js

@@ -17,8 +17,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _image = _interopRequireDefault(require("next/image"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
+var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
+var _isPlainObject = _interopRequireDefault(require("lodash-es/isPlainObject"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -34,7 +34,7 @@ var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transf
 var _providers = require("./providers");
 var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
 var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-var _excluded = ["showclear", "debouncetime", "searchkey", "searchon", "matchmode", "minchars", "limit", "tabindex", "placeholder", "dropup", "readonly", "datavalue", "dataset", "datafield", "displayfield", "disabled", "autofocus", "type", "showsearchicon", "showbackbutton", "imagewidth", "width", "displaylabel", "displayimagesrc", "displayexpression", "datacompletemsg", "loadingdatamsg", "clearsearchiconclass", "backsearchiconclass", "searchiconclass", "navsearchbar", "className", "shortcutkey", "required", "hint", "arialabel", "onBeforeservicecall", "onBlur", "onChange", "onFocus", "onSelect", "onSubmit", "onClear", "onSearch", "onDatasetready", "styles", "name", "listener", "value", "datasetItems", "selectedItems", "displayValue", "groupedData", "handleHeaderClick", "toggleAllHeaders", "isDestroyed", "validation", "casesensitive", "isUpdateRequired", "onQuerySearch", "getDisplayExpression", "standalone"];
+var _excluded = ["showclear", "debouncetime", "searchkey", "searchon", "matchmode", "minchars", "limit", "tabindex", "placeholder", "dropup", "readonly", "datavalue", "dataset", "datafield", "displayfield", "disabled", "autofocus", "type", "showsearchicon", "showbackbutton", "imagewidth", "width", "displaylabel", "displayimagesrc", "displayexpression", "datacompletemsg", "loadingdatamsg", "clearsearchiconclass", "backsearchiconclass", "searchiconclass", "navsearchbar", "className", "shortcutkey", "required", "hint", "arialabel", "onBeforeservicecall", "onBlur", "onChange", "onFocus", "onSelect", "onSubmit", "onClear", "onSearch", "onDatasetready", "styles", "name", "listener", "value", "datasetItems", "selectedItems", "displayValue", "groupedData", "handleHeaderClick", "toggleAllHeaders", "isDestroyed", "validation", "casesensitive", "isUpdateRequired", "onQuerySearch", "getDisplayExpression", "standalone", "viewParent", "destroy", "clearSearch"];
 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" != _typeof3(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;
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
@@ -134,6 +134,9 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     getDisplayExpression = props.getDisplayExpression,
     _props$standalone = props.standalone,
     standalone = _props$standalone === void 0 ? false : _props$standalone,
+    viewParent = props.viewParent,
+    destroy = props.destroy,
+    clearSearch = props.clearSearch,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var debouncedSearchRef = (0, _react.useRef)(null);
   var debouncedSearchItemRef = (0, _react.useRef)(null);
@@ -1197,7 +1200,7 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     className: (0, _clsx["default"])(DEFAULT_CLASS, className),
     "data-search-type": type,
     type: type,
-    readonly: readonly
+    "aria-readonly": readonly
   }), renderBackButton(), __jsx(_material.Box, {
     component: "span",
     className: "sr-only"

package/components/basic/search/props.d.ts

@@ -149,6 +149,8 @@ export interface SearchProps extends DatasetAwareFormComponentProps {
      * Callback fired when the search value changes.
      */
     onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
+    clearSearch?: unknown;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     /**
      * Whether to skip the form controller.
      */

package/components/basic/spinner/index.d.ts

@@ -48,6 +48,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/basic/tile/index.d.ts

@@ -42,6 +42,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/basic/tile/index.js

@@ -13,6 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["styles", "className"];
 var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -86,7 +87,7 @@ function WmTile(props) {
   return __jsx(_Box["default"], (0, _extends2["default"])({
     className: (0, _clsx["default"])(DEFAULT_TILE_CLASS, className),
     style: styles
-  }, restProps, domEvents), props.children);
+  }, (0, _attr.removeInvalidAttributes)(restProps), domEvents), props.children);
 }
 WmTile.displayName = "WmTile";
 

package/components/basic/tree/Components/TreeNodeComponent.js

@@ -12,6 +12,7 @@ var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _partialContainer = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/page/partial-container"));
 var _useTreePartialNodeApi = require("../hooks/useTreePartialNodeApi");
+var _utils = require("../utils");
 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 TreeNodeComponent = /*#__PURE__*/_react["default"].memo(function (_ref) {
@@ -30,6 +31,9 @@ var TreeNodeComponent = /*#__PURE__*/_react["default"].memo(function (_ref) {
     template = _ref.template,
     listener = _ref.listener;
   var hasChildren = node.children && node.children.length > 0;
+  var disabledClassName = (0, _react.useMemo)(function () {
+    return (0, _utils.isTreeNodeDisabled)(node.data) ? "wm-tree-node-disabled" : "";
+  }, [node.data]);
   var _useTreePartialNodeAp = (0, _useTreePartialNodeApi.useTreePartialNodeApi)({
       node: node,
       selectedItem: selectedItem,
@@ -58,7 +62,7 @@ var TreeNodeComponent = /*#__PURE__*/_react["default"].memo(function (_ref) {
     if (hasChildren) {
       return __jsx(_Box["default"], {
         component: "span",
-        className: (0, _clsx["default"])("button", "level".concat(depth), "switch", depth === 0 ? node.open ? "roots_open" : "roots_close" : node.open ? "bottom_open" : "bottom_close", treeicons, "treenode_switch"),
+        className: (0, _clsx["default"])("button", "level".concat(depth), "switch", depth === 0 ? node.open ? "roots_open" : "roots_close" : node.open ? "bottom_open" : "bottom_close", treeicons, "treenode_switch", disabledClassName),
         treeicons: treeicons,
         onClick: function onClick(event) {
           return toggleNodeExpansion(event, node);
@@ -71,7 +75,7 @@ var TreeNodeComponent = /*#__PURE__*/_react["default"].memo(function (_ref) {
     return __jsx(_Box["default"], {
       component: "span",
       treeicons: treeicons,
-      className: (0, _clsx["default"])("button", "level".concat(depth), "switch", "bottom_docu", treeicons, "treenode_switch"),
+      className: (0, _clsx["default"])("button", "level".concat(depth), "switch", "bottom_docu", treeicons, "treenode_switch", disabledClassName),
       treenode_switch: "true"
     });
   };
@@ -79,7 +83,7 @@ var TreeNodeComponent = /*#__PURE__*/_react["default"].memo(function (_ref) {
     if (!isCheckboxTree && !isRadioTree) return null;
     return __jsx(_Box["default"], {
       component: "span",
-      className: (0, _clsx["default"])("button", "chk", isRadioTree ? "radio_false_full" : "checkbox_false_full", node.checked && (isRadioTree ? "radio_true_full" : "checkbox_true_full")),
+      className: (0, _clsx["default"])("button", "chk", isRadioTree ? "radio_false_full" : "checkbox_false_full", node.checked && (isRadioTree ? "radio_true_full" : "checkbox_true_full"), disabledClassName),
       onClick: function onClick(event) {
         event.stopPropagation();
         if (isRadioTree) {
@@ -97,7 +101,7 @@ var TreeNodeComponent = /*#__PURE__*/_react["default"].memo(function (_ref) {
     if (!node.icon) return null;
     return __jsx(_Box["default"], {
       component: "span",
-      className: (0, _clsx["default"])("button", "ico_open", "treenode_ico"),
+      className: (0, _clsx["default"])("button", "ico_open", "treenode_ico", disabledClassName),
       id: "".concat(node.tId, "_ico"),
       title: "",
       treenode_ico: "true"
@@ -111,7 +115,7 @@ var TreeNodeComponent = /*#__PURE__*/_react["default"].memo(function (_ref) {
       },
       className: (0, _clsx["default"])("level".concat(depth), !template && "glyphicon", !template && (node.icon || "glyphicon-music"), {
         curSelectedNode: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.nodeId) === node.nodeId
-      }, "treenode_a"),
+      }, "treenode_a", disabledClassName),
       "data-node-id": node.nodeId,
       id: "".concat(node.tId, "_a"),
       title: node.label,

package/components/basic/tree/index.d.ts

@@ -56,6 +56,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/basic/tree/index.js

@@ -152,6 +152,7 @@ var WmTree = exports.WmTree = function WmTree(props) {
     var prev = treeNodesRef.current;
     var currentTreeNode = (0, _utils.findNodeById)(prev, node.nodeId);
     if (!currentTreeNode) return;
+    if ((0, _utils.isTreeNodeDisabled)(currentTreeNode.data)) return;
     var updatedNodes = (0, _utils.toggleExpansionInTree)(prev, node.nodeId);
     var after_nodeUpdate = (0, _utils.findNodeById)(updatedNodes, node.nodeId);
     treeNodesRef.current = updatedNodes;
@@ -173,6 +174,7 @@ var WmTree = exports.WmTree = function WmTree(props) {
     var _findNodeById, _resolvedTreeNode$chi;
     if (!node) return;
     var resolvedTreeNode = (_findNodeById = (0, _utils.findNodeById)(treeNodesRef.current, node.nodeId)) !== null && _findNodeById !== void 0 ? _findNodeById : node;
+    if ((0, _utils.isTreeNodeDisabled)(resolvedTreeNode.data)) return;
     setSelectedItem(resolvedTreeNode);
     if (event && nodeclick === "expand" && (_resolvedTreeNode$chi = resolvedTreeNode.children) !== null && _resolvedTreeNode$chi !== void 0 && _resolvedTreeNode$chi.length) {
       toggleNodeExpansion(event, resolvedTreeNode);
@@ -180,7 +182,7 @@ var WmTree = exports.WmTree = function WmTree(props) {
     if (onSelect && event && name) {
       onSelect(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], resolvedTreeNode.data, getPath(resolvedTreeNode));
     }
-  }, [name, nodeaction, nodeclick, onSelect, toggleNodeExpansion]);
+  }, [name, nodeclick, onSelect, toggleNodeExpansion]);
 
   // Handle node click (`event` undefined when invoked from partial `node.select()` / programmatic selection)
   var handleNodeClick = (0, _react.useCallback)(function (event, node) {
@@ -189,8 +191,12 @@ var WmTree = exports.WmTree = function WmTree(props) {
 
   // Handle checkbox toggle
   var toggleNodeChecked = (0, _react.useCallback)(function (event, node) {
+    var _findNodeById2;
     event.stopPropagation(); // Prevent triggering node selection
 
+    var resolvedNode = (_findNodeById2 = (0, _utils.findNodeById)(treeNodesRef.current, node.nodeId)) !== null && _findNodeById2 !== void 0 ? _findNodeById2 : node;
+    if ((0, _utils.isTreeNodeDisabled)(resolvedNode.data)) return;
+
     // Toggle the checked state
     var newCheckedState = !node.checked;
 
@@ -273,8 +279,12 @@ var WmTree = exports.WmTree = function WmTree(props) {
 
   // Handle radio button selection
   var handleRadioSelect = (0, _react.useCallback)(function (event, node) {
+    var _findNodeById3;
     event.stopPropagation(); // Prevent triggering node selection
 
+    var resolvedNode = (_findNodeById3 = (0, _utils.findNodeById)(treeNodesRef.current, node.nodeId)) !== null && _findNodeById3 !== void 0 ? _findNodeById3 : node;
+    if ((0, _utils.isTreeNodeDisabled)(resolvedNode.data)) return;
+
     // Already selected, skip
     if (radioSelectedNodeId === node.nodeId) {
       return;
@@ -323,6 +333,7 @@ var WmTree = exports.WmTree = function WmTree(props) {
     }
     var node = (0, _utils.findNodeById)(treeNodes, nodeId);
     if (node) {
+      if ((0, _utils.isTreeNodeDisabled)(node.data)) return;
       selectNode(undefined, node);
       if (isRadioTree) {
         setRadioSelectedNodeId(node.nodeId);
@@ -376,7 +387,7 @@ var WmTree = exports.WmTree = function WmTree(props) {
         setTreeNodes(_updatedNodes);
       }
     }
-  }, [isRadioTree]);
+  }, [isRadioTree, selectNode, treeNodes]);
   var deselectById = (0, _react.useCallback)(function () {
     setSelectedItem(null);
     if (isRadioTree) {
@@ -436,7 +447,7 @@ var WmTree = exports.WmTree = function WmTree(props) {
     } else {
       targetNode = (0, _utils.findNodeById)(sortedTreeNodes, datavalue);
     }
-    if (targetNode) {
+    if (targetNode && !(0, _utils.isTreeNodeDisabled)(targetNode.data)) {
       var _targetNode$children;
       selectNode(undefined, targetNode);
       if ((_targetNode$children = targetNode.children) !== null && _targetNode$children !== void 0 && _targetNode$children.length) {

package/components/basic/tree/utils.d.ts

@@ -1,4 +1,6 @@
 import { TreeNodeData, TreeItem, TreePartialNodeApi } from "./props";
+/** Whether the dataset row (`node.data`) is disabled via its `disabled` property. */
+export declare const isTreeNodeDisabled: (data: TreeNodeData | undefined | null) => boolean;
 export declare const getNestedPropertyLocal: (obj: any, path: string) => any;
 export declare const generateUniqueNodeId: (baseId: string, usedNodeIds: Set<string>) => string;
 export declare const processNode: (item: TreeNodeData, depth: number, parent: TreeItem | undefined, rootDataset: any[] | undefined, nodeIndex: number | undefined, treeName: string | undefined, options: {

package/components/basic/tree/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleExpansionInTree = exports.processNode = exports.getTreePartialRowPayload = exports.getNestedPropertyLocal = exports.generateUniqueNodeId = exports.findNodeById = exports.computeTreeNodeDepthFromRoot = exports.buildTreePathFromRoot = exports.buildTreePartialSnapshot = exports.assembleTreePartialItem = void 0;
+exports.toggleExpansionInTree = exports.processNode = exports.isTreeNodeDisabled = exports.getTreePartialRowPayload = exports.getNestedPropertyLocal = exports.generateUniqueNodeId = exports.findNodeById = exports.computeTreeNodeDepthFromRoot = exports.buildTreePathFromRoot = exports.buildTreePartialSnapshot = exports.assembleTreePartialItem = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
@@ -15,6 +15,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/** Whether the dataset row (`node.data`) is disabled via its `disabled` property. */
+var isTreeNodeDisabled = exports.isTreeNodeDisabled = function isTreeNodeDisabled(data) {
+  if (!data) return false;
+  var disabled_node = data.disabled;
+  if (disabled_node === false || disabled_node === "false") {
+    return false;
+  }
+  return Boolean(disabled_node);
+};
+
 // Helper function to get nested property (local version for processNode)
 var getNestedPropertyLocal = exports.getNestedPropertyLocal = function getNestedPropertyLocal(obj, path) {
   if (!path || !obj) return undefined;

package/components/basic/video/index.d.ts

@@ -54,6 +54,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/basic/video/index.js

@@ -13,7 +13,8 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
 var _resourceUrl = require("@wavemaker-ai/react-runtime/utils/resource-url");
-var _excluded = ["subtitlelang", "videoposter", "className"];
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["subtitlelang", "videoposter", "className", "controls", "muted", "loop", "autoplay", "videopreload", "tabindex", "hint", "arialabel", "styles", "name", "mp4format", "webmformat", "oggformat", "subtitlesource", "videosupportmessage", "prefabName"];
 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 DEFAULT_CLASS = "app-video";
@@ -23,37 +24,53 @@ var WmVideo = exports.WmVideo = /*#__PURE__*/(0, _react.memo)(function (props) {
     _props$videoposter = props.videoposter,
     videoposter = _props$videoposter === void 0 ? "resources/images/imagelists/default-image.png" : _props$videoposter,
     className = props.className,
+    controls = props.controls,
+    muted = props.muted,
+    loop = props.loop,
+    autoplay = props.autoplay,
+    videopreload = props.videopreload,
+    tabindex = props.tabindex,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    styles = props.styles,
+    name = props.name,
+    mp4format = props.mp4format,
+    webmformat = props.webmformat,
+    oggformat = props.oggformat,
+    subtitlesource = props.subtitlesource,
+    videosupportmessage = props.videosupportmessage,
+    prefabName = props.prefabName,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var computedPoster = (0, _react.useMemo)(function () {
-    return (0, _resourceUrl.prefixPrefabResourceUrl)(videoposter, props.prefabName);
-  }, [videoposter]);
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(videoposter, prefabName);
+  }, [videoposter, prefabName]);
   var computedMp4 = (0, _react.useMemo)(function () {
-    return (0, _resourceUrl.prefixPrefabResourceUrl)(props.mp4format || "", props.prefabName);
-  }, [props.mp4format]);
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(mp4format || "", prefabName);
+  }, [mp4format, prefabName]);
   var computedWebm = (0, _react.useMemo)(function () {
-    return (0, _resourceUrl.prefixPrefabResourceUrl)(props.webmformat || "", props.prefabName);
-  }, [props.webmformat]);
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(webmformat || "", prefabName);
+  }, [webmformat, prefabName]);
   var computedOgg = (0, _react.useMemo)(function () {
-    return (0, _resourceUrl.prefixPrefabResourceUrl)(props.oggformat || "", props.prefabName);
-  }, [props.oggformat]);
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(oggformat || "", prefabName);
+  }, [oggformat, prefabName]);
   var computedSubtitles = (0, _react.useMemo)(function () {
-    return (0, _resourceUrl.prefixPrefabResourceUrl)(props.subtitlesource || "", props.prefabName);
-  }, [props.subtitlesource]);
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(subtitlesource || "", prefabName);
+  }, [subtitlesource, prefabName]);
   return __jsx(_Box["default"], (0, _extends2["default"])({
     className: (0, _clsx["default"])(DEFAULT_CLASS, className),
-    title: props.hint,
-    "aria-label": props.arialabel,
-    style: props.styles
-  }, restProps), __jsx("video", {
+    title: hint,
+    "aria-label": arialabel,
+    style: styles
+  }, (0, _attr.removeInvalidAttributes)(restProps)), __jsx("video", {
     className: "wm-video-media",
-    controls: props.controls,
+    controls: controls,
     poster: computedPoster,
-    muted: props.muted,
-    loop: props.loop,
-    autoPlay: props.autoplay,
-    preload: props.videopreload,
-    tabIndex: props.tabindex,
-    name: props.name
+    muted: muted,
+    loop: loop,
+    autoPlay: autoplay,
+    preload: videopreload,
+    tabIndex: tabindex,
+    name: name
   }, computedMp4 && __jsx("source", {
     src: computedMp4,
     type: "video/mp4"
@@ -69,7 +86,7 @@ var WmVideo = exports.WmVideo = /*#__PURE__*/(0, _react.memo)(function (props) {
     srcLang: subtitlelang,
     src: computedSubtitles,
     "default": true
-  }), props.videosupportmessage || "Your browser does not support the video tag."));
+  }), videosupportmessage || "Your browser does not support the video tag."));
 }, function (prev, current) {
   var keys = ["mp4format", "webmformat", "oggformat", "subtitlelang", "subtitlesource", "poster", "hint"];
   return keys.every(function (key) {

package/components/chart/index.d.ts

@@ -106,6 +106,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/common/AppSpinner.js

@@ -19,11 +19,8 @@ var AppSpinner = exports.AppSpinner = function AppSpinner(_ref) {
     return null;
   }
   return __jsx(_material.Box, {
-    className: (0, _clsx["default"])("app-spinner", classname),
-    "aria-label": arialabel,
-    style: {
-      zIndex: 100
-    }
+    className: (0, _clsx["default"])("app-spinner", "wm-spinner-root", classname),
+    "aria-label": arialabel
   }, __jsx(_material.Box, {
     className: "spinner-message"
   }, __jsx("i", {

package/components/container/accordion/accordion-pane/index.d.ts

@@ -55,6 +55,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;
     styles?: React.CSSProperties;

package/components/container/accordion/accordion-pane/index.js

@@ -78,10 +78,7 @@ var WmAccordionPane = exports.WmAccordionPane = /*#__PURE__*/(0, _react.memo)(fu
   }, __jsx("i", {
     className: (0, _clsx["default"])("app-icon panel-icon", props.iconclass)
   })), __jsx("div", {
-    className: "pull-left",
-    style: {
-      flex: 1
-    }
+    className: (0, _clsx["default"])("pull-left", "wm-accordion-pane-title-main")
   }, __jsx(_Typography["default"], {
     className: "heading",
     variant: "h3",

package/components/container/accordion/index.d.ts

@@ -50,6 +50,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/container/index.d.ts

@@ -29,6 +29,8 @@ declare const _default: React.ComponentType<{
     renderPartial?: (props: WmContainerProps, onLoad?: (widget?: Record<string, unknown>) => void) => React.ReactNode;
     onLoad?: (widget?: Record<string, unknown>) => void;
     layoutClassName?: string;
+    layoutWidth?: string;
+    layoutHeight?: string;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
@@ -55,6 +57,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/container/index.js

@@ -12,6 +12,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _clsx2 = require("clsx");
 var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _layoutsizeUtil = require("@wavemaker-ai/react-runtime/utils/layoutsize-util");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["listener"],
   _excluded2 = ["className", "styles", "children", "renderPartial", "onLoad", "id", "direction", "wrap", "alignment", "gap", "columngap", "clipcontent", "position", "zindex", "name", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseOut", "onDoubleClick", "onKeydown", "onKeyup", "onKeypress", "animation", "show", "conditionalstyle", "conditionalclass", "showindevice", "eventCallback", "forwardedRef", "viewParent", "hint", "arialabel", "tabindex", "iswidget", "deferload", "datavalue", "prefab", "inbound", "outbound", "formfield", "updateon", "dataset", "prefabName", "content", "overflow", "display", "layoutClassName"];
 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); }
@@ -86,6 +88,9 @@ var WmContainer = exports.WmContainer = function WmContainer(props) {
     if (containerRef.current && props !== null && props !== void 0 && props.name && listener !== null && listener !== void 0 && (_listener$Widgets2 = listener.Widgets) !== null && _listener$Widgets2 !== void 0 && _listener$Widgets2[props.name]) {
       listener.Widgets[props.name].nativeElement = containerRef.current;
     }
+    if (containerRef.current && (props.layoutWidth || props.layoutHeight)) {
+      (0, _layoutsizeUtil.layoutSizeUtil)(containerRef.current, props.layoutWidth, props.layoutHeight);
+    }
   }, [containerRef.current]);
   function handleClick(event) {
     onClick === null || onClick === void 0 || onClick(event, widget_instance);
@@ -152,7 +157,7 @@ var WmContainer = exports.WmContainer = function WmContainer(props) {
     "data-widget-id": props["data-widget-id"],
     id: id,
     hidden: props.hidden
-  }, rest, domEvents, {
+  }, (0, _attr.removeInvalidAttributes)(rest), domEvents, {
     name: name,
     style: _objectSpread(_objectSpread({}, styles), conditionalstyle),
     ref: containerRef

package/components/container/layout-grid/grid-column/index.d.ts

@@ -43,6 +43,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);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/container/layout-grid/grid-row/index.d.ts

@@ -39,6 +39,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);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/container/layout-grid/index.d.ts

@@ -41,6 +41,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/container/layout-grid/index.js

@@ -6,16 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.WmLayoutgrid = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _material = require("@mui/material");
 var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["styles", "className", "children"];
 var __jsx = _react["default"].createElement;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_CLASS = "app-grid-layout clearfix";
 var WmLayoutgrid = exports.WmLayoutgrid = function WmLayoutgrid(props) {
   var styles = props.styles,
@@ -23,11 +21,9 @@ var WmLayoutgrid = exports.WmLayoutgrid = function WmLayoutgrid(props) {
     children = props.children,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return __jsx(_material.Container, (0, _extends2["default"])({
-    style: _objectSpread(_objectSpread({}, styles), {}, {
-      minWidth: "100%"
-    }),
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className)
-  }, restProps), children);
+    style: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, "wm-layout-grid-root", className)
+  }, (0, _attr.removeInvalidAttributes)(restProps)), children);
 };
 WmLayoutgrid.displayName = "WmLayoutgrid";
 

package/components/container/linear-layout/index.d.ts

@@ -40,6 +40,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/container/linear-layout/linear-layout-item/index.d.ts

@@ -37,6 +37,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/container/panel/components/panel-header/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _material = require("@mui/material");
 var _dompurify = _interopRequireDefault(require("dompurify"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
@@ -15,6 +16,7 @@ var _FullscreenExit = _interopRequireDefault(require("@mui/icons-material/Fullsc
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
 var _menu = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/navigation/menu"));
+var _styleUtils = require("@wavemaker-ai/react-runtime/utils/style-utils");
 var __jsx = _react["default"].createElement; // Icons
 var PanelHeader = function PanelHeader(_ref) {
   var _listener$appLocale$L, _listener$appLocale, _listener$appLocale$L2, _listener$appLocale2, _listener$appLocale$L3, _listener$appLocale3, _listener$appLocale$L4, _listener$appLocale4;
@@ -49,6 +51,13 @@ var PanelHeader = function PanelHeader(_ref) {
   var handleActionItemClick = function handleActionItemClick(item) {
     onActionsclick === null || onActionsclick === void 0 || onActionsclick(item);
   };
+
+  /** Matches legacy inline: width/height `|| "auto"`, margin `|| "0"` whenever icon image renders. */
+  var panelIconImgStyle = iconurl ? {
+    "--wm-panel-icon-width": iconwidth ? (0, _styleUtils.toCssLength)(iconwidth) : "auto",
+    "--wm-panel-icon-height": iconheight ? (0, _styleUtils.toCssLength)(iconheight) : "auto",
+    "--wm-panel-icon-margin": iconmargin ? iconmargin : "0"
+  } : undefined;
   return __jsx(_material.Box, {
     className: "panel-title"
   }, __jsx(_material.Box, {
@@ -66,13 +75,9 @@ var PanelHeader = function PanelHeader(_ref) {
     "data-identifier": "img",
     title: "iconurl",
     alt: "Panel icon",
-    className: "panel-image-icon",
+    className: (0, _clsx["default"])("panel-image-icon", "wm-panel-header-icon-img"),
     src: iconurl,
-    style: {
-      width: iconwidth || "auto",
-      height: iconheight || "auto",
-      margin: iconmargin || "0"
-    }
+    style: panelIconImgStyle
   })), __jsx(_material.Box, {
     className: "pull-left"
   }, title && __jsx(_material.Box, {

package/components/container/panel/components/panel-header/props.d.ts

@@ -43,3 +43,8 @@ export interface PanelHeaderProps {
     onClose: (event: React.MouseEvent) => void;
     onActionsclick?: (item: ActionItem) => void;
 }
+export type PanelIconImgStyle = React.CSSProperties & {
+    "--wm-panel-icon-width": string;
+    "--wm-panel-icon-height": string;
+    "--wm-panel-icon-margin": string;
+};