@wavemaker/react-runtime 11.14.3-rc.6401 → 11.14.4-rc.647538

package/actions/navigation-action.js

@@ -120,12 +120,10 @@ var NavigationAction = exports.NavigationAction = /*#__PURE__*/function (_BaseAc
         var cleanPageName = pageName.replace(/^\//, "");
 
         // Prepare query params if any exist
-        // Filter out undefined/null values
         var queryParams = Object.entries(params).filter(function (_ref) {
-          var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
-            key = _ref2[0],
-            value = _ref2[1];
-          return key !== "pageName" && value !== undefined && value !== null && value !== "";
+          var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
+            key = _ref2[0];
+          return key !== "pageName";
         }).map(function (_ref3) {
           var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
             key = _ref4[0],

package/actions/notification-action.js

@@ -37,18 +37,15 @@ var NotificationAction = exports.NotificationAction = /*#__PURE__*/function (_Ba
   (0, _createClass2["default"])(NotificationAction, [{
     key: "prepareToastOptions",
     value: function prepareToastOptions() {
-      var _String$toLowerCase,
-        _String,
-        _mergedParams$toaster,
-        _this = this;
+      var _this = this;
       var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var configParams = this.config.paramProvider();
       var mergedParams = _objectSpread(_objectSpread({}, configParams), params);
-      var alertClass = (_String$toLowerCase = (_String = String(mergedParams["class"])) === null || _String === void 0 ? void 0 : _String.toLowerCase()) !== null && _String$toLowerCase !== void 0 ? _String$toLowerCase : "info";
+      var alertClass = (mergedParams["class"] || "info").toLowerCase();
       var type = NOTIFICATION_TYPE[alertClass] || "info";
 
       // get toast position
-      var position = (_mergedParams$toaster = mergedParams.toasterPosition) !== null && _mergedParams$toaster !== void 0 ? _mergedParams$toaster : "top right";
+      var position = mergedParams.toasterPosition || "top right";
 
       // Determine duration (0 means stay until dismissed)
       var duration = parseInt(String(mergedParams.duration));

package/components/basic/anchor/index.js

@@ -17,8 +17,8 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Link = _interopRequireDefault(require("@mui/material/Link"));
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
-var _utils = require("../../../core/util/utils");
-var _excluded = ["caption", "iconclass", "styles", "className", "iconheight", "iconwidth", "iconmargin", "iconurl", "iconposition", "badgevalue", "listener", "hyperlink", "encodeurl", "onClick", "shortcutkey", "arialabel", "target", "itemLink"];
+var _navigation = require("next/navigation");
+var _excluded = ["caption", "iconclass", "styles", "className", "iconheight", "iconwidth", "iconmargin", "iconurl", "iconposition", "badgevalue", "listener", "hyperlink", "encodeurl", "onClick", "shortcutkey", "arialabel", "target"];
 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; }
@@ -51,9 +51,8 @@ var WmAnchor = exports.WmAnchor = function WmAnchor(props) {
     shortcutkey = props.shortcutkey,
     arialabel = props.arialabel,
     target = props.target,
-    itemLink = props.itemLink,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var path = (0, _utils.getCurrentPath)();
+  var path = (0, _navigation.usePathname)();
   var _useState = (0, _react.useState)(false),
     isActive = _useState[0],
     setIsActive = _useState[1];
@@ -114,10 +113,12 @@ var WmAnchor = exports.WmAnchor = function WmAnchor(props) {
 
   // Determine active state
   (0, _react.useEffect)(function () {
+    var lastSegment = path.split("/").pop();
+    var activeByCaptionMatch = caption && lastSegment && lastSegment.toLowerCase() === String(caption).toLowerCase();
     var activeByHyperlink = doesHyperlinkMatchCurrentPath;
     var activeByNavigationExpr = navigationInfo.isCurrentPage;
-    setIsActive(activeByHyperlink || activeByNavigationExpr);
-  }, [caption, path, doesHyperlinkMatchCurrentPath, navigationInfo.isCurrentPage, itemLink]);
+    setIsActive(activeByCaptionMatch || activeByHyperlink || activeByNavigationExpr);
+  }, [caption, path, doesHyperlinkMatchCurrentPath, navigationInfo.isCurrentPage]);
 
   // Calculate icon position styles
   var iconPositionStyles = (0, _react.useMemo)(function () {

package/components/basic/label/index.js

@@ -59,7 +59,7 @@ var parseCaption = function parseCaption(caption) {
   return parts;
 };
 var WmLabel = exports.WmLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _ref, _JSON$stringify;
+  var _JSON$stringify;
   var _props$required = props.required,
     required = _props$required === void 0 ? false : _props$required,
     _props$trustAs = props.trustAs,
@@ -77,7 +77,7 @@ var WmLabel = exports.WmLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
   var ownerState = {
     type: type
   };
-  var captionString = (_ref = typeof caption === "string" ? caption : (_JSON$stringify = JSON.stringify(caption)) !== null && _JSON$stringify !== void 0 ? _JSON$stringify : "") === null || _ref === void 0 ? void 0 : _ref.replace(/ |undefined|null/gi, " ");
+  var captionString = typeof caption === "string" ? caption : (_JSON$stringify = JSON.stringify(caption)) !== null && _JSON$stringify !== void 0 ? _JSON$stringify : "";
 
   // Check if caption contains HTML tags
   var hasHTML = containsHTML(captionString);

package/components/basic/search/index.js

@@ -31,7 +31,6 @@ var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/
 var _lodash = require("lodash");
 var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
 var _providers = require("./providers");
-var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
 var _excluded = ["showclear", "debouncetime", "searchkey", "searchon", "matchmode", "minchars", "limit", "tabindex", "placeholder", "dropup", "readonly", "datavalue", "dataset", "datafield", "displayfield", "disabled", "autofocus", "type", "showsearchicon", "showbackbutton", "imagewidth", "width", "displaylabel", "displayimagesrc", "displayexpression", "datacompletemsg", "loadingdatamsg", "clearsearchiconclass", "backsearchiconclass", "searchiconclass", "navsearchbar", "class", "shortcutkey", "required", "hint", "arialabel", "onBeforeservicecall", "onBlur", "onChange", "onFocus", "onSelect", "onSubmit", "onClear", "onSearch", "onDatasetready", "conditionalstyles", "styles", "name", "listener", "value", "datasetItems", "selectedItems", "displayValue", "groupedData", "handleHeaderClick", "toggleAllHeaders", "isDestroyed", "validation", "casesensitive", "isUpdateRequired", "onQuerySearch"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
@@ -217,7 +216,7 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     if (type === "autocomplete") {
       getDataSource("");
     }
-  }, [type]);
+  }, [dataset, type]);
 
   // Update listen query state when type changes
   (0, _react.useEffect)(function () {
@@ -620,10 +619,7 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       setMenuOpen(false);
       setSelectedItem(item); // Set the selected item
       setFormattedDataset([]); // Clear the dropdown dataset
-      if (onChange && listener !== null && listener !== void 0 && listener.Widgets && name && name in (listener === null || listener === void 0 ? void 0 : listener.Widgets)) {
-        var _item$dataObject, _item$dataObject2;
-        onChange(undefined, listener.Widgets[name], (_item$dataObject = item.dataObject) === null || _item$dataObject === void 0 ? void 0 : _item$dataObject.value, (_item$dataObject2 = item.dataObject) === null || _item$dataObject2 === void 0 ? void 0 : _item$dataObject2.value);
-      }
+
       if (listener !== null && listener !== void 0 && listener.onChange) {
         listener.onChange(name, {
           datavalue: item.dataObject.value
@@ -1024,4 +1020,4 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, "Clear button"), showclear && showclear !== "false" ? renderClearButton() : null, renderDropdown()));
 });
 Search.displayName = "WmSearch";
-var _default = exports["default"] = (0, _withFormController["default"])((0, _withBaseWrapper["default"])(Search));
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(Search);

package/components/chart/components/barColumnChart/index.js

@@ -40,8 +40,7 @@ var BarColumnChart = exports.BarColumnChart = /*#__PURE__*/(0, _react.memo)(func
     legendtype = _ref.legendtype,
     availableRegions = _ref.availableRegions,
     _ref$viewtype = _ref.viewtype,
-    viewtype = _ref$viewtype === void 0 ? "Grouped" : _ref$viewtype,
-    shouldShowLegend = _ref.shouldShowLegend;
+    viewtype = _ref$viewtype === void 0 ? "Grouped" : _ref$viewtype;
   var isBarChart = type === "Bar"; // Bar = horizontal bars, Column = vertical bars
   var isStacked = viewtype === "Stacked";
   var formatValue = (0, _react.useCallback)(function (label) {
@@ -50,6 +49,9 @@ var BarColumnChart = exports.BarColumnChart = /*#__PURE__*/(0, _react.memo)(func
     }
     return String(label);
   }, [numberFormat]);
+  var shouldShowLegend = (0, _react.useMemo)(function () {
+    return (0, _utils.isShowLegend)(showlegend);
+  }, [showlegend]);
   return __jsx(_recharts.ResponsiveContainer, {
     width: "100%",
     height: "100%"

package/components/chart/components/pieDonutChart/index.js

@@ -113,11 +113,9 @@ var PieDonutChart = exports.PieDonutChart = function PieDonutChart(_ref2) {
     nameKey: "name",
     cx: "50%",
     cy: "50%",
-    innerRadius: type === "Donut" ? "".concat(Math.round((0, _utils.normalizeDonutRatio)(donutratio) * 100), "%") : 0,
+    innerRadius: type === "Donut" ? "".concat(donutratio !== null && donutratio !== void 0 ? donutratio : "60", "%") : 0,
     outerRadius: "80%",
     paddingAngle: 2,
-    startAngle: 90,
-    endAngle: -270,
     onClick: function onClick(data, index, event) {
       return onChartClick(data, index, event);
     },

package/components/chart/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -23,15 +23,12 @@ var _lineAreaChart = require("./components/lineAreaChart");
 var _bubbleChart = require("./components/bubbleChart");
 var _cumulativeLineChart = require("./components/cumulativeLineChart");
 var _pieDonutChart = require("./components/pieDonutChart");
-var _useXAxisConfig = require("./hooks/useXAxisConfig");
-var _useBarYAxisExtras = require("./hooks/useBarYAxisExtras");
 var _excluded = ["title", "type", "subheading", "datavalue", "groupby", "aggregation", "aggregationcolumn", "orderby", "xaxisdatakey", "xaxislabel", "xnumberformat", "xdigits", "xdateformat", "xaxislabeldistance", "xunits", "yaxisdatakey", "yaxislabel", "ynumberformat", "ydigits", "yaxislabeldistance", "yunits", "iconclass", "nodatamessage", "loadingdatamsg", "tooltips", "showlegend", "showlabelsoutside", "showvalues", "staggerlabels", "reducexticks", "showlabels", "labeltype", "barspacing", "donutratio", "bubblesize", "showxdistance", "showydistance", "areaviewtype", "interpolation", "centerlabel", "customcolors", "theme", "offset", "offsettop", "offsetbottom", "offsetright", "offsetleft", "showxaxis", "showyaxis", "linethickness", "highlightpoints", "formattype", "dataset", "datasource", "width", "height", "shape", "onSelect", "onTransform", "onBeforerender", "xdomain", "ydomain", "labelthreshold", "legendtype", "viewtype", "fontsize", "fontunit", "color", "fontfamily", "fontweight", "fontstyle", "textdecoration", "className", "show", "styles", "name"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
 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 WmChart = function WmChart(props) {
-  var _chartContainerRef$cu, _ref, _width, _height;
   var title = props.title,
     _props$type = props.type,
     type = _props$type === void 0 ? "Column" : _props$type,
@@ -81,7 +78,7 @@ var WmChart = function WmChart(props) {
     _props$barspacing = props.barspacing,
     barspacing = _props$barspacing === void 0 ? "medium" : _props$barspacing,
     _props$donutratio = props.donutratio,
-    donutratio = _props$donutratio === void 0 ? "small" : _props$donutratio,
+    donutratio = _props$donutratio === void 0 ? "medium" : _props$donutratio,
     bubblesize = props.bubblesize,
     _props$showxdistance = props.showxdistance,
     showxdistance = _props$showxdistance === void 0 ? false : _props$showxdistance,
@@ -600,26 +597,6 @@ var WmChart = function WmChart(props) {
     }
   }, [getAvailableRegions, availableRegions]);
 
-  // Transform object with labels/values arrays to array of objects format
-  var transformObjectToArray = (0, _react.useCallback)(function (data, xKey, yKey) {
-    // Check if data is an object with arrays (like {labels: [...], values: [...]})
-    if (!(0, _lodash.isArray)(data) && (0, _lodash.isObject)(data)) {
-      var dataObj = data;
-      if (dataObj[xKey] && dataObj[yKey] && (0, _lodash.isArray)(dataObj[xKey]) && (0, _lodash.isArray)(dataObj[yKey])) {
-        var xArray = dataObj[xKey];
-        var yArray = dataObj[yKey];
-        // Transform to array of objects: [{labels: '2025-W43', values: 13.97}, ...]
-        return xArray.map(function (xVal, index) {
-          var result = {};
-          result[xKey] = xVal;
-          result[yKey] = yArray[index];
-          return result;
-        });
-      }
-    }
-    return data;
-  }, []);
-
   // Single effect to handle all data processing
   (0, _react.useEffect)(function () {
     var data = [];
@@ -640,15 +617,8 @@ var WmChart = function WmChart(props) {
       });
       setXDataKeyArr(dd.flat());
     } else if (dataset) {
-      var _yaxisdatakey$split$;
-      // Transform object format to array format if needed
-      // Check if dataset is an object with arrays matching xaxisdatakey and yaxisdatakey
-      var xKey = xaxisdatakey || "labels";
-      var yKey = (yaxisdatakey === null || yaxisdatakey === void 0 || (_yaxisdatakey$split$ = yaxisdatakey.split(",")[0]) === null || _yaxisdatakey$split$ === void 0 ? void 0 : _yaxisdatakey$split$.trim()) || "values";
-      var transformedDataset = transformObjectToArray(dataset, xKey, yKey);
-
       // Use real dataset
-      var processedDataset = (0, _lodash.isArray)(transformedDataset) ? transformedDataset : [transformedDataset];
+      var processedDataset = (0, _lodash.isArray)(dataset) ? dataset : [dataset];
       setChartData(processedDataset);
       if (processedDataset.length > 0) {
         data = processChartData(processedDataset);
@@ -658,7 +628,7 @@ var WmChart = function WmChart(props) {
       setupRegions(data);
       setProcessedData(processDataWithFilters(data));
     }
-  }, [binddataset, dataset, type, xaxisdatakey, yaxisdatakey, shape, processDataWithFilters, setupRegions, transformObjectToArray]);
+  }, [binddataset, dataset, type, yaxisdatakey, shape, processDataWithFilters, setupRegions]);
 
   // Handle chart data updates - only when NOT using onTransform
   (0, _react.useEffect)(function () {
@@ -707,34 +677,37 @@ var WmChart = function WmChart(props) {
     setSelectedItem(dataObj);
     onSelect === null || onSelect === void 0 || onSelect(event, props, dataObj, selectedChartItem);
   }, [onSelect, props]);
-
-  // For Bar charts the categorical axis is Y; reduce label crowding and add ellipsis + tooltip
-  var barYAxisExtras = (0, _useBarYAxisExtras.useBarYAxisExtras)({
-    type: type,
-    chartWidth: (_chartContainerRef$cu = chartContainerRef.current) === null || _chartContainerRef$cu === void 0 ? void 0 : _chartContainerRef$cu.offsetWidth
-  });
-
-  // For Bar charts, categorical axis is Y and numeric axis is X. Align visibility with Angular semantics.
-  var xAxisShow = (0, _react.useMemo)(function () {
-    return type === "Bar" ? showyaxis : showxaxis;
-  }, [type, showyaxis, showxaxis]);
-  var yAxisShow = (0, _react.useMemo)(function () {
-    return type === "Bar" ? showxaxis : showyaxis;
-  }, [type, showxaxis, showyaxis]);
-  var getXAxisConfig = (0, _useXAxisConfig.useXAxisConfig)({
-    type: type,
-    processedData: processedData,
-    xDataKeyArr: xDataKeyArr,
-    chartContainerRef: chartContainerRef,
-    getDefaultXAxisLabel: getDefaultXAxisLabel,
-    xnumberformat: xnumberformat,
-    showxaxis: xAxisShow,
-    xaxislabeldistance: xaxislabeldistance
-  });
+  var getXAxisConfig = (0, _react.useMemo)(function () {
+    return {
+      hide: !showxaxis,
+      label: {
+        value: getDefaultXAxisLabel(),
+        position: "insideBottom",
+        offset: xaxislabeldistance,
+        fill: "#000"
+      },
+      tick: {
+        fontSize: 12,
+        fontFamily: "inherit",
+        fill: "currentColor"
+      },
+      tickFormatter: xnumberformat ? function (value) {
+        return (0, _utils.formatNumber)(value, xnumberformat);
+      } : function (value, index) {
+        // BUG FIX 2 & 8: Show actual values instead of indices
+        if (xDataKeyArr.length > 0 && index !== undefined && xDataKeyArr[index] !== undefined) {
+          return xDataKeyArr[index];
+        }
+        // console.log('value line 721', value);
+        return value;
+      }
+    };
+  }, [showxaxis, getDefaultXAxisLabel, xnumberformat, xDataKeyArr]);
   var getYAxisConfig = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({
-      hide: !yAxisShow,
+    return {
+      hide: !showyaxis,
       label: {
+        value: (0, _utils.truncateText)(getDefaultYAxisLabel(), 20),
         angle: -90,
         position: "insideLeft",
         offset: yaxislabeldistance,
@@ -747,16 +720,15 @@ var WmChart = function WmChart(props) {
         fontSize: 12,
         fontFamily: "inherit",
         fill: "currentColor"
-      }
-    }, barYAxisExtras), {}, {
+      },
       tickFormatter: function tickFormatter(value, index) {
         if (typeof value === "number") {
           return (0, _utils.formatNumber)(value, ynumberformat);
         }
         return value;
       }
-    });
-  }, [yAxisShow, getDefaultYAxisLabel, ynumberformat, yaxislabeldistance, processedData]);
+    };
+  }, [showyaxis, getDefaultYAxisLabel, ynumberformat, yaxislabeldistance]);
   var handleRegionChange = (0, _react.useCallback)(function (region) {
     var isDoubleClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     setSelectedRegions(function (prev) {
@@ -853,8 +825,7 @@ var WmChart = function WmChart(props) {
       case "Bar":
         return __jsx(_barColumnChart.BarColumnChart, (0, _extends2["default"])({}, commonProps, {
           type: "Bar",
-          viewtype: viewtype,
-          shouldShowLegend: shouldShowLegend
+          viewtype: viewtype
         }));
       case "Line":
         return __jsx(_lineAreaChart.LineAreaChart, (0, _extends2["default"])({}, commonProps, {
@@ -889,8 +860,7 @@ var WmChart = function WmChart(props) {
           onChartClick: handleChartClick,
           onLegendClick: handleLegendClick,
           showLegend: shouldShowLegend,
-          centerlabel: centerlabel,
-          donutratio: donutratio
+          centerlabel: centerlabel
         }));
       case "Bubble":
         return __jsx(_bubbleChart.BubbleChart, (0, _extends2["default"])({}, commonProps, {
@@ -915,10 +885,7 @@ var WmChart = function WmChart(props) {
   return __jsx(_material.Box, {
     component: "div",
     className: "app-chart ".concat(className || "", " ").concat(title ? "panel" : ""),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styles), fontStyles), {}, {
-      width: (_ref = (_width = styles === null || styles === void 0 ? void 0 : styles.width) !== null && _width !== void 0 ? _width : width) !== null && _ref !== void 0 ? _ref : height,
-      height: (_height = styles === null || styles === void 0 ? void 0 : styles.height) !== null && _height !== void 0 ? _height : height
-    }),
+    style: _objectSpread(_objectSpread({}, styles), fontStyles),
     ref: chartContainerRef,
     id: "wmChart-".concat(type),
     name: name

package/components/chart/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.truncateText = exports.triggerFn = exports.prettifyLabels = exports.normalizeDonutRatio = exports.isShowLegend = exports.isPieType = exports.isPieChart = exports.isNumberType = exports.isLineTypeChart = exports.isLineChart = exports.isEmptyObject = exports.isDonutChart = exports.isCumulativeLineChart = exports.isColumnChart = exports.isChartDataJSON = exports.isChartDataArray = exports.isBubbleChart = exports.isBarChart = exports.isAxisDomainSupported = exports.isAreaChart = exports.getSampleData = exports.getRadiusValue = exports.getNumberFormatedData = exports.getLodashOrderByFormat = exports.getLegendPopupStyle = exports.getDateList = exports.getDateFormatedData = exports.getBarSpacingValue = exports.formatNumber = exports.convertToRechartsFormat = exports.allShapes = exports.SAMPLE_DATA = exports.NONE = void 0;
+exports.truncateText = exports.triggerFn = exports.prettifyLabels = exports.isShowLegend = exports.isPieType = exports.isPieChart = exports.isNumberType = exports.isLineTypeChart = exports.isLineChart = exports.isEmptyObject = exports.isDonutChart = exports.isCumulativeLineChart = exports.isColumnChart = exports.isChartDataJSON = exports.isChartDataArray = exports.isBubbleChart = exports.isBarChart = exports.isAxisDomainSupported = exports.isAreaChart = exports.getSampleData = exports.getRadiusValue = exports.getNumberFormatedData = exports.getLodashOrderByFormat = exports.getLegendPopupStyle = exports.getDateList = exports.getDateFormatedData = exports.getBarSpacingValue = exports.formatNumber = exports.convertToRechartsFormat = exports.allShapes = exports.SAMPLE_DATA = exports.NONE = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _forEach = _interopRequireDefault(require("lodash-es/forEach"));
@@ -557,8 +557,17 @@ var convertToRechartsFormat = exports.convertToRechartsFormat = function convert
       }
     });
 
-    // Create data points for each x value in the preserved order
-    Array.from(xValuesSet).forEach(function (x) {
+    // Sort x values
+    var sortedXValues = Array.from(xValuesSet).sort(function (a, b) {
+      // Handle different data types for sorting
+      if (typeof a === "number" && typeof b === "number") {
+        return a - b;
+      }
+      return String(a).localeCompare(String(b));
+    });
+
+    // Create data points for each x value
+    sortedXValues.forEach(function (x) {
       var resultPoint = {
         x: x
       };
@@ -679,24 +688,4 @@ var truncateText = exports.truncateText = function truncateText(text) {
   var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;
   if (text.length <= maxLength) return text;
   return text.substring(0, maxLength) + "...";
-};
-
-// Normalize donut ratio from various inputs to a numeric ratio (0-1)
-var normalizeDonutRatio = exports.normalizeDonutRatio = function normalizeDonutRatio(value) {
-  var fallback = 0.6;
-  if (value === undefined || value === null) {
-    return fallback;
-  }
-  if (typeof value === "number") {
-    return value > 1 ? value / 100 : value;
-  }
-  var val = String(value).toLowerCase().trim();
-  if (val === "small") return 0.3;
-  if (val === "medium") return 0.6;
-  if (val === "large") return 0.7;
-  var parsed = parseFloat(val);
-  if (!isNaN(parsed)) {
-    return parsed > 1 ? parsed / 100 : parsed;
-  }
-  return fallback;
 };

package/components/container/index.js

@@ -156,15 +156,15 @@ var WmContainer = exports.WmContainer = function WmContainer(props) {
   var computedStyles = (0, _react.useMemo)(function () {
     var base = alignment && alignmentMatrix[alignment];
     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: display
+      });
     }
     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"])({
+    return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styles), customStyles), alignmentStyles), spacingStyles), {}, {
       display: display || "flex"
-    }, "flex-flow", direction || "row"));
+    });
   }, [styles, customStyles, alignment, direction, wrap, gap, columngap, display]);
   (0, _react.useEffect)(function () {
     if (props !== null && props !== void 0 && props.onLoad && !isLoaded.current) {
@@ -180,7 +180,8 @@ var WmContainer = exports.WmContainer = function WmContainer(props) {
     id: id,
     hidden: props.hidden
   }, domEvents, {
-    name: props.name
+    name: props.name,
+    hidden: props.hidden
   }), renderPartial ? renderPartial(props, props.onLoad) : children);
 };
 WmContainer.displayName = "WmContainer";

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

@@ -17,7 +17,6 @@ var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutli
 var _menu = _interopRequireDefault(require("@wavemaker/react-runtime/components/navigation/menu"));
 var __jsx = _react["default"].createElement; // Icons
 var PanelHeader = function PanelHeader(_ref) {
-  var _listener$appLocale$L, _listener$appLocale, _listener$appLocale$L2, _listener$appLocale2;
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Title" : _ref$title,
     subheading = _ref.subheading,
@@ -125,9 +124,9 @@ var PanelHeader = function PanelHeader(_ref) {
   }) : __jsx(_ExpandMore["default"], {
     className: "wi-plus"
   })), enablefullscreen && __jsx(_material.IconButton, {
-    "aria-label": "Fullscreen/Exit",
+    "aria-label": isFullscreen ? "Exit Fullscreen" : "Fullscreen",
     className: "app-icon panel-action wi",
-    title: "".concat((_listener$appLocale$L = listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_FULLSCREEN) !== null && _listener$appLocale$L !== void 0 ? _listener$appLocale$L : "Fullscreen", "/").concat((_listener$appLocale$L2 = listener === null || listener === void 0 || (_listener$appLocale2 = listener.appLocale) === null || _listener$appLocale2 === void 0 ? void 0 : _listener$appLocale2.LABEL_EXITFULLSCREEN) !== null && _listener$appLocale$L2 !== void 0 ? _listener$appLocale$L2 : "Exit Fullscreen"),
+    title: isFullscreen ? "Exit Fullscreen" : "Fullscreen",
     onClick: onToggleFullScreen
   }, isFullscreen ? __jsx(_FullscreenExit["default"], {
     className: "wi-fullscreen-exit"

package/components/container/panel/index.js

@@ -35,13 +35,15 @@ var WmPanel = function WmPanel(props) {
     fullscreen = _props$fullscreen === void 0 ? false : _props$fullscreen,
     helptext = props.helptext,
     hint = props.hint,
-    iconclass = props.iconclass,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? "wi wi-account-circle" : _props$iconclass,
     iconheight = props.iconheight,
     iconmargin = props.iconmargin,
     iconurl = props.iconurl,
     iconwidth = props.iconwidth,
     subheading = props.subheading,
-    title = props.title,
+    _props$title = props.title,
+    title = _props$title === void 0 ? "Title" : _props$title,
     className = props.className,
     style = props.style,
     children = props.children,
@@ -75,7 +77,6 @@ var WmPanel = function WmPanel(props) {
   var _useState2 = (0, _react.useState)(true),
     show = _useState2[0],
     setShow = _useState2[1];
-  var hasTriggeredOnLoadRef = (0, _react.useRef)(false);
 
   //   Manages expand/collapse state
   var _usePanelExpansion = (0, _hooks.usePanelExpansion)(expanded, onExpand, onCollapse, name, listener),
@@ -133,10 +134,8 @@ var WmPanel = function WmPanel(props) {
   // onLoad handler
   (0, _react.useEffect)(function () {
     var _listener$Widgets6;
-    if (hasTriggeredOnLoadRef.current || !isExpanded) return;
-    hasTriggeredOnLoadRef.current = true;
     onLoad === null || onLoad === void 0 || onLoad(listener === null || listener === void 0 || (_listener$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6[name]);
-  }, [isExpanded]);
+  }, []);
   (0, _react.useEffect)(function () {
     if (isExpanded) {
       computeDimensions();
@@ -157,7 +156,6 @@ var WmPanel = function WmPanel(props) {
       };
     }
   }, [closable]);
-  var showHeader = Boolean(iconurl || iconclass || collapsible || actions && (Array.isArray(actions) ? actions.length > 0 : true) || title || subheading || enablefullscreen);
 
   // Panel methods exposed via listener
   var collapse = function collapse() {
@@ -221,7 +219,7 @@ var WmPanel = function WmPanel(props) {
     onMouseOut: handleMouseOut,
     hidden: !show,
     component: "div"
-  }, componentProps), showHeader && __jsx(_material.Box, {
+  }, componentProps), __jsx(_material.Box, {
     className: (0, _clsx["default"])("panel-heading", {
       "show-help": helpVisible
     }),
@@ -253,8 +251,7 @@ var WmPanel = function WmPanel(props) {
     onToggleHelp: toggleHelp,
     onClose: handleClose,
     onActionsclick: onActionsclick
-  })), __jsx(_material.Box, {
-    hidden: !isExpanded,
+  })), isExpanded && __jsx(_material.Box, {
     className: "panel-content",
     ref: panelContentRef
   }, __jsx(_material.Box, {
@@ -279,10 +276,9 @@ var WmPanel = function WmPanel(props) {
 var WmPanelFooter = exports.WmPanelFooter = function WmPanelFooter(_ref) {
   var children = _ref.children,
     name = _ref.name;
-  return __jsx("div", {
+  return __jsx(_material.Box, {
     className: "app-panel-footer panel-footer clearfix",
-    "aria-label": name,
-    name: name
+    "aria-label": name
   }, children);
 };
 WmPanelFooter.displayName = "WmPanelFooter";

package/components/container/tabs/index.js

@@ -333,7 +333,6 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       display: "flex",
       flexDirection: getFlexDirection()
     }),
-    name: name,
     value: selectedIndex,
     onValueChange: function onValueChange(value) {
       var newIndex = value;

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

@@ -1,18 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WmTabpane = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _clsx2 = _interopRequireDefault(require("clsx"));
 var _tabs = require("@base-ui-components/react/tabs");
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _ = require("..");
-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; }
@@ -24,44 +22,10 @@ var WmTabpane = exports.WmTabpane = function WmTabpane(props) {
     name = props.name,
     index = props.index;
   var _useTabsContext = (0, _.useTabsContext)(),
-    selectedIndex = _useTabsContext.selectedIndex,
-    setSelectedIndex = _useTabsContext.setSelectedIndex;
-  var wasActiveRef = _react["default"].useRef(false);
-  var loadedRef = _react["default"].useRef(false);
-  (0, _react.useEffect)(function () {
-    var _props$listener;
-    var isActive = selectedIndex === index;
-    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];
-    if (isActive) {
-      if (!loadedRef.current) {
-        var _props$onLoad;
-        props === null || props === void 0 || (_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 || _props$onLoad.call(props, null, widgetInstance);
-        loadedRef.current = true;
-      }
-      if (!wasActiveRef.current) {
-        var _props$onSelect;
-        props === null || props === void 0 || (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, null, widgetInstance, index);
-        wasActiveRef.current = true;
-      }
-    } else if (wasActiveRef.current) {
-      var _props$onDeselect;
-      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]);
-  (0, _react.useEffect)(function () {
-    if (props.listener && props.listener.onChange) {
-      props.listener.onChange(name, {
-        select: function select() {
-          return setSelectedIndex(index);
-        }
-      });
-    }
-  }, []);
+    selectedIndex = _useTabsContext.selectedIndex;
   return __jsx(_tabs.Tabs.Panel, {
     value: index,
-    className: (0, _clsx2["default"])("tab-pane", (_clsx = {
+    className: (0, _clsx2["default"])((_clsx = {
       disabled: disabled
     }, (0, _defineProperty2["default"])(_clsx, className, !!className), (0, _defineProperty2["default"])(_clsx, "active", selectedIndex === index), _clsx)),
     role: "tabpanel",