@wavemaker/react-runtime 11.14.3-rc.6401 → 11.15.0-2.247

package/components/container/alignment-utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normalizeGapValue = exports.isAutoValue = exports.getDirectionalAlignment = exports.getBaseAlignment = exports.formatPixelValue = exports.createBaseFlexStyles = exports.calculateWrapSpacing = exports.calculateSpacingStyles = exports.calculateNoWrapSpacing = exports.calculateAlignmentStyles = void 0;
+exports.normalizeGapValue = exports.isAutoValue = exports.getDirectionalAlignment = exports.getBaseAlignment = exports.formatPixelValue = exports.createBaseFlexStyles = exports.calculateWrapSpacing = exports.calculateSpacingStyles = exports.calculatePositionStyles = exports.calculateNoWrapSpacing = exports.calculateClipBehaviour = exports.calculateAlignmentStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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; }
@@ -180,4 +180,59 @@ var calculateSpacingStyles = exports.calculateSpacingStyles = function calculate
     return calculateNoWrapSpacing(gap, normalizedGap, base, justifyContent, alignItems);
   }
   return calculateWrapSpacing(gap, columngap, normalizedGap, normalizedColumnGap, normalizedRowGap, justifyContent, alignItems);
+};
+
+/**
+ * Calculates overflow and clip content styles based on overflow type and clipContent setting
+ */
+var calculateClipBehaviour = exports.calculateClipBehaviour = function calculateClipBehaviour(overflow, clipContent) {
+  var overflowLower = overflow === null || overflow === void 0 ? void 0 : overflow.toLowerCase();
+  var styles = {};
+  switch (overflowLower) {
+    case "vertical":
+      styles.overflowX = "hidden";
+      styles.overflowY = "scroll";
+      break;
+    case "horizontal":
+      styles.overflowX = "scroll";
+      styles.overflowY = "hidden";
+      break;
+    case "both directions":
+      styles.overflow = "scroll";
+      break;
+    case "no scrolling":
+      if (clipContent) {
+        styles.overflow = "hidden";
+      } else {
+        styles.overflow = "";
+      }
+      break;
+    default:
+      break;
+  }
+  return styles;
+};
+
+/**
+ * Calculates position and z-index styles
+ */
+var calculatePositionStyles = exports.calculatePositionStyles = function calculatePositionStyles(position, zIndex) {
+  var styles = {};
+  if (position === "sticky") {
+    // Apply sticky styles
+    styles.position = "sticky";
+    styles.top = "0"; // Sticks to top when scrolling vertically
+    styles.left = "0"; // Sticks to left when scrolling horizontally
+    if (zIndex !== undefined) {
+      styles.zIndex = zIndex;
+    }
+  } else if (position) {
+    // Set position if explicitly provided
+    styles.position = position;
+    // Only apply z-index if position is not static/relative
+    if (zIndex !== undefined && position !== "static" && position !== "relative") {
+      styles.zIndex = zIndex;
+    }
+  }
+  return styles;
 };

package/components/container/index.js

@@ -9,9 +9,11 @@ exports["default"] = exports.WmContainer = void 0;
 var _react = _interopRequireWildcard(require("react"));
 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 _clsx2 = require("clsx");
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var _alignmentUtils = require("./alignment-utils");
+var _excluded = ["className", "styles", "children", "renderPartial", "id", "direction", "wrap", "alignment", "gap", "columngap", "clipcontent", "position", "zindex"];
 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; }
@@ -70,20 +72,22 @@ var alignmentMatrix = {
   }
 };
 var WmContainer = exports.WmContainer = function WmContainer(props) {
-  var _clsx;
   var className = props.className,
     styles = props.styles,
     children = props.children,
     renderPartial = props.renderPartial,
     id = props.id,
-    display = props.display,
     _props$direction = props.direction,
-    direction = _props$direction === void 0 ? "row" : _props$direction,
-    _props$wrap = props.wrap,
-    wrap = _props$wrap === void 0 ? false : _props$wrap,
-    alignment = props.alignment,
+    direction = _props$direction === void 0 ? "" : _props$direction,
+    wrap = props.wrap,
+    _props$alignment = props.alignment,
+    alignment = _props$alignment === void 0 ? "" : _props$alignment,
     gap = props.gap,
-    columngap = props.columngap;
+    columngap = props.columngap,
+    clipcontent = props.clipcontent,
+    position = props.position,
+    zindex = props.zindex,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var isLoaded = (0, _react.useRef)(false);
   function handleClick(event) {
     var _props$onClick;
@@ -151,21 +155,45 @@ var WmContainer = exports.WmContainer = function WmContainer(props) {
     var _styles$backgroundIma;
     customStyles.backgroundImage = "".concat(styles !== null && styles !== void 0 && (_styles$backgroundIma = styles.backgroundImage) !== null && _styles$backgroundIma !== void 0 && _styles$backgroundIma.includes("url(") ? styles === null || styles === void 0 ? void 0 : styles.backgroundImage : "url(" + (styles === null || styles === void 0 ? void 0 : styles.backgroundImage) + ")");
   }
+  var hasAlignmentRelatedProps = Boolean(direction || wrap || alignment || gap != null || columngap != null || position != null && position !== "" || clipcontent != null && clipcontent !== "");
 
   // Memoize the computed styles for performance
   var computedStyles = (0, _react.useMemo)(function () {
-    var base = alignment && alignmentMatrix[alignment];
+    var _props$styles, _props$styles2, _props$styles3, _props$styles4, _props$styles5, _props$styles6, _props$styles7;
+    if (!hasAlignmentRelatedProps) {
+      return _objectSpread(_objectSpread({}, styles), customStyles);
+    }
+
+    // When alignment-related props are used, apply defaults for direction/alignment/wrap if not defined
+    var effectiveDirection = direction || "row";
+    var effectiveAlignment = alignment || "top-left";
+    var effectiveWrap = wrap !== null && wrap !== void 0 ? wrap : false;
+    var base = alignmentMatrix[effectiveAlignment];
     if (!base) {
-      return _objectSpread(_objectSpread(_objectSpread({}, styles), customStyles), {}, (0, _defineProperty2["default"])({
-        display: display || props.direction ? "flex" : ""
-      }, "flex-flow", direction || "row"));
+      return _objectSpread(_objectSpread(_objectSpread({}, styles), customStyles), {
+        display: "flex",
+        flexDirection: effectiveDirection || "",
+        flexWrap: effectiveWrap ? "wrap" : "nowrap"
+      });
+    }
+    var alignmentStyles = (0, _alignmentUtils.calculateAlignmentStyles)(alignmentMatrix, effectiveAlignment, effectiveDirection, effectiveWrap);
+    var spacingStyles = (0, _alignmentUtils.calculateSpacingStyles)(alignmentMatrix, gap, columngap, effectiveAlignment, effectiveDirection, effectiveWrap);
+    var clipStyles = (0, _alignmentUtils.calculateClipBehaviour)(((_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.overflow) || "", clipcontent);
+    var positionStyles = (0, _alignmentUtils.calculatePositionStyles)(position, zindex);
+
+    // Apply flex-shrink: 0 when width/height are fixed values (not '100%' or 'fit-content')
+    var flexShrinkStyles = {};
+    if ((_props$styles2 = props.styles) !== null && _props$styles2 !== void 0 && _props$styles2.width && ((_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.width) !== "fit-content" && ((_props$styles4 = props.styles) === null || _props$styles4 === void 0 ? void 0 : _props$styles4.width) !== "100%") {
+      flexShrinkStyles.flexShrink = 0;
+    }
+    if ((_props$styles5 = props.styles) !== null && _props$styles5 !== void 0 && _props$styles5.height && ((_props$styles6 = props.styles) === null || _props$styles6 === void 0 ? void 0 : _props$styles6.height) !== "fit-content" && ((_props$styles7 = props.styles) === null || _props$styles7 === void 0 ? void 0 : _props$styles7.height) !== "100%") {
+      flexShrinkStyles.flexShrink = 0;
     }
-    var alignmentStyles = (0, _alignmentUtils.calculateAlignmentStyles)(alignmentMatrix, alignment, direction, wrap);
-    var spacingStyles = (0, _alignmentUtils.calculateSpacingStyles)(alignmentMatrix, gap, columngap, alignment, direction, wrap);
-    return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styles), customStyles), alignmentStyles), spacingStyles), {}, (0, _defineProperty2["default"])({
-      display: display || "flex"
-    }, "flex-flow", direction || "row"));
-  }, [styles, customStyles, alignment, direction, wrap, gap, columngap, display]);
+    return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styles), customStyles), alignmentStyles), spacingStyles), clipStyles), positionStyles), flexShrinkStyles), {}, {
+      display: "flex",
+      flexWrap: effectiveWrap ? "wrap" : "nowrap"
+    });
+  }, [hasAlignmentRelatedProps, styles, customStyles, alignment, direction, wrap, gap, columngap, clipcontent, position, zindex]);
   (0, _react.useEffect)(function () {
     if (props !== null && props !== void 0 && props.onLoad && !isLoaded.current) {
       var _props$onLoad;
@@ -175,11 +203,12 @@ var WmContainer = exports.WmContainer = function WmContainer(props) {
   }, [props === null || props === void 0 ? void 0 : props.onLoad]);
   return __jsx("div", (0, _extends2["default"])({
     style: computedStyles,
-    className: (0, _clsx2.clsx)((_clsx = {}, (0, _defineProperty2["default"])(_clsx, className || "", Boolean(className)), (0, _defineProperty2["default"])(_clsx, DEFAULT_CLASS, true), _clsx)),
+    className: (0, _clsx2.clsx)((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, className || "", Boolean(className)), DEFAULT_CLASS, !(className !== null && className !== void 0 && className.split(" ").includes("form-elements")))),
     "data-widget-id": props["data-widget-id"],
     id: id,
-    hidden: props.hidden
-  }, domEvents, {
+    hidden: props.hidden,
+    show: props.show
+  }, domEvents, rest, {
     name: props.name
   }), renderPartial ? renderPartial(props, props.onLoad) : children);
 };

package/components/container/panel/components/panel-header/index.js

@@ -21,8 +21,7 @@ var PanelHeader = function PanelHeader(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Title" : _ref$title,
     subheading = _ref.subheading,
-    _ref$iconclass = _ref.iconclass,
-    iconclass = _ref$iconclass === void 0 ? "wi wi-account-circle" : _ref$iconclass,
+    iconclass = _ref.iconclass,
     iconurl = _ref.iconurl,
     iconwidth = _ref.iconwidth,
     iconheight = _ref.iconheight,
@@ -47,8 +46,8 @@ var PanelHeader = function PanelHeader(_ref) {
     onToggleHelp = _ref.onToggleHelp,
     onClose = _ref.onClose,
     onActionsclick = _ref.onActionsclick;
-  var handleActionItemClick = function handleActionItemClick(event, item) {
-    onActionsclick === null || onActionsclick === void 0 || onActionsclick(event, item);
+  var handleActionItemClick = function handleActionItemClick(item) {
+    onActionsclick === null || onActionsclick === void 0 || onActionsclick(item);
   };
   return __jsx(_material.Box, {
     className: "panel-title"

package/components/container/panel/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.WmPanelFooter = 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 = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -15,9 +16,11 @@ var _dompurify = _interopRequireDefault(require("dompurify"));
 var _hooks = require("./hooks");
 var _panelHeader = _interopRequireDefault(require("./components/panel-header"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
-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"];
+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;
+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 WmPanel = function WmPanel(props) {
   var actions = props.actions,
     _props$badgetype = props.badgetype,
@@ -58,10 +61,10 @@ var WmPanel = function WmPanel(props) {
     onExitfullscreen = props.onExitfullscreen,
     onFullscreen = props.onFullscreen,
     onLoad = props.onLoad,
-    onMouseenter = props.onMouseenter,
-    onMouseleave = props.onMouseleave,
-    onMouseout = props.onMouseout,
-    onMouseover = props.onMouseover,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onMouseOut = props.onMouseOut,
+    onMouseOver = props.onMouseOver,
     onPropertyChange = props.onPropertyChange,
     listener = props.listener,
     Widgets = props.Widgets,
@@ -115,19 +118,19 @@ var WmPanel = function WmPanel(props) {
   };
   var handleMouseEnter = function handleMouseEnter(event) {
     var _listener$Widgets2;
-    onMouseenter === null || onMouseenter === void 0 || onMouseenter(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
   };
   var handleMouseLeave = function handleMouseLeave(event) {
     var _listener$Widgets3;
-    onMouseleave === null || onMouseleave === void 0 || onMouseleave(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
   };
   var handleMouseOver = function handleMouseOver(event) {
     var _listener$Widgets4;
-    onMouseover === null || onMouseover === void 0 || onMouseover(event, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
+    onMouseOver === null || onMouseOver === void 0 || onMouseOver(event, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
   };
   var handleMouseOut = function handleMouseOut(event) {
     var _listener$Widgets5;
-    onMouseout === null || onMouseout === void 0 || onMouseout(event, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
+    onMouseOut === null || onMouseOut === void 0 || onMouseOut(event, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
   };
 
   // onLoad handler
@@ -221,7 +224,9 @@ var WmPanel = function WmPanel(props) {
     onMouseOut: handleMouseOut,
     hidden: !show,
     component: "div"
-  }, componentProps), showHeader && __jsx(_material.Box, {
+  }, componentProps, {
+    style: _objectSpread(_objectSpread({}, props.styles), props.conditionalstyle)
+  }), showHeader && __jsx(_material.Box, {
     className: (0, _clsx["default"])("panel-heading", {
       "show-help": helpVisible
     }),

package/components/container/repeat-template/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _lodashEs = require("lodash-es");
+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;
+var WmRepeatTemplate = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    show = props.show,
+    children = props.children,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return __jsx("div", (0, _extends2["default"])({
+    className: "app-repeat-item",
+    hidden: show
+  }, restProps), children);
+}, function (prev, next) {
+  var keys = ["name", "show", "children", "restProps"];
+  return keys.every(function (key) {
+    return (0, _lodashEs.isEqual)(prev[key], next[key]);
+  });
+});
+WmRepeatTemplate.displayName = "WmRepeatTemplate";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmRepeatTemplate);

package/components/container/tabs/index.js

@@ -18,6 +18,7 @@ var _tabPane = _interopRequireDefault(require("@wavemaker/react-runtime/componen
 var _props = require("./props");
 var _statePersistance = require("@wavemaker/react-runtime/utils/state-persistance");
 var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+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;
 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; }
@@ -63,12 +64,32 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
   var _useState = (0, _react.useState)(defaultpaneindex || 0),
     selectedIndex = _useState[0],
     setSelectedIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(new Set()),
+    hiddenTabNames = _useState2[0],
+    setHiddenTabNames = _useState2[1];
+  // Track which tab indices have been rendered at least once (for dynamic tabs)
+  var _useState3 = (0, _react.useState)(new Set(defaultpaneindex !== undefined ? [defaultpaneindex] : [0])),
+    renderedTabIndices = _useState3[0],
+    setRenderedTabIndices = _useState3[1];
 
   // Keep currentSelectedIndex ref in sync with state
   (0, _react.useEffect)(function () {
     currentSelectedIndex.current = selectedIndex;
   }, [selectedIndex]);
 
+  // Track which tabs have been rendered (for dynamic tabs to maintain state)
+  (0, _react.useEffect)(function () {
+    if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) > 0) {
+      setRenderedTabIndices(function (prev) {
+        var newSet = new Set(prev);
+        if (selectedIndex >= 0 && selectedIndex < dataset.length) {
+          newSet.add(selectedIndex);
+        }
+        return newSet;
+      });
+    }
+  }, [selectedIndex, type, dataset]);
+
   // Helper function to change tab with proper state management
   var changeTab = function changeTab(newIndex) {
     if (newIndex >= 0 && newIndex < panesCount.current && newIndex !== currentSelectedIndex.current) {
@@ -125,11 +146,11 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       return ((_dataset$currentIndex = dataset[currentIndex]) === null || _dataset$currentIndex === void 0 ? void 0 : _dataset$currentIndex.name) || null;
     }
 
-    // For static tabs, get the child at the current index
-    var childrenArray = _react["default"].Children.toArray(children);
-    var activeChild = childrenArray[currentIndex];
+    // For static tabs, compute from visible children
+    var visibleChildren = (0, _utils.filterVisibleChildren)(children, hiddenTabNames);
+    var activeChild = visibleChildren[currentIndex];
     return (activeChild === null || activeChild === void 0 || (_activeChild$props = activeChild.props) === null || _activeChild$props === void 0 ? void 0 : _activeChild$props.name) || null;
-  }, [type, dataset, children]);
+  }, [type, dataset, children, hiddenTabNames]);
 
   // get the active tab widget from listener
   var getActiveTab = _react["default"].useCallback(function () {
@@ -148,6 +169,24 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
         },
         goToTab: function goToTab(tabNumber) {
           _goToTab(tabNumber);
+        },
+        getActiveTabIndex: function getActiveTabIndex() {
+          return currentSelectedIndex.current;
+        },
+        removePane: function removePane(TabName) {
+          (0, _utils.handleRemovePane)({
+            type: type,
+            dataset: dataset,
+            children: children,
+            hiddenTabNames: hiddenTabNames,
+            TabName: TabName,
+            selectedIndex: selectedIndex,
+            currentSelectedIndex: currentSelectedIndex,
+            panesCountRef: panesCount,
+            setHiddenTabNames: setHiddenTabNames,
+            setSelectedIndex: setSelectedIndex,
+            saveStateToStorage: saveStateToStorage
+          });
         }
       });
     }
@@ -198,6 +237,14 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
   // Rendering Helpers
   // ============================================================================
 
+  var handleTabHeaderClick = _react["default"].useCallback(function (e, item, index) {
+    if (item !== null && item !== void 0 && item.disabled) {
+      return;
+    }
+    if (item !== null && item !== void 0 && item.onHeaderclick) {
+      item.onHeaderclick(e, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], index);
+    }
+  }, []);
   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),
@@ -227,7 +274,10 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
           "aria-selected": selectedIndex === index,
           "aria-disabled": item.disabled,
           "aria-hidden": item.show === false,
-          "aria-controls": "tabpanel-".concat(index)
+          "aria-controls": "tabpanel-".concat(index),
+          onClick: function onClick(e) {
+            return handleTabHeaderClick(e, item, index);
+          }
         }, item.paneicon && __jsx("i", {
           className: "app-icon ".concat(item.paneicon)
         }), __jsx(_Typography["default"], {
@@ -271,14 +321,20 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
     return headers;
   }, [dataset, render, renderTabHeader]);
   var renderStaticTabs = _react["default"].useCallback(function () {
-    panesCount.current = _react["default"].Children.count(children);
-    return _react["default"].Children.map(children, function (child, index) {
+    // 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;
       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);
       return __jsx(_react["default"].Fragment, {
         key: index
-      }, renderTabHeader(child.props, index));
+      }, renderTabHeader(itemProps, index));
     });
-  }, [children, renderTabHeader]);
+  }, [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]);
@@ -302,23 +358,32 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
   };
   var renderTabPanels = function renderTabPanels() {
     if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) > 0) {
-      return dataset === null || dataset === void 0 ? void 0 : dataset.map(function (item, index) {
+      // Render all previously visited tabs, but hide inactive ones to maintain state
+      return Array.from(renderedTabIndices).filter(function (index) {
+        return index >= 0 && index < dataset.length;
+      }).map(function (index) {
+        var item = dataset[index];
+        var isActive = selectedIndex === index;
         return __jsx(_react["default"].Fragment, {
           key: index
-        }, render ? render(item, index, dataset) : __jsx(_tabPane["default"], (0, _extends2["default"])({}, item, {
+        }, render ? __jsx(_react["default"].Fragment, null, render(item, index, dataset, isActive)) : __jsx(_tabPane["default"], (0, _extends2["default"])({}, item, {
           key: index,
           value: selectedIndex,
           listener: listener // Pass the updated listener context
           ,
           className: (0, _clsx["default"])("tab-pane", {
-            active: selectedIndex === index,
+            active: isActive,
             disabled: item.disabled,
             hidden: item.show === false
-          })
+          }),
+          index: index
         })));
       });
     }
-    return children;
+
+    // For static tabs, render only visible panes
+    var visibleChildren = (0, _utils.filterVisibleChildren)(children, hiddenTabNames);
+    return visibleChildren;
   };
   if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) <= 0) {
     return __jsx("div", null, nodatamessage);
@@ -373,6 +438,10 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
 }, function (prev, next) {
   var keys = ["dataset", "defaultpaneindex", "justified", "tabsposition", "nodatamessage", "statehandler", "autotabactivation", "transition", "type", "iconposition", "render", "selectedindex", "children"];
   return keys.every(function (key) {
+    // Never deep-compare children; treat as referential bcz the children will have listener props attached cause infinite comparion.
+    if (key === "children") {
+      return prev[key] === next[key];
+    }
     return (0, _isEqual["default"])(prev[key], next[key]);
   });
 });

package/components/container/tabs/tab-pane/index.js

@@ -17,12 +17,13 @@ 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 _clsx;
   var className = props.className,
     disabled = props.disabled,
     renderPartial = props.renderPartial,
     name = props.name,
-    index = props.index;
+    index = props.index,
+    listener = props.listener,
+    item = props.item;
   var _useTabsContext = (0, _.useTabsContext)(),
     selectedIndex = _useTabsContext.selectedIndex,
     setSelectedIndex = _useTabsContext.setSelectedIndex;
@@ -51,28 +52,50 @@ var WmTabpane = exports.WmTabpane = function WmTabpane(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedIndex, name]);
   (0, _react.useEffect)(function () {
-    if (props.listener && props.listener.onChange) {
-      props.listener.onChange(name, {
+    if (listener && listener.onChange) {
+      listener.onChange(name, {
         select: function select() {
           return setSelectedIndex(index);
+        },
+        isActive: selectedIndex === index,
+        deselect: function deselect() {
+          return setSelectedIndex(-1);
         }
       });
     }
-  }, []);
-  return __jsx(_tabs.Tabs.Panel, {
+  }, [selectedIndex]);
+  var isDisabled = (0, _react.useMemo)(function () {
+    return item === undefined ? false : Boolean(item === null || item === void 0 ? void 0 : item.disabled);
+  }, [item]);
+  var isHidden = (0, _react.useMemo)(function () {
+    return item === undefined ? false : (item === null || item === void 0 ? void 0 : item.show) === false;
+  }, [item]);
+  return __jsx("div", {
+    style: {
+      display: selectedIndex === index ? "block" : "none"
+    },
+    className: (0, _clsx2["default"])("tab-pane", {
+      active: selectedIndex === index,
+      disabled: isDisabled,
+      hidden: isHidden
+    })
+  }, __jsx(_tabs.Tabs.Panel, {
     value: index,
-    className: (0, _clsx2["default"])("tab-pane", (_clsx = {
+    keepMounted: true,
+    className: (0, _clsx2["default"])("tab-pane", (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
       disabled: disabled
-    }, (0, _defineProperty2["default"])(_clsx, className, !!className), (0, _defineProperty2["default"])(_clsx, "active", selectedIndex === index), _clsx)),
+    }, className, !!className), "active", selectedIndex === index)),
     role: "tabpanel",
     style: _objectSpread({
       width: "100%"
     }, props === null || props === void 0 ? void 0 : props.styles),
-    "data-pane-name": name
+    "data-pane-name": name,
+    title: props === null || props === void 0 ? void 0 : props.title,
+    name: name
   }, __jsx("div", {
     className: "tab-body",
     "data-widget-id": props["data-widget-id"]
-  }, renderPartial ? renderPartial(props, props.onLoad) : props.children));
+  }, renderPartial ? renderPartial(props, props.onLoad) : props.children)));
 };
 WmTabpane.displayName = "WmTabpane";
 var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmTabpane);

package/components/container/tabs/utils.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleRemovePane = exports.filterVisibleChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var filterVisibleChildren = exports.filterVisibleChildren = function filterVisibleChildren(children, hiddenTabNames) {
+  return _react["default"].Children.toArray(children).filter(function (c) {
+    var _c$props;
+    var nm = c === null || c === void 0 || (_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.name;
+    var isHidden = nm ? hiddenTabNames.has(nm) : false;
+    return c && c.props && c.props.show !== false && !isHidden;
+  });
+};
+var handleRemovePane = exports.handleRemovePane = function handleRemovePane(_ref) {
+  var _visibleBefore$select;
+  var type = _ref.type,
+    dataset = _ref.dataset,
+    children = _ref.children,
+    hiddenTabNames = _ref.hiddenTabNames,
+    TabName = _ref.TabName,
+    selectedIndex = _ref.selectedIndex,
+    currentSelectedIndex = _ref.currentSelectedIndex,
+    panesCountRef = _ref.panesCountRef,
+    setHiddenTabNames = _ref.setHiddenTabNames,
+    setSelectedIndex = _ref.setSelectedIndex,
+    saveStateToStorage = _ref.saveStateToStorage;
+  // Dynamic mode: mutate dataset
+  if (type === "dynamic" && dataset) {
+    return;
+  }
+
+  // Static mode: mark hidden in internal state and adjust selection if needed
+  var visibleBefore = filterVisibleChildren(children, hiddenTabNames);
+  var activeName = (_visibleBefore$select = visibleBefore[selectedIndex]) === null || _visibleBefore$select === void 0 || (_visibleBefore$select = _visibleBefore$select.props) === null || _visibleBefore$select === void 0 ? void 0 : _visibleBefore$select.name;
+  setHiddenTabNames(function (prev) {
+    var next = new Set(prev);
+    next.add(TabName);
+    return next;
+  });
+  if (activeName === TabName) {
+    var newIndex = Math.max(0, currentSelectedIndex.current - 1);
+    currentSelectedIndex.current = newIndex;
+    setSelectedIndex(newIndex);
+    saveStateToStorage(newIndex);
+  } else {
+    setSelectedIndex(currentSelectedIndex.current);
+  }
+};

package/components/container/wizard/components/StepComponents.js

@@ -91,7 +91,8 @@ var CustomStepLabel = exports.CustomStepLabel = /*#__PURE__*/(0, _react.memo)(fu
   }, step.title)), step.subtitle && __jsx(_material.Typography, {
     component: "span",
     className: "subtitle-wrapper",
-    variant: "caption"
+    variant: "caption",
+    title: step.subtitle
   }, __jsx(_material.Box, {
     component: "span",
     className: "step-title"