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

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

@@ -1,10 +1,9 @@
 import React from "react";
-import { WmTabsProps, PaneHeaderProps } from "./props";
+import { WmTabsProps } 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>;
 /**
@@ -58,7 +57,6 @@ 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,28 +25,6 @@ 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) {
@@ -57,8 +35,7 @@ var isTabPaneComponent = function isTabPaneComponent(child) {
 var TabsContext = /*#__PURE__*/(0, _react.createContext)({
   selectedIndex: 0,
   setSelectedIndex: function setSelectedIndex() {},
-  tabsContainerName: undefined,
-  updatePaneHeader: function updatePaneHeader() {}
+  tabsContainerName: undefined
 });
 var useTabsContext = exports.useTabsContext = function useTabsContext() {
   return (0, _react.useContext)(TabsContext);
@@ -86,7 +63,6 @@ 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);
 
@@ -110,24 +86,10 @@ 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 _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));
-    });
-  }, []);
+  var _useState3 = (0, _react.useState)(new Set([selectedIndex])),
+    renderedTabIndices = _useState3[0],
+    setRenderedTabIndices = _useState3[1];
 
   // Keep currentSelectedIndex ref in sync with state
   (0, _react.useEffect)(function () {
@@ -194,9 +156,10 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
     }
   }, []);
 
-  // get the active tab name for a given index
-  var getActiveTabNameByIndex = _react["default"].useCallback(function (currentIndex) {
+  // get the current active tab name
+  var getActiveTabName = _react["default"].useCallback(function () {
     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;
@@ -211,17 +174,15 @@ 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 index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : currentSelectedIndex.current;
-    var activeTabName = getActiveTabNameByIndex(index);
+    var activeTabName = getActiveTabName();
     return activeTabName ? listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[activeTabName] : null;
-  }, [getActiveTabNameByIndex, listener]);
+  }, [getActiveTabName, 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(activeIndex),
+        activeTab: getActiveTab(),
         panes: {
           length: panesCount.current
         },
@@ -249,13 +210,6 @@ 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 () {
@@ -282,8 +236,10 @@ 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;
@@ -322,9 +278,10 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       return;
     }
     if (item !== null && item !== void 0 && item.onHeaderclick) {
-      item.onHeaderclick(e, Widgets === null || Widgets === void 0 ? void 0 : Widgets[name], index);
+      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);
     }
-  }, [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),
@@ -344,9 +301,11 @@ 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", {
-          className: (0, _clsx["default"])("tab-heading", "wm-tabs-heading", {
-            "wm-tabs-heading-disabled": item.disabled
-          }),
+          style: {
+            cursor: item.disabled ? "not-allowed" : "pointer",
+            gap: "var(--wm-anchor-gap)"
+          },
+          className: "tab-heading",
           "icon-position": iconposition || "left",
           title: item.title || item.name || "Tab ".concat(index + 1),
           "aria-selected": selectedIndex === index,
@@ -368,19 +327,15 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
         }, item.badgevalue)));
       }
     }));
-  }, [selectedIndex, iconposition, handleTabHeaderClick]);
+  }, [selectedIndex, iconposition]);
   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(resolvedItemProps, tabIndex)));
+      }, renderTabHeader(itemProps, tabIndex)));
       tabIndex++;
     };
     dataset.forEach(function (item, index) {
@@ -401,34 +356,25 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
     });
     panesCount.current = tabIndex;
     return headers;
-  }, [dataset, render, renderTabHeader, Widgets, paneHeaderOverrides]);
+  }, [dataset, render, renderTabHeader]);
   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;
+      var _child$props, _Widgets;
       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 ? (Widgets === null || Widgets === void 0 ? void 0 : Widgets[paneName]) || {} : {};
-      var headerOverrides = paneName ? paneHeaderOverrides[paneName] || {} : {};
-      var itemProps = _objectSpread(_objectSpread(_objectSpread({}, child.props), latestWidgetState), headerOverrides);
+      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);
       return __jsx(_react["default"].Fragment, {
         key: index
       }, renderTabHeader(itemProps, index));
     });
-  }, [children, renderTabHeader, hiddenTabNames, Widgets, paneHeaderOverrides]);
+  }, [children, renderTabHeader, hiddenTabNames]);
   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";
@@ -457,16 +403,9 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       });
     }
 
-    // For static tabs, render only visible panes with corrected indices
-    // so they match the sequential header indices assigned by renderStaticTabs
+    // For static tabs, render only visible panes
     var visibleChildren = (0, _utils.filterVisibleChildren)(children, hiddenTabNames);
-    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
-      });
-    });
+    return visibleChildren;
   };
   if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) <= 0) {
     return __jsx("div", null, nodatamessage);
@@ -474,7 +413,11 @@ 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: tabsContextValue
+    value: {
+      selectedIndex: selectedIndex,
+      setSelectedIndex: setSelectedIndex,
+      tabsContainerName: name
+    }
   }, __jsx(_tabs.Tabs.Root, {
     style: styles,
     name: name,
@@ -489,10 +432,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);
 
-      // Publish activeTab before external handlers read wm.Widgets[name].activeTab.
-      updateListener(newIndex);
-      onChange === null || onChange === void 0 || onChange(null, getLatestTabsWidget(newIndex), newIndex, oldIndex);
+      // Notify listener about tab change
+      updateListener();
     },
     orientation: orientation,
     className: (0, _clsx["default"])("app-tabs clearfix", className, {
@@ -501,11 +444,14 @@ 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", "wm-tabs-content", {
+    className: (0, _clsx["default"])("tab-content", {
       "tab-stacked": orientation === "vertical",
-      "tab-justified": justified,
-      "wm-tabs-content-vertical": orientation === "vertical"
-    })
+      "tab-justified": justified
+    }),
+    style: {
+      flex: orientation === "vertical" ? 1 : undefined,
+      minWidth: orientation === "vertical" ? 0 : undefined
+    }
   }, renderTabPanels()), __jsx(_tabs.Tabs.List, {
     className: (0, _clsx["default"])(DEFAULT_CLASS, {
       "nav-stacked": orientation === "vertical",
@@ -525,11 +471,14 @@ var WmTabs = exports.WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       return __jsx("ul", props, renderTabs);
     }
   }), __jsx("div", {
-    className: (0, _clsx["default"])("tab-content", "wm-tabs-content", {
+    className: (0, _clsx["default"])("tab-content", {
       "tab-stacked": orientation === "vertical",
-      "tab-justified": justified,
-      "wm-tabs-content-vertical": orientation === "vertical"
-    })
+      "tab-justified": justified
+    }),
+    style: {
+      flex: orientation === "vertical" ? 1 : undefined,
+      minWidth: orientation === "vertical" ? 0 : undefined
+    }
   }, 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,18 +13,6 @@ 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,7 +64,6 @@ 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,6 +15,8 @@ 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,
@@ -24,15 +26,12 @@ 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,
-    updatePaneHeader = _useTabsContext.updatePaneHeader;
+    tabsContainerName = _useTabsContext.tabsContainerName;
   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;
@@ -49,6 +48,7 @@ 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,39 +72,22 @@ 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", "wm-tab-pane-root", layoutClassName, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+    className: (0, _clsx2["default"])("tab-pane", layoutClassName, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
       disabled: disabled
-    }, className, !!className), "active", selectedIndex === index), "hidden", isHidden), "wm-tab-pane-active", selectedIndex === index), "wm-tab-pane-inactive", selectedIndex !== index)),
+    }, className, !!className), "active", selectedIndex === index), "hidden", isHidden)),
     role: "tabpanel",
-    style: props === null || props === void 0 ? void 0 : props.styles,
+    style: _objectSpread({
+      width: "100%",
+      display: selectedIndex === index ? "block" : "none"
+    }, 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,7 +53,6 @@ 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;
@@ -140,7 +139,6 @@ 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,7 +36,6 @@ 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: render ? function () {
+      render: function render() {
         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,7 +40,6 @@ 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,18 +5,20 @@ 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: (0, _clsx["default"])("app-card-actions", className),
-    style: styles
+    className: "app-card-actions ".concat(className || ""),
+    style: _objectSpread({}, styles)
   }, children);
 };
 

package/components/data/card/card-content/index.d.ts

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

@@ -5,24 +5,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WmCardContent = 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 WmCardContent = exports.WmCardContent = function WmCardContent(props) {
   var content = props.content,
     children = props.children,
     className = props.className,
     styles = props.styles;
   return __jsx(_material.CardContent, {
-    className: (0, _clsx["default"])("app-card-content", "card-body", "card-block", "wm-card-content-root", className)
+    className: "app-card-content card-body card-block ".concat(className || ""),
+    sx: {
+      padding: "0",
+      margin: "0",
+      backgroundColor: "transparent",
+      "&:last-child": {
+        paddingBottom: "0"
+      }
+    }
   }, content && __jsx("div", {
     dangerouslySetInnerHTML: {
       __html: content
     }
   }), __jsx(_material.Box, {
-    style: styles
+    style: _objectSpread({}, styles)
   }, props.renderPartial ? props.renderPartial(props, props.onLoad) : children));
 };
 

package/components/data/card/card-footer/index.d.ts

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

@@ -5,18 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WmCardFooter = 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 WmCardFooter = exports.WmCardFooter = function WmCardFooter(props) {
   var children = props.children,
     className = props.className,
     styles = props.styles;
   return __jsx(_material.Box, {
-    className: (0, _clsx["default"])("app-card-footer", "text-muted", "card-footer", className),
-    style: styles
+    className: "app-card-footer text-muted card-footer ".concat(className || ""),
+    style: _objectSpread({}, styles)
   }, children);
 };
 

package/components/data/card/index.d.ts

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

@@ -160,7 +160,9 @@ var WmCard = exports.WmCard = function WmCard(props) {
         alt: "",
         width: 40,
         height: 40,
-        className: "wm-card-avatar-img"
+        style: {
+          borderRadius: "50%"
+        }
       }));
     }
     return null;
@@ -205,9 +207,14 @@ var WmCard = exports.WmCard = function WmCard(props) {
   });
   return __jsx(_material.Card, cardProps, showHeader && __jsx(_material.CardHeader, cardHeaderProps), picturesource && __jsx(_material.CardMedia, {
     component: "div",
-    className: (0, _clsx["default"])("app-card-image", "wm-card-media-root"),
+    className: "app-card-image",
     style: {
       maxHeight: imageheight
+    },
+    sx: {
+      padding: "0",
+      margin: "0",
+      backgroundColor: "transparent"
     }
   }, __jsx(_image["default"], {
     src: picturesource,
@@ -215,7 +222,11 @@ var WmCard = exports.WmCard = function WmCard(props) {
     width: 0,
     height: 0,
     sizes: "100vw",
-    className: (0, _clsx["default"])("card-image", "wm-card-media-img")
+    className: "card-image",
+    style: {
+      width: "100%",
+      height: "100%"
+    }
   })), _react["default"].Children.map(children, function (child) {
     if (isComponentType(child, _cardContent.WmCardContent) || isComponentType(child, _cardContent["default"])) {
       return child;