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

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

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

@@ -16,6 +16,7 @@ var _dompurify = _interopRequireDefault(require("dompurify"));
 var _hooks = require("./hooks");
 var _panelHeader = _interopRequireDefault(require("./components/panel-header"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["actions", "badgetype", "badgevalue", "closable", "collapsible", "enablefullscreen", "expanded", "fullscreen", "helptext", "hint", "iconclass", "iconheight", "iconmargin", "iconurl", "iconwidth", "subheading", "title", "className", "style", "children", "height", "name", "itemlabel", "itemlink", "itemicon", "itemchildren", "onActionsclick", "onClose", "onCollapse", "onExpand", "onExitfullscreen", "onFullscreen", "onLoad", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver", "onPropertyChange", "listener", "Widgets"];
 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;
@@ -224,7 +225,7 @@ var WmPanel = exports.WmPanel = function WmPanel(props) {
     onMouseOut: handleMouseOut,
     hidden: !show,
     component: "div"
-  }, componentProps, {
+  }, (0, _attr.removeInvalidAttributes)(componentProps), {
     style: _objectSpread(_objectSpread({}, props.styles), props.conditionalstyle)
   }), showHeader && __jsx(_material.Box, {
     className: (0, _clsx["default"])("panel-heading", {

package/components/container/props.d.ts

@@ -62,6 +62,8 @@ export interface ContainerPropsBase {
      */
     onLoad?: (widget?: Record<string, unknown>) => void;
     layoutClassName?: string;
+    layoutWidth?: string;
+    layoutHeight?: string;
 }
 /**
  * Combined props for the WmContainer component, including base WaveMaker props.

package/components/container/repeat-template/index.d.ts

@@ -22,7 +22,27 @@ declare const _default: import("react").ComponentType<{
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
     onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
-    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal
+    /**
+     * The WmRepeatTemplate component wraps content for use in repeat/list
+     * contexts. Typically used as a template inside list or repeat containers.
+     *
+     * - [Playground](https://react-components.wavemaker.ai/?path=/story/container-repeattemplate--showcase)
+     *
+     * - [Docs](https://react-components.wavemaker.ai/?path=/story/container-repeattemplate--docs#tab-overview)
+     *
+     * @param props - {@link WmRepeatTemplateProps}
+     */
+    ? /**
+     * The WmRepeatTemplate component wraps content for use in repeat/list
+     * contexts. Typically used as a template inside list or repeat containers.
+     *
+     * - [Playground](https://react-components.wavemaker.ai/?path=/story/container-repeattemplate--showcase)
+     *
+     * - [Docs](https://react-components.wavemaker.ai/?path=/story/container-repeattemplate--docs#tab-overview)
+     *
+     * @param props - {@link WmRepeatTemplateProps}
+     */: string | number | null) => void;
     onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
     onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
     onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
@@ -35,6 +55,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/repeat-template/index.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
 var _lodashEs = require("lodash-es");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
 var _excluded = ["name", "show", "children"];
 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;
@@ -22,7 +23,7 @@ var WmRepeatTemplate = /*#__PURE__*/(0, _react.memo)(function (props) {
   return __jsx("div", (0, _extends2["default"])({
     className: "app-repeat-item",
     hidden: !show
-  }, restProps), children);
+  }, (0, _attr.removeInvalidAttributes)(restProps)), children);
 }, function (prev, next) {
   var keys = ["name", "show", "children", "hidden", "className", "styles"];
   return keys.every(function (key) {

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

@@ -1,9 +1,10 @@
 import React from "react";
-import { WmTabsProps } from "./props";
+import { WmTabsProps, PaneHeaderProps } from "./props";
 export declare const useTabsContext: () => {
     selectedIndex: number;
     setSelectedIndex: (index: number) => void;
     tabsContainerName?: string;
+    updatePaneHeader: (name: string | undefined, headerProps: PaneHeaderProps) => void;
 };
 export declare const WmTabs: React.MemoExoticComponent<(Props: WmTabsProps) => import("react/jsx-runtime").JSX.Element>;
 /**
@@ -57,6 +58,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/tabs/index.js

@@ -25,6 +25,28 @@ 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 = "nav nav-tabs";
+var PANE_HEADER_PROP_KEYS = ["name", "title", "disabled", "show", "paneicon", "badgevalue", "badgetype", "className", "onHeaderclick", "onHeaderClick"];
+var getPaneHeaderProps = function getPaneHeaderProps(props) {
+  return {
+    name: props === null || props === void 0 ? void 0 : props.name,
+    title: props === null || props === void 0 ? void 0 : props.title,
+    disabled: props === null || props === void 0 ? void 0 : props.disabled,
+    show: props === null || props === void 0 ? void 0 : props.show,
+    paneicon: props === null || props === void 0 ? void 0 : props.paneicon,
+    badgevalue: props === null || props === void 0 ? void 0 : props.badgevalue,
+    badgetype: props === null || props === void 0 ? void 0 : props.badgetype,
+    className: props === null || props === void 0 ? void 0 : props.className,
+    onHeaderclick: props === null || props === void 0 ? void 0 : props.onHeaderclick,
+    onHeaderClick: props === null || props === void 0 ? void 0 : props.onHeaderClick
+  };
+};
+var arePaneHeaderPropsEqual = function arePaneHeaderPropsEqual() {
+  var prev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return PANE_HEADER_PROP_KEYS.every(function (key) {
+    return Object.is(prev[key], next[key]);
+  });
+};
 
 // Helper function to check if a component is WmTabPane
 var isTabPaneComponent = function isTabPaneComponent(child) {
@@ -35,7 +57,8 @@ var isTabPaneComponent = function isTabPaneComponent(child) {
 var TabsContext = /*#__PURE__*/(0, _react.createContext)({
   selectedIndex: 0,
   setSelectedIndex: function setSelectedIndex() {},
-  tabsContainerName: undefined
+  tabsContainerName: undefined,
+  updatePaneHeader: function updatePaneHeader() {}
 });
 var useTabsContext = exports.useTabsContext = function useTabsContext() {
   return (0, _react.useContext)(TabsContext);
@@ -63,6 +86,7 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
 
   // Pending tab from NavigateTo (cross-page); mirrored from Redux via store middleware so this works without Provider
   var initialPendingTabRef = (0, _react.useRef)((0, _pendingTabNavigationIntent.getPendingTabNavigationIntent)());
+  var Widgets = listener === null || listener === void 0 ? void 0 : listener.Widgets;
   var panesCount = (0, _react.useRef)(0);
   var prevSelectedIndex = (0, _react.useRef)(null);
 
@@ -86,10 +110,24 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
   var _useState2 = (0, _react.useState)(new Set()),
     hiddenTabNames = _useState2[0],
     setHiddenTabNames = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    paneHeaderOverrides = _useState3[0],
+    setPaneHeaderOverrides = _useState3[1];
   // Track which tab indices have been rendered at least once (for dynamic tabs)
-  var _useState3 = (0, _react.useState)(new Set([selectedIndex])),
-    renderedTabIndices = _useState3[0],
-    setRenderedTabIndices = _useState3[1];
+  var _useState4 = (0, _react.useState)(new Set([selectedIndex])),
+    renderedTabIndices = _useState4[0],
+    setRenderedTabIndices = _useState4[1];
+  var updatePaneHeader = (0, _react.useCallback)(function (paneName, headerProps) {
+    if (!paneName) return;
+    var nextHeaderProps = getPaneHeaderProps(headerProps);
+    setPaneHeaderOverrides(function (prev) {
+      var prevHeaderProps = prev[paneName];
+      if (arePaneHeaderPropsEqual(prevHeaderProps, nextHeaderProps)) {
+        return prev;
+      }
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, paneName, nextHeaderProps));
+    });
+  }, []);
 
   // Keep currentSelectedIndex ref in sync with state
   (0, _react.useEffect)(function () {
@@ -156,10 +194,9 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
     }
   }, []);
 
-  // get the current active tab name
-  var getActiveTabName = _react["default"].useCallback(function () {
+  // get the active tab name for a given index
+  var getActiveTabNameByIndex = _react["default"].useCallback(function (currentIndex) {
     var _activeChild$props;
-    var currentIndex = currentSelectedIndex.current;
     if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) > 0) {
       var _dataset$currentIndex;
       return ((_dataset$currentIndex = dataset[currentIndex]) === null || _dataset$currentIndex === void 0 ? void 0 : _dataset$currentIndex.name) || null;
@@ -174,15 +211,17 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
   // get the active tab widget from listener
   var getActiveTab = _react["default"].useCallback(function () {
     var _listener$Widgets;
-    var activeTabName = getActiveTabName();
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : currentSelectedIndex.current;
+    var activeTabName = getActiveTabNameByIndex(index);
     return activeTabName ? listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[activeTabName] : null;
-  }, [getActiveTabName, listener]);
+  }, [getActiveTabNameByIndex, listener]);
   var updateListener = function updateListener() {
+    var activeIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : currentSelectedIndex.current;
     if (listener && listener.onChange) {
       listener.onChange(name, {
         prev: prev,
         next: next,
-        activeTab: getActiveTab(),
+        activeTab: getActiveTab(activeIndex),
         panes: {
           length: panesCount.current
         },
@@ -210,6 +249,13 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       });
     }
   };
+  var getLatestTabsWidget = function getLatestTabsWidget(activeIndex) {
+    var _listener$Widgets2;
+    var registeredTabsWidget = name ? listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name] : null;
+    return _objectSpread(_objectSpread({}, registeredTabsWidget || props), {}, {
+      activeTab: getActiveTab(activeIndex)
+    });
+  };
 
   // register the methods
   (0, _react.useEffect)(function () {
@@ -236,10 +282,8 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
   (0, _react.useEffect)(function () {
     // If a tab was targeted via navigation (NavigateTo action with tabName),
     // honour that selection and skip the default/saved-state logic entirely.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     var pendingTab = initialPendingTabRef.current;
     if (pendingTab && children) {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       var visibleChildren = (0, _utils.filterVisibleChildren)(children, new Set());
       var matchIndex = visibleChildren.findIndex(function (c) {
         var _c$props2;
@@ -278,10 +322,9 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       return;
     }
     if (item !== null && item !== void 0 && item.onHeaderclick) {
-      var _listener$Widgets2;
-      item.onHeaderclick(e, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name], index);
+      item.onHeaderclick(e, Widgets === null || Widgets === void 0 ? void 0 : Widgets[name], index);
     }
-  }, []);
+  }, [Widgets, name]);
   var renderTabHeader = _react["default"].useCallback(function (item, index) {
     return __jsx(_tabs.Tabs.Tab, (0, _extends2["default"])({}, item, {
       title: item.title || item.name || "Tab ".concat(index + 1),
@@ -301,11 +344,9 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       tabIndex: selectedIndex === index ? 0 : -1,
       render: function render(prop) {
         return __jsx("li", prop, __jsx("div", {
-          style: {
-            cursor: item.disabled ? "not-allowed" : "pointer",
-            gap: "var(--wm-anchor-gap)"
-          },
-          className: "tab-heading",
+          className: (0, _clsx["default"])("tab-heading", "wm-tabs-heading", {
+            "wm-tabs-heading-disabled": item.disabled
+          }),
           "icon-position": iconposition || "left",
           title: item.title || item.name || "Tab ".concat(index + 1),
           "aria-selected": selectedIndex === index,
@@ -327,15 +368,19 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
         }, item.badgevalue)));
       }
     }));
-  }, [selectedIndex, iconposition]);
+  }, [selectedIndex, iconposition, handleTabHeaderClick]);
   var renderDynamicTabs = _react["default"].useCallback(function () {
     if (!(dataset !== null && dataset !== void 0 && dataset.length)) return null;
     var headers = [];
     var tabIndex = 0;
     var addTabHeader = function addTabHeader(itemProps) {
+      var paneName = itemProps === null || itemProps === void 0 ? void 0 : itemProps.name;
+      var latestWidgetState = paneName ? (Widgets === null || Widgets === void 0 ? void 0 : Widgets[paneName]) || {} : {};
+      var headerOverrides = paneName ? paneHeaderOverrides[paneName] || {} : {};
+      var resolvedItemProps = _objectSpread(_objectSpread(_objectSpread({}, itemProps), latestWidgetState), headerOverrides);
       headers.push(__jsx(_react["default"].Fragment, {
         key: tabIndex
-      }, renderTabHeader(itemProps, tabIndex)));
+      }, renderTabHeader(resolvedItemProps, tabIndex)));
       tabIndex++;
     };
     dataset.forEach(function (item, index) {
@@ -356,25 +401,34 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
     });
     panesCount.current = tabIndex;
     return headers;
-  }, [dataset, render, renderTabHeader]);
+  }, [dataset, render, renderTabHeader, Widgets, paneHeaderOverrides]);
   var renderStaticTabs = _react["default"].useCallback(function () {
     // Consider only panes with show !== false and not hidden via internal state
     var visibleChildren = (0, _utils.filterVisibleChildren)(children, hiddenTabNames);
     panesCount.current = visibleChildren.length;
     return visibleChildren.map(function (child, index) {
-      var _child$props, _Widgets;
+      var _child$props;
       if (!child) return null;
       var paneName = child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.name;
-      var latestWidgetState = paneName ? (listener === null || listener === void 0 || (_Widgets = listener.Widgets) === null || _Widgets === void 0 ? void 0 : _Widgets[paneName]) || {} : {};
-      var itemProps = _objectSpread(_objectSpread({}, child.props), latestWidgetState);
+      var latestWidgetState = paneName ? (Widgets === null || Widgets === void 0 ? void 0 : Widgets[paneName]) || {} : {};
+      var headerOverrides = paneName ? paneHeaderOverrides[paneName] || {} : {};
+      var itemProps = _objectSpread(_objectSpread(_objectSpread({}, child.props), latestWidgetState), headerOverrides);
       return __jsx(_react["default"].Fragment, {
         key: index
       }, renderTabHeader(itemProps, index));
     });
-  }, [children, renderTabHeader, hiddenTabNames]);
+  }, [children, renderTabHeader, hiddenTabNames, Widgets, paneHeaderOverrides]);
   var renderTabs = _react["default"].useMemo(function () {
     return type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) > 0 ? renderDynamicTabs() : renderStaticTabs();
   }, [type, dataset, renderDynamicTabs, renderStaticTabs]);
+  var tabsContextValue = (0, _react.useMemo)(function () {
+    return {
+      selectedIndex: selectedIndex,
+      setSelectedIndex: setSelectedIndex,
+      tabsContainerName: name,
+      updatePaneHeader: updatePaneHeader
+    };
+  }, [selectedIndex, name, updatePaneHeader]);
 
   // for vertical tabs, we need to set the flex direction to row
   var orientation = tabsposition === "left" || tabsposition === "right" ? "vertical" : "horizontal";
@@ -403,9 +457,16 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       });
     }
 
-    // For static tabs, render only visible panes
+    // For static tabs, render only visible panes with corrected indices
+    // so they match the sequential header indices assigned by renderStaticTabs
     var visibleChildren = (0, _utils.filterVisibleChildren)(children, hiddenTabNames);
-    return visibleChildren;
+    return visibleChildren.map(function (child, idx) {
+      if (!(child !== null && child !== void 0 && child.props)) return child;
+      if (child.props.index === idx) return child;
+      return /*#__PURE__*/_react["default"].cloneElement(child, {
+        index: idx
+      });
+    });
   };
   if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) <= 0) {
     return __jsx("div", null, nodatamessage);
@@ -413,11 +474,7 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
   //  moves tab list to end for right/bottom (appendNode), so content is first in DOM.
   var contentFirst = tabsposition === "right" || tabsposition === "bottom";
   return __jsx(TabsContext.Provider, {
-    value: {
-      selectedIndex: selectedIndex,
-      setSelectedIndex: setSelectedIndex,
-      tabsContainerName: name
-    }
+    value: tabsContextValue
   }, __jsx(_tabs.Tabs.Root, {
     style: styles,
     name: name,
@@ -432,10 +489,10 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       currentSelectedIndex.current = newIndex;
       setSelectedIndex(newIndex);
       saveStateToStorage(newIndex);
-      onChange === null || onChange === void 0 || onChange(null, props, newIndex, oldIndex);
 
-      // Notify listener about tab change
-      updateListener();
+      // Publish activeTab before external handlers read wm.Widgets[name].activeTab.
+      updateListener(newIndex);
+      onChange === null || onChange === void 0 || onChange(null, getLatestTabsWidget(newIndex), newIndex, oldIndex);
     },
     orientation: orientation,
     className: (0, _clsx["default"])("app-tabs clearfix", className, {
@@ -444,14 +501,11 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       inverted: contentFirst
     })
   }, contentFirst ? __jsx(_react["default"].Fragment, null, __jsx("div", {
-    className: (0, _clsx["default"])("tab-content", {
+    className: (0, _clsx["default"])("tab-content", "wm-tabs-content", {
       "tab-stacked": orientation === "vertical",
-      "tab-justified": justified
-    }),
-    style: {
-      flex: orientation === "vertical" ? 1 : undefined,
-      minWidth: orientation === "vertical" ? 0 : undefined
-    }
+      "tab-justified": justified,
+      "wm-tabs-content-vertical": orientation === "vertical"
+    })
   }, renderTabPanels()), __jsx(_tabs.Tabs.List, {
     className: (0, _clsx["default"])(DEFAULT_CLASS, {
       "nav-stacked": orientation === "vertical",
@@ -471,14 +525,11 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       return __jsx("ul", props, renderTabs);
     }
   }), __jsx("div", {
-    className: (0, _clsx["default"])("tab-content", {
+    className: (0, _clsx["default"])("tab-content", "wm-tabs-content", {
       "tab-stacked": orientation === "vertical",
-      "tab-justified": justified
-    }),
-    style: {
-      flex: orientation === "vertical" ? 1 : undefined,
-      minWidth: orientation === "vertical" ? 0 : undefined
-    }
+      "tab-justified": justified,
+      "wm-tabs-content-vertical": orientation === "vertical"
+    })
   }, renderTabPanels()))));
 }, function (prev, next) {
   var keys = ["dataset", "defaultpaneindex", "justified", "tabsposition", "nodatamessage", "statehandler", "autotabactivation", "transition", "type", "iconposition", "render", "selectedindex", "children"];

package/components/container/tabs/props.d.ts

@@ -13,6 +13,18 @@ export type TabIconPosition = "top" | "start" | "end" | "bottom" | "left";
  * Transition effect when switching tabs.
  */
 export type TabTransition = "none" | "slide" | "fade";
+export type PaneHeaderProps = {
+    name?: string;
+    title?: string;
+    disabled?: boolean;
+    show?: string | boolean;
+    paneicon?: string;
+    badgevalue?: string | number;
+    badgetype?: string;
+    className?: string;
+    onHeaderclick?: (...args: any[]) => void;
+    onHeaderClick?: (...args: any[]) => void;
+};
 /**
  * Base props specific to the WmTabs component.
  */

package/components/container/tabs/tab-pane/index.d.ts

@@ -64,6 +64,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/tabs/tab-pane/index.js

@@ -15,8 +15,6 @@ var _ = require("..");
 var _widgetInstanceUtils = require("@wavemaker-ai/react-runtime/components/data/list/utils/widget-instance-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;
-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 WmTabpane = exports.WmTabpane = function WmTabpane(props) {
   var className = props.className,
     disabled = props.disabled,
@@ -26,12 +24,15 @@ var WmTabpane = exports.WmTabpane = function WmTabpane(props) {
     listener = props.listener,
     item = props.item,
     layoutClassName = props.layoutClassName;
+  var onHeaderclick = props.onHeaderclick;
   var _useTabsContext = (0, _.useTabsContext)(),
     selectedIndex = _useTabsContext.selectedIndex,
     setSelectedIndex = _useTabsContext.setSelectedIndex,
-    tabsContainerName = _useTabsContext.tabsContainerName;
+    tabsContainerName = _useTabsContext.tabsContainerName,
+    updatePaneHeader = _useTabsContext.updatePaneHeader;
   var wasActiveRef = _react["default"].useRef(false);
   var loadedRef = _react["default"].useRef(false);
+  var hasReportedHeaderRef = _react["default"].useRef(false);
   (0, _react.useEffect)(function () {
     var _props$listener;
     var isActive = selectedIndex === index;
@@ -48,7 +49,6 @@ var WmTabpane = exports.WmTabpane = function WmTabpane(props) {
     }
 
     // Read widgetInstance AFTER registration above so it carries select/deselect/isActive
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     var widgetInstance = props === null || props === void 0 || (_props$listener = props.listener) === null || _props$listener === void 0 || (_props$listener = _props$listener.Widgets) === null || _props$listener === void 0 ? void 0 : _props$listener[name];
     (0, _widgetInstanceUtils.setWidgetIndexWithContext)(widgetInstance, [item], item);
     if (isActive && tabsContainerName) {
@@ -72,22 +72,39 @@ var WmTabpane = exports.WmTabpane = function WmTabpane(props) {
       props === null || props === void 0 || (_props$onDeselect = props.onDeselect) === null || _props$onDeselect === void 0 || _props$onDeselect.call(props, null, widgetInstance, index);
       wasActiveRef.current = false;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedIndex, name]);
   var isHidden = (0, _react.useMemo)(function () {
     return item === undefined ? false : (item === null || item === void 0 ? void 0 : item.show) === false;
   }, [item]);
+  var headerProps = (0, _react.useMemo)(function () {
+    return {
+      name: name,
+      title: props.title,
+      disabled: disabled,
+      show: props.show,
+      paneicon: props.paneicon,
+      badgevalue: props.badgevalue,
+      badgetype: props.badgetype,
+      className: className,
+      onHeaderclick: onHeaderclick,
+      onHeaderClick: props.onHeaderClick
+    };
+  }, [name, props.title, disabled, props.show, props.paneicon, props.badgevalue, props.badgetype, className, onHeaderclick, props.onHeaderClick]);
+  (0, _react.useEffect)(function () {
+    if (!hasReportedHeaderRef.current) {
+      hasReportedHeaderRef.current = true;
+      return;
+    }
+    updatePaneHeader(name, headerProps);
+  }, [name, headerProps, updatePaneHeader]);
   return __jsx(_tabs.Tabs.Panel, {
     value: index,
     keepMounted: true,
-    className: (0, _clsx2["default"])("tab-pane", layoutClassName, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+    className: (0, _clsx2["default"])("tab-pane", "wm-tab-pane-root", layoutClassName, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
       disabled: disabled
-    }, className, !!className), "active", selectedIndex === index), "hidden", isHidden)),
+    }, className, !!className), "active", selectedIndex === index), "hidden", isHidden), "wm-tab-pane-active", selectedIndex === index), "wm-tab-pane-inactive", selectedIndex !== index)),
     role: "tabpanel",
-    style: _objectSpread({
-      width: "100%",
-      display: selectedIndex === index ? "block" : "none"
-    }, props === null || props === void 0 ? void 0 : props.styles),
+    style: props === null || props === void 0 ? void 0 : props.styles,
     "data-pane-name": name,
     title: props === null || props === void 0 ? void 0 : props.title,
     name: name

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

@@ -53,6 +53,7 @@ declare const WmWizardStandalone: 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;
@@ -139,6 +140,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/wizard/wizard-step/index.d.ts

@@ -36,6 +36,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/wizard/wizard-step/index.js

@@ -62,13 +62,13 @@ var WmWizardstep = exports.WmWizardstep = /*#__PURE__*/(0, _react.memo)(function
       enablePrev: !disableprevious,
       enableDone: !disabledone,
       isDone: false,
-      render: function render() {
+      render: render ? function () {
         var _renderRef$current;
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
         }
         return (_renderRef$current = renderRef.current) === null || _renderRef$current === void 0 ? void 0 : _renderRef$current.call.apply(_renderRef$current, [renderRef].concat(args));
-      },
+      } : undefined,
       done: false,
       active: false,
       disabled: false,

package/components/data/card/card-actions/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/data/card/card-actions/index.js

@@ -5,20 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WmCardActions = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
 var _material = require("@mui/material");
 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 WmCardActions = exports.WmCardActions = function WmCardActions(props) {
   var children = props.children,
     className = props.className,
     styles = props.styles;
   return __jsx(_material.CardActions, {
-    className: "app-card-actions ".concat(className || ""),
-    style: _objectSpread({}, styles)
+    className: (0, _clsx["default"])("app-card-actions", className),
+    style: styles
   }, children);
 };
 

package/components/data/card/card-content/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;