@wavemaker/react-runtime 11.14.1-rc.240 → 11.14.2-rc.6311

package/actions/navigation-action.js

@@ -120,10 +120,12 @@ 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, 1),
-            key = _ref2[0];
-          return key !== "pageName";
+          var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+            key = _ref2[0],
+            value = _ref2[1];
+          return key !== "pageName" && value !== undefined && value !== null && value !== "";
         }).map(function (_ref3) {
           var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
             key = _ref4[0],

package/actions/notification-action.js

@@ -37,15 +37,18 @@ var NotificationAction = exports.NotificationAction = /*#__PURE__*/function (_Ba
   (0, _createClass2["default"])(NotificationAction, [{
     key: "prepareToastOptions",
     value: function prepareToastOptions() {
-      var _this = this;
+      var _String$toLowerCase,
+        _String,
+        _mergedParams$toaster,
+        _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 = (mergedParams["class"] || "info").toLowerCase();
+      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 type = NOTIFICATION_TYPE[alertClass] || "info";
 
       // get toast position
-      var position = mergedParams.toasterPosition || "top right";
+      var position = (_mergedParams$toaster = mergedParams.toasterPosition) !== null && _mergedParams$toaster !== void 0 ? _mergedParams$toaster : "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 _navigation = require("next/navigation");
-var _excluded = ["caption", "iconclass", "styles", "className", "iconheight", "iconwidth", "iconmargin", "iconurl", "iconposition", "badgevalue", "listener", "hyperlink", "encodeurl", "onClick", "shortcutkey", "arialabel", "target"];
+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"];
 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,8 +51,9 @@ 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, _navigation.usePathname)();
+  var path = (0, _utils.getCurrentPath)();
   var _useState = (0, _react.useState)(false),
     isActive = _useState[0],
     setIsActive = _useState[1];
@@ -113,12 +114,10 @@ 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(activeByCaptionMatch || activeByHyperlink || activeByNavigationExpr);
-  }, [caption, path, doesHyperlinkMatchCurrentPath, navigationInfo.isCurrentPage]);
+    setIsActive(activeByHyperlink || activeByNavigationExpr);
+  }, [caption, path, doesHyperlinkMatchCurrentPath, navigationInfo.isCurrentPage, itemLink]);
 
   // 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 _JSON$stringify;
+  var _ref, _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 = typeof caption === "string" ? caption : (_JSON$stringify = JSON.stringify(caption)) !== null && _JSON$stringify !== void 0 ? _JSON$stringify : "";
+  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, " ");
 
   // Check if caption contains HTML tags
   var hasHTML = containsHTML(captionString);

package/components/basic/search/index.js

@@ -31,6 +31,7 @@ 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;
@@ -216,7 +217,7 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     if (type === "autocomplete") {
       getDataSource("");
     }
-  }, [dataset, type]);
+  }, [type]);
 
   // Update listen query state when type changes
   (0, _react.useEffect)(function () {
@@ -619,7 +620,10 @@ 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
@@ -1020,4 +1024,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, _withBaseWrapper["default"])(Search);
+var _default = exports["default"] = (0, _withFormController["default"])((0, _withBaseWrapper["default"])(Search));

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

@@ -40,7 +40,8 @@ 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;
+    viewtype = _ref$viewtype === void 0 ? "Grouped" : _ref$viewtype,
+    shouldShowLegend = _ref.shouldShowLegend;
   var isBarChart = type === "Bar"; // Bar = horizontal bars, Column = vertical bars
   var isStacked = viewtype === "Stacked";
   var formatValue = (0, _react.useCallback)(function (label) {
@@ -49,9 +50,6 @@ 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,9 +113,11 @@ var PieDonutChart = exports.PieDonutChart = function PieDonutChart(_ref2) {
     nameKey: "name",
     cx: "50%",
     cy: "50%",
-    innerRadius: type === "Donut" ? "".concat(donutratio !== null && donutratio !== void 0 ? donutratio : "60", "%") : 0,
+    innerRadius: type === "Donut" ? "".concat(Math.round((0, _utils.normalizeDonutRatio)(donutratio) * 100), "%") : 0,
     outerRadius: "80%",
     paddingAngle: 2,
+    startAngle: 90,
+    endAngle: -270,
     onClick: function onClick(data, index, event) {
       return onChartClick(data, index, event);
     },

package/components/chart/hooks/useBarYAxisExtras.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBarYAxisExtras = useBarYAxisExtras;
+var _react = _interopRequireWildcard(require("react"));
+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 useBarYAxisExtras(typeOrOptions) {
+  var options = typeof typeOrOptions === "string" ? {
+    type: typeOrOptions
+  } : typeOrOptions;
+  var type = options.type,
+    _options$chartWidth = options.chartWidth,
+    chartWidth = _options$chartWidth === void 0 ? 0 : _options$chartWidth,
+    _options$yAxisWidthRa = options.yAxisWidthRatio,
+    yAxisWidthRatio = _options$yAxisWidthRa === void 0 ? 0.15 : _options$yAxisWidthRa;
+  return (0, _react.useMemo)(function () {
+    if (type !== "Bar") {
+      return {};
+    }
+    var tickFontSize = 12;
+    var avgCharWidth = 7;
+    var calculateMaxChars = function calculateMaxChars() {
+      var availableWidth = chartWidth * yAxisWidthRatio;
+      var maxChars = Math.floor(availableWidth / avgCharWidth);
+      return Math.max(5, Math.min(30, maxChars));
+    };
+    var maxChars = calculateMaxChars();
+    var YTick = function YTick(_ref) {
+      var _payload$value;
+      var x = _ref.x,
+        y = _ref.y,
+        payload = _ref.payload;
+      var full = String((_payload$value = payload === null || payload === void 0 ? void 0 : payload.value) !== null && _payload$value !== void 0 ? _payload$value : "");
+      var text = full.length > maxChars ? full.slice(0, maxChars - 1) + "…" : full;
+      return __jsx("g", {
+        transform: "translate(".concat(x, ",").concat(y, ")")
+      }, __jsx("text", {
+        dy: 4,
+        textAnchor: "end",
+        fontSize: tickFontSize,
+        fill: "currentColor"
+      }, __jsx("title", null, full), text));
+    };
+    return {
+      tick: __jsx(YTick, null)
+    };
+  }, [type, chartWidth, yAxisWidthRatio]);
+}

package/components/chart/hooks/useXAxisConfig.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXAxisConfig = useXAxisConfig;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+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 useXAxisConfig(_ref) {
+  var _chartContainerRef$cu2;
+  var type = _ref.type,
+    processedData = _ref.processedData,
+    xDataKeyArr = _ref.xDataKeyArr,
+    chartContainerRef = _ref.chartContainerRef,
+    getDefaultXAxisLabel = _ref.getDefaultXAxisLabel,
+    xnumberformat = _ref.xnumberformat,
+    showxaxis = _ref.showxaxis,
+    xaxislabeldistance = _ref.xaxislabeldistance;
+  var xAxisConfig = (0, _react.useMemo)(function () {
+    var _chartContainerRef$cu;
+    var tickFontSize = 12;
+    var numTicks = type === "Bar" ? 5 : Math.max(1, processedData && processedData.length || xDataKeyArr.length || 1);
+    var containerWidth = ((_chartContainerRef$cu = chartContainerRef.current) === null || _chartContainerRef$cu === void 0 ? void 0 : _chartContainerRef$cu.clientWidth) || 300;
+    var maxWidthPx = Math.max(40, Math.floor((containerWidth - 60) / numTicks));
+    var approxCharWidth = tickFontSize * 0.8; // heuristic for average character width
+    var maxChars = Math.max(3, Math.floor(maxWidthPx / approxCharWidth));
+
+    // Estimate overlap risk from actual labels we will render
+    var rawLabels = (processedData || []).map(function (d) {
+      return d === null || d === void 0 ? void 0 : d.x;
+    });
+    var displayLabels = rawLabels.length > 0 ? rawLabels.map(function (val, idx) {
+      var _v;
+      var v = val;
+      if (xnumberformat && typeof v === "number") {
+        v = (0, _utils.formatNumber)(v, xnumberformat);
+      } else if (xDataKeyArr.length > 0 && xDataKeyArr[idx] !== undefined) {
+        v = xDataKeyArr[idx];
+      }
+      return String((_v = v) !== null && _v !== void 0 ? _v : "");
+    }) : (xDataKeyArr || []).map(function (v) {
+      return String(v !== null && v !== void 0 ? v : "");
+    });
+    var maxLabelChars = displayLabels.length ? Math.max.apply(Math, (0, _toConsumableArray2["default"])(displayLabels.map(function (s) {
+      return s.length;
+    }))) : 0;
+    var mayOverlap = maxLabelChars * approxCharWidth > maxWidthPx;
+    var shouldStagger = type !== "Bar" && mayOverlap;
+    var XAxisTickWithTooltip = function XAxisTickWithTooltip(_ref2) {
+      var _displayValue;
+      var x = _ref2.x,
+        y = _ref2.y,
+        payload = _ref2.payload,
+        index = _ref2.index;
+      var rawValue = payload === null || payload === void 0 ? void 0 : payload.value;
+      // Preserve existing mapping/formatting behavior
+      var displayValue = rawValue;
+      if (xnumberformat && typeof rawValue === "number") {
+        displayValue = (0, _utils.formatNumber)(rawValue, xnumberformat);
+      } else if (xDataKeyArr.length > 0 && typeof index === "number" && xDataKeyArr[index] !== undefined) {
+        displayValue = xDataKeyArr[index];
+      }
+      var fullText = String((_displayValue = displayValue) !== null && _displayValue !== void 0 ? _displayValue : "");
+      var needsEllipsis = fullText.length > maxChars;
+      var truncatedText = needsEllipsis ? fullText.slice(0, Math.max(0, maxChars - 1)) + "…" : fullText;
+      var textAnchor = "middle";
+      return __jsx("g", {
+        transform: "translate(".concat(x, ",").concat(y, ")")
+      }, __jsx("text", {
+        textAnchor: textAnchor,
+        fontSize: tickFontSize,
+        fill: "currentColor"
+      }, __jsx("title", null, fullText), truncatedText));
+    };
+    return {
+      hide: !showxaxis,
+      label: {
+        // value: getDefaultXAxisLabel(),
+        position: "insideBottom",
+        offset: xaxislabeldistance,
+        fill: "#000"
+      },
+      // Ensure all x-axis labels render
+      interval: 0,
+      // Provide extra space only when staggering is needed
+      height: type === "Bar" ? undefined : shouldStagger ? 40 : undefined,
+      tickMargin: 8,
+      // Custom tick that truncates with ellipsis and shows full text in native tooltip
+      tick: __jsx(XAxisTickWithTooltip, null)
+    };
+  }, [type, processedData, xDataKeyArr, (_chartContainerRef$cu2 = chartContainerRef.current) === null || _chartContainerRef$cu2 === void 0 ? void 0 : _chartContainerRef$cu2.clientWidth, getDefaultXAxisLabel, xnumberformat, showxaxis, xaxislabeldistance]);
+  return xAxisConfig;
+}

package/components/chart/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -23,12 +23,15 @@ 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,
@@ -78,7 +81,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 ? "medium" : _props$donutratio,
+    donutratio = _props$donutratio === void 0 ? "small" : _props$donutratio,
     bubblesize = props.bubblesize,
     _props$showxdistance = props.showxdistance,
     showxdistance = _props$showxdistance === void 0 ? false : _props$showxdistance,
@@ -597,6 +600,26 @@ 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 = [];
@@ -617,8 +640,15 @@ 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)(dataset) ? dataset : [dataset];
+      var processedDataset = (0, _lodash.isArray)(transformedDataset) ? transformedDataset : [transformedDataset];
       setChartData(processedDataset);
       if (processedDataset.length > 0) {
         data = processChartData(processedDataset);
@@ -628,7 +658,7 @@ var WmChart = function WmChart(props) {
       setupRegions(data);
       setProcessedData(processDataWithFilters(data));
     }
-  }, [binddataset, dataset, type, yaxisdatakey, shape, processDataWithFilters, setupRegions]);
+  }, [binddataset, dataset, type, xaxisdatakey, yaxisdatakey, shape, processDataWithFilters, setupRegions, transformObjectToArray]);
 
   // Handle chart data updates - only when NOT using onTransform
   (0, _react.useEffect)(function () {
@@ -677,37 +707,34 @@ var WmChart = function WmChart(props) {
     setSelectedItem(dataObj);
     onSelect === null || onSelect === void 0 || onSelect(event, props, dataObj, selectedChartItem);
   }, [onSelect, props]);
-  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]);
+
+  // 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 getYAxisConfig = (0, _react.useMemo)(function () {
-    return {
-      hide: !showyaxis,
+    return _objectSpread(_objectSpread({
+      hide: !yAxisShow,
       label: {
-        value: (0, _utils.truncateText)(getDefaultYAxisLabel(), 20),
         angle: -90,
         position: "insideLeft",
         offset: yaxislabeldistance,
@@ -720,15 +747,16 @@ 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;
       }
-    };
-  }, [showyaxis, getDefaultYAxisLabel, ynumberformat, yaxislabeldistance]);
+    });
+  }, [yAxisShow, getDefaultYAxisLabel, ynumberformat, yaxislabeldistance, processedData]);
   var handleRegionChange = (0, _react.useCallback)(function (region) {
     var isDoubleClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     setSelectedRegions(function (prev) {
@@ -825,7 +853,8 @@ var WmChart = function WmChart(props) {
       case "Bar":
         return __jsx(_barColumnChart.BarColumnChart, (0, _extends2["default"])({}, commonProps, {
           type: "Bar",
-          viewtype: viewtype
+          viewtype: viewtype,
+          shouldShowLegend: shouldShowLegend
         }));
       case "Line":
         return __jsx(_lineAreaChart.LineAreaChart, (0, _extends2["default"])({}, commonProps, {
@@ -860,7 +889,8 @@ var WmChart = function WmChart(props) {
           onChartClick: handleChartClick,
           onLegendClick: handleLegendClick,
           showLegend: shouldShowLegend,
-          centerlabel: centerlabel
+          centerlabel: centerlabel,
+          donutratio: donutratio
         }));
       case "Bubble":
         return __jsx(_bubbleChart.BubbleChart, (0, _extends2["default"])({}, commonProps, {
@@ -885,7 +915,10 @@ var WmChart = function WmChart(props) {
   return __jsx(_material.Box, {
     component: "div",
     className: "app-chart ".concat(className || "", " ").concat(title ? "panel" : ""),
-    style: _objectSpread(_objectSpread({}, styles), fontStyles),
+    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
+    }),
     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.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.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;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _forEach = _interopRequireDefault(require("lodash-es/forEach"));
@@ -557,17 +557,8 @@ var convertToRechartsFormat = exports.convertToRechartsFormat = function convert
       }
     });
 
-    // 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) {
+    // Create data points for each x value in the preserved order
+    Array.from(xValuesSet).forEach(function (x) {
       var resultPoint = {
         x: x
       };
@@ -688,4 +679,24 @@ 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), {}, {
-        display: display
-      });
+      return _objectSpread(_objectSpread(_objectSpread({}, styles), customStyles), {}, (0, _defineProperty2["default"])({
+        display: display || props.direction ? "flex" : ""
+      }, "flex-flow", direction || "row"));
     }
     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), {}, {
+    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]);
   (0, _react.useEffect)(function () {
     if (props !== null && props !== void 0 && props.onLoad && !isLoaded.current) {
@@ -180,8 +180,7 @@ var WmContainer = exports.WmContainer = function WmContainer(props) {
     id: id,
     hidden: props.hidden
   }, domEvents, {
-    name: props.name,
-    hidden: props.hidden
+    name: props.name
   }), renderPartial ? renderPartial(props, props.onLoad) : children);
 };
 WmContainer.displayName = "WmContainer";

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

@@ -17,6 +17,7 @@ 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,
@@ -124,9 +125,9 @@ var PanelHeader = function PanelHeader(_ref) {
   }) : __jsx(_ExpandMore["default"], {
     className: "wi-plus"
   })), enablefullscreen && __jsx(_material.IconButton, {
-    "aria-label": isFullscreen ? "Exit Fullscreen" : "Fullscreen",
+    "aria-label": "Fullscreen/Exit",
     className: "app-icon panel-action wi",
-    title: isFullscreen ? "Exit Fullscreen" : "Fullscreen",
+    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"),
     onClick: onToggleFullScreen
   }, isFullscreen ? __jsx(_FullscreenExit["default"], {
     className: "wi-fullscreen-exit"