@wavemaker/react-runtime 11.14.1-rc.241 → 11.14.2-1.6423

package/components/data/table/index.js

@@ -550,6 +550,18 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     });
   }, [columns, columnOverrides, columnsVersion, editingRowId]);
 
+  // Compute  class signature from columns meta.className to trigger header and body re-render on class updates
+  var ColClassSignature = (0, _react.useMemo)(function () {
+    try {
+      return (columnsForTable || []).map(function (col) {
+        var _col$meta;
+        return String((col === null || col === void 0 || (_col$meta = col.meta) === null || _col$meta === void 0 ? void 0 : _col$meta.className) || "");
+      }).join("|");
+    } catch (_unused) {
+      return "";
+    }
+  }, [columnsForTable]);
+
   // Use filter hook for filtering functionality
   var _useTableFilter = (0, _hooks.useTableFilter)({
       filterMode: filtermode,
@@ -734,12 +746,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     if (filtermode === "search") {
       if (globalFilter || globalSearchColumn) {
         // Find column type for the selected search column
-        var columnType = globalSearchColumn ? function (_col$meta, _col$meta2) {
+        var columnType = globalSearchColumn ? function (_col$meta2, _col$meta3) {
           var col = (0, _lodashEs.find)(columnsForTable, function (c) {
             var column = c;
             return column.accessorKey === globalSearchColumn || column.id === globalSearchColumn;
           });
-          return (col === null || col === void 0 || (_col$meta = col.meta) === null || _col$meta === void 0 ? void 0 : _col$meta.type) || (col === null || col === void 0 || (_col$meta2 = col.meta) === null || _col$meta2 === void 0 ? void 0 : _col$meta2.editinputtype) || "string";
+          return (col === null || col === void 0 || (_col$meta2 = col.meta) === null || _col$meta2 === void 0 ? void 0 : _col$meta2.type) || (col === null || col === void 0 || (_col$meta3 = col.meta) === null || _col$meta3 === void 0 ? void 0 : _col$meta3.editinputtype) || "string";
         }() : "string";
         return [{
           field: globalSearchColumn || "",
@@ -759,12 +771,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
           field = _ref5[0],
           filter = _ref5[1];
         // Find column type for each field
-        var columnType = function (_col$meta3, _col$meta4) {
+        var columnType = function (_col$meta4, _col$meta5) {
           var col = (0, _lodashEs.find)(columnsForTable, function (c) {
             var column = c;
             return column.accessorKey === field || column.id === field;
           });
-          return (col === null || col === void 0 || (_col$meta3 = col.meta) === null || _col$meta3 === void 0 ? void 0 : _col$meta3.type) || (col === null || col === void 0 || (_col$meta4 = col.meta) === null || _col$meta4 === void 0 ? void 0 : _col$meta4.editinputtype) || "string";
+          return (col === null || col === void 0 || (_col$meta4 = col.meta) === null || _col$meta4 === void 0 ? void 0 : _col$meta4.type) || (col === null || col === void 0 || (_col$meta5 = col.meta) === null || _col$meta5 === void 0 ? void 0 : _col$meta5.editinputtype) || "string";
         }();
         return {
           field: field,
@@ -1197,6 +1209,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     table: table,
     enablesort: enablesort,
     rowClass: rowClass,
+    ColClassSignature: ColClassSignature,
     sorting: sorting,
     columnSizing: columnSizing,
     rowSelection: rowSelection,
@@ -1222,7 +1235,10 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     rowExpansionConfig: rowExpansionConfig,
     expandedRows: expandedRows,
     toggleRowExpansion: toggleRowExpansion,
-    isRowExpanded: isRowExpanded
+    isRowExpanded: isRowExpanded,
+    rowsVersion: tableData.length,
+    ColClassSignature: ColClassSignature,
+    tableData: tableData
   })))))), __jsx(_material.Box, {
     className: "panel-footer clearfix"
   }, showPagination && __jsx(_material.Box, {

package/components/data/utils/field-data-utils.js

@@ -29,7 +29,7 @@ var getDistinctFieldProperties = exports.getDistinctFieldProperties = function g
     props.filterExpr = formField.filterexpressions ? (0, _lodashEs.isObject)(formField.filterexpressions) ? formField.filterexpressions : JSON.parse(formField.filterexpressions) : {};
   } else {
     props.tableName = dataSource.execute(_types.DataSource.Operation.GET_ENTITY_NAME);
-    fieldColumn = formField.field || formField.key;
+    fieldColumn = formField["fieldcol"] || formField.key;
     props.distinctField = fieldColumn;
     props.aliasColumn = fieldColumn;
   }

package/components/dialogs/index.js

@@ -10,7 +10,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
-var _Slide = _interopRequireDefault(require("@mui/material/Slide"));
 var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
 var _clsx = _interopRequireDefault(require("clsx"));
 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); }
@@ -18,21 +17,6 @@ var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_CLASS = "modal fade in";
-var Transition = /*#__PURE__*/_react["default"].forwardRef(function Transition(props, ref) {
-  return __jsx(_Slide["default"], (0, _extends2["default"])({
-    direction: "down",
-    ref: ref
-  }, props, {
-    timeout: {
-      enter: 500,
-      exit: 400
-    },
-    easing: {
-      enter: "cubic-bezier(0.4, 0, 0.2, 1)",
-      exit: "cubic-bezier(0.4, 0, 0.2, 1)"
-    }
-  }));
-});
 var FadeTransition = /*#__PURE__*/_react["default"].forwardRef(function FadeTransition(props, ref) {
   return __jsx(_Fade["default"], (0, _extends2["default"])({
     ref: ref
@@ -47,6 +31,19 @@ var FadeTransition = /*#__PURE__*/_react["default"].forwardRef(function FadeTran
     }
   }), props.children);
 });
+
+// Memoized body scroll management
+var useBodyScrollLock = function useBodyScrollLock(lock) {
+  (0, _react.useEffect)(function () {
+    if (!lock || typeof document === "undefined") return;
+    var body = document.body;
+    var originalOverflow = body.style.overflow;
+    body.style.overflow = "hidden";
+    return function () {
+      body.style.overflow = originalOverflow;
+    };
+  }, [lock]);
+};
 var WmDialog = exports.WmDialog = /*#__PURE__*/(0, _react.memo)(function (props) {
   var children = props.children,
     className = props.className,
@@ -72,6 +69,7 @@ var WmDialog = exports.WmDialog = /*#__PURE__*/(0, _react.memo)(function (props)
   if (!open) {
     return null;
   }
+  useBodyScrollLock(open);
   var sheetPositionStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.sheetposition === "top" && {
     position: "absolute",
     top: 0

package/components/input/currency/index.js

@@ -51,7 +51,8 @@ var WmCurrency = function WmCurrency(props) {
     inputmode = _props$inputmode === void 0 ? "natural" : _props$inputmode,
     _props$decimalplaces = props.decimalplaces,
     decimalplaces = _props$decimalplaces === void 0 ? 0 : _props$decimalplaces,
-    updateon = props.updateon,
+    _props$updateon = props.updateon,
+    updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
     _props$updatedelay = props.updatedelay,
     updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
     onChange = props.onChange,
@@ -100,7 +101,7 @@ var WmCurrency = function WmCurrency(props) {
   var debouncedUpdateValue = (0, _react.useCallback)(lodash.debounce(function (value) {
     var validation = validateValue(value);
     setShowError(!validation.isValid);
-    if (validation.isValid && (onChange || listener !== null && listener !== void 0 && listener.onChange)) {
+    if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
       (0, _formatUtil.handleValidatedValueUpdate)(value, name, inputEl.current, onChange, listener, prevDatavalue, setPrevDatavalue, props);
     }
   }, parseInt(updatedelay || "10"), {
@@ -219,7 +220,7 @@ var WmCurrency = function WmCurrency(props) {
       setPrevDatavalue(datavalue);
     }
   }, [initialDataValue]);
-  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onClick ? {
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onClick ? {
     onClick: handleClick
   } : {}), onMouseEnter ? {
     onMouseEnter: handleMouseEnter
@@ -227,6 +228,12 @@ var WmCurrency = function WmCurrency(props) {
     onMouseLeave: handleMouseLeave
   } : {}), onFocus ? {
     onFocus: handleFocus
+  } : {}), onBlur ? {
+    onBlur: handleBlur
+  } : {}), onChange ? {
+    onChange: handleInputChange
+  } : {}), onKeyDown ? {
+    onKeyDown: handleKeyDown
   } : {});
   return __jsx(_material.Box, {
     component: "div",
@@ -254,10 +261,7 @@ var WmCurrency = function WmCurrency(props) {
     tabIndex: tabindex,
     accessKey: shortcutkey,
     style: styles,
-    ref: inputEl,
-    onChange: handleInputChange,
-    onBlur: handleBlur,
-    onKeyDown: handleKeyDown
+    ref: inputEl
   })));
 };
 var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(/*#__PURE__*/_react["default"].memo(WmCurrency)));

package/components/input/default/checkbox/index.js

@@ -55,7 +55,6 @@ var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (pr
     rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var checkboxRef = (0, _react.useRef)(null);
   var prevRefValue = (0, _react.useRef)(null);
-  var isInitialized = (0, _react.useRef)(false);
 
   // Keep track of the actual value (not just boolean state)
   var _React$useState = _react["default"].useState(function () {
@@ -75,14 +74,13 @@ var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (pr
 
   // Update actual value when datavalue prop changes
   (0, _react.useEffect)(function () {
-    if (prevRefValue.current === datavalue || isInitialized.current) return;
+    if (prevRefValue.current === datavalue) return;
     if (datavalue === null || datavalue === undefined) {
       setActualValue(null);
     } else {
       var newValue = datavalue === checkedvalue ? checkedvalue : uncheckedvalue;
       setActualValue(newValue);
       prevRefValue.current = datavalue;
-      isInitialized.current = true;
       var event = {
         target: {
           checked: newValue
@@ -97,6 +95,7 @@ var WmCheckbox = exports.WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (pr
 
     // Update our internal state with the actual value
     setActualValue(newValue);
+    prevRefValue.current = newValue;
     if (listener !== null && listener !== void 0 && listener.onChange) {
       listener.onChange(props.fieldName || name, {
         datavalue: newValue // Pass the actual value, not boolean

package/components/input/default/checkboxset/index.js

@@ -9,7 +9,6 @@ exports["default"] = exports.WmCheckboxset = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -23,6 +22,7 @@ var _constants = require("@wavemaker/react-runtime/components/constants");
 var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
 var _input = require("@base-ui-components/react/input");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _listHelpers = require("@wavemaker/react-runtime/components/data/list/utils/list-helpers");
 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;
 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; }
@@ -45,26 +45,6 @@ var normalizeDatavalue = function normalizeDatavalue(datavalue) {
   // Convert single value to array
   return [datavalue];
 };
-
-// Helper function to generate itemsPerRowClass
-var generateItemsPerRowClass = function generateItemsPerRowClass(itemsperrow) {
-  if (!itemsperrow) {
-    return "col-xs-12";
-  }
-  if (isNaN(parseInt(itemsperrow, 10))) {
-    // Handle string of classes (e.g. "xs-1 sm-1 md-1 lg-1")
-    return itemsperrow.split(" ").map(function (cls) {
-      var _cls$split = cls.split("-"),
-        _cls$split2 = (0, _slicedToArray2["default"])(_cls$split, 2),
-        tier = _cls$split2[0],
-        value = _cls$split2[1];
-      return "col-".concat(tier, "-").concat(12 / parseInt(value, 10));
-    }).join(" ");
-  }
-
-  // Handle single number value
-  return "col-xs-".concat(12 / parseInt(itemsperrow, 10));
-};
 var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(function (props) {
   var _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
@@ -150,7 +130,7 @@ var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(functi
 
   // Generate itemsPerRowClass
   var itemsPerRowClass = (0, _react.useMemo)(function () {
-    return generateItemsPerRowClass(itemsperrow);
+    return (0, _listHelpers.getItemsPerRowClass)(itemsperrow);
   }, [itemsperrow]);
   var transformedDataset = (0, _react.useMemo)(function () {
     if (!dataset) return [];

package/components/input/default/radioset/index.js

@@ -22,6 +22,7 @@ var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transform
 var _constants = require("@wavemaker/react-runtime/components/constants");
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _listHelpers = require("@wavemaker/react-runtime/components/data/list/utils/list-helpers");
 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; }
@@ -125,7 +126,9 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
   var _useState6 = (0, _react.useState)(null),
     error = _useState6[0],
     setError = _useState6[1];
-  var itemsPerRowClass = "items-per-row-".concat(itemsperrow.replace(/\s+/g, "-"));
+  var itemsPerRowClass = (0, _react.useMemo)(function () {
+    return (0, _listHelpers.getItemsPerRowClass)(itemsperrow);
+  }, [itemsperrow]);
   var handleBlur = (0, _react.useCallback)(function () {
     if (onblur) onblur();
   }, [onblur]);
@@ -182,9 +185,7 @@ var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
     }
   }, [groupby, localDatasetItems, collapsible, transformedDataset]);
   (0, _react.useEffect)(function () {
-    if (datavalue !== undefined) {
-      setSelectedKey(datavalue);
-    }
+    setSelectedKey(datavalue);
   }, [datavalue]);
   var handleGroupClick = (0, _react.useCallback)(function (key, event) {
     setExpandedItems(function (prevState) {

package/components/input/epoch/datetime/index.js

@@ -14,8 +14,10 @@ var _TimePicker = require("@mui/x-date-pickers/TimePicker");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _BaseDateTime = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/BaseDateTime"));
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
 var _utils = require("./utils");
 var _styled = require("./styled");
+var _store = require("@wavemaker/react-runtime/store");
 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; }
@@ -31,7 +33,9 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
     shortcutkey = props.shortcutkey,
     datavalue = props.datavalue,
     _props$datepattern = props.datepattern,
-    datepattern = _props$datepattern === void 0 ? "MMM d, y h:mm:ss a" : _props$datepattern,
+    datepattern = _props$datepattern === void 0 ? (0, _store.useAppSelector)(function (state) {
+      return "".concat(state.i18n.dateFormat, " ").concat(state.i18n.timeFormat) || "MMM d, y h:mm:ss a";
+    }) : _props$datepattern,
     _props$hourstep = props.hourstep,
     hourstep = _props$hourstep === void 0 ? 1 : _props$hourstep,
     _props$minutestep = props.minutestep,
@@ -653,4 +657,4 @@ var WmDateTime = exports.WmDateTime = function WmDateTime(props) {
   }));
 };
 WmDateTime.displayName = "WmDateTime";
-var _default = exports["default"] = (0, _BaseDateTime["default"])(WmDateTime);
+var _default = exports["default"] = (0, _BaseDateTime["default"])((0, _withFormController["default"])(WmDateTime));

package/components/input/epoch/time/index.js

@@ -12,6 +12,7 @@ var _xDatePickers = require("@mui/x-date-pickers");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _BaseDateTime = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/BaseDateTime"));
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
 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;
@@ -409,4 +410,4 @@ var WmTime = function WmTime(props) {
   }));
 };
 WmTime.displayName = "WmTime";
-var _default = exports["default"] = (0, _BaseDateTime["default"])(WmTime);
+var _default = exports["default"] = (0, _BaseDateTime["default"])((0, _withFormController["default"])(WmTime));

package/components/input/number/index.js

@@ -104,8 +104,8 @@ var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
         currentTarget: inputEl.current
       };
       listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || name, {
-        datavalue: value == null ? "" : parseInt(value.toString()),
-        value: value == null ? "" : parseInt(value.toString()),
+        datavalue: value == null ? "" : value,
+        value: value == null ? "" : value,
         displayValue: value == null ? "" : value.toString()
       }, value, prevDatavalue);
       if (onChange) {

package/components/input/text/util.js

@@ -7,6 +7,7 @@ exports.autoCapitalize = autoCapitalize;
 exports.removeDisplayFormat = exports.formatInput = void 0;
 var formatInput = exports.formatInput = function formatInput(value, format) {
   if (!format || !value) return value;
+  value = value.toString();
   var digitsOnly = value.replace(/\D/g, "");
   var formatDigits = format.replace(/[^9]/g, "");
   var maxDigits = formatDigits.length;
@@ -146,6 +147,7 @@ var formatInput = exports.formatInput = function formatInput(value, format) {
  */
 var removeDisplayFormat = exports.removeDisplayFormat = function removeDisplayFormat(value, format) {
   if (!format || !value) return value;
+  value = value.toString();
 
   // For alphanumeric formats (like AA-9999), keep both letters and numbers
   if (format.includes("A")) {

package/components/input/textarea/index.js

@@ -100,32 +100,30 @@ var WmTextarea = /*#__PURE__*/(0, _react.memo)(function (props) {
     };
   }, [required, regexp, maxchars]);
   var updateValue = (0, _react.useCallback)(function (newValue, validation) {
-    if (validation.isValid) {
-      isInternalUpdate.current = true;
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        listener.onChange(props.fieldName || name, {
-          datavalue: newValue,
+    isInternalUpdate.current = true;
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.fieldName || name, {
+        datavalue: newValue,
+        value: newValue,
+        charlength: newValue === null || newValue === void 0 ? void 0 : newValue.length
+      });
+    }
+    if (onChange) {
+      var syntheticEvent = {
+        target: {
           value: newValue,
-          charlength: newValue === null || newValue === void 0 ? void 0 : newValue.length
-        });
-      }
-      if (onChange) {
-        var syntheticEvent = {
-          target: {
-            value: newValue,
-            name: name
-          },
-          currentTarget: textareaRef.current
-        };
-        onChange(syntheticEvent, props, newValue, valueRef.current);
-      }
-
-      // We need this setTimeout to ensure external updates don't override
-      // our internal update immediately
-      setTimeout(function () {
-        isInternalUpdate.current = false;
-      }, 0);
+          name: name
+        },
+        currentTarget: textareaRef.current
+      };
+      onChange(syntheticEvent, props, newValue, valueRef.current);
     }
+
+    // We need this setTimeout to ensure external updates don't override
+    // our internal update immediately
+    setTimeout(function () {
+      isInternalUpdate.current = false;
+    }, 0);
   }, [onChange, listener === null || listener === void 0 ? void 0 : listener.onChange]);
 
   // Debounced update with stable reference

package/components/layout/leftnav/index.js

@@ -37,7 +37,7 @@ function WmLeftPanel(props) {
     id: id,
     component: "div",
     sx: styles,
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth, " app-nav-").concat(navtype))
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth, " ").concat(navtype ? "app-nav-".concat(navtype) : "", " ").concat(navheight ? "app-nav-".concat(navheight) : ""))
   }, children);
 }
 WmLeftPanel.displayName = "WmLeftPanel";

package/components/navbar/nav/index.js

@@ -14,7 +14,8 @@ var _navItem = require("@wavemaker/react-runtime/components/navbar/nav-item");
 var _anchor = require("@wavemaker/react-runtime/components/basic/anchor");
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _menu = _interopRequireDefault(require("@wavemaker/react-runtime/components/navigation/menu"));
-var _constants = require("../../../core/constants");
+var _utils = require("@wavemaker/react-runtime/core/util/utils");
+var _utils2 = require("../../../core/util/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; }
@@ -35,30 +36,117 @@ var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
     name = props.name,
     styles = props.styles,
     id = props.id;
+  var path = (0, _utils2.getCurrentPath)();
+  var _useState = (0, _react.useState)(null),
+    activeNavItemIndex = _useState[0],
+    setActiveNavItemIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    hoveredNavItemIndex = _useState2[0],
+    setHoveredNavItemIndex = _useState2[1];
+  var activeNavItemIndexRef = (0, _react.useRef)(null);
+  var triggerActionClickForAnchor = function triggerActionClickForAnchor(e, item) {
+    e === null || e === void 0 || e.preventDefault();
+    (0, _utils.triggerItemAction)({
+      label: getItemLabel(item),
+      link: item[props.itemlink || "link"],
+      target: item[props.itemtarget]
+    });
+  };
+
+  // Helper function to get the label - handles both string and function
+  var getItemLabel = function getItemLabel(item) {
+    var itemlabel = props.itemlabel;
+    if (typeof itemlabel === "function") {
+      try {
+        return itemlabel(item);
+      } catch (error) {
+        console.warn("Error in itemlabel function:", error);
+      }
+    }
+
+    // If itemlabel is a string, use it as property name
+    if (typeof itemlabel === "string") {
+      return item[itemlabel];
+    }
+
+    // Fallback
+    return item["label"];
+  };
+
+  // Handler to activate nav item when menu detects active item or menu item is clicked
+  var handleNavItemActivate = (0, _react.useCallback)(function (navItemIndex) {
+    return function () {
+      activeNavItemIndexRef.current = navItemIndex;
+      setActiveNavItemIndex(navItemIndex);
+    };
+  }, []);
+
+  // Handler for nav item hover enter
+  var handleNavItemMouseEnter = (0, _react.useCallback)(function (index) {
+    return function (event) {
+      setHoveredNavItemIndex(index);
+    };
+  }, []);
+
+  // Handler for nav item hover leave
+  var handleNavItemMouseLeave = (0, _react.useCallback)(function (event) {
+    setHoveredNavItemIndex(null);
+  }, []);
+
+  // Check if nav item should be active - menu handles its own active detection
+  var isNavItemActive = (0, _react.useCallback)(function (item, index) {
+    var currentActiveIndex = activeNavItemIndexRef.current;
+    if (currentActiveIndex !== null && currentActiveIndex !== undefined) {
+      return currentActiveIndex === index;
+    }
+    var subActions = item["itemchildren"] || item["children"] || item["SubActions"];
+    var hasSubactions = Array.isArray(subActions) && subActions.length > 0;
+    if (hasSubactions) {
+      return false;
+    }
+    var itemLink = (0, _utils2.getItemLink)(item, props);
+    if (itemLink) {
+      var currentRoute = "#/".concat(path.split("/").filter(Boolean).pop() || "");
+      if (itemLink === currentRoute || path === itemLink.replace("#", "")) {
+        return true;
+      }
+    }
+    return false;
+  }, [activeNavItemIndex, path]);
   var renderNavItem = function renderNavItem() {
     if (props.dataset && props.dataset.length > 0) {
       return props.dataset.map(function (item, index) {
+        var label = getItemLabel(item);
+        var isActive = isNavItemActive(item, index);
         var subActions = item["itemchildren"] || item["children"] || item["SubActions"];
         var hasSubactions = Array.isArray(subActions) && subActions.length > 0;
         var childComponent = hasSubactions ? __jsx(_menu["default"], {
           name: "",
           itemlabel: props.itemlabel,
+          itemlink: props.itemlink,
+          itemicon: props.itemicon,
           listener: {},
           iconclass: item[props.itemicon],
-          caption: item[props.itemlabel || "label"],
+          caption: label,
           dataset: subActions,
           type: "anchor",
-          onSelect: props.onSelect
+          isFromNav: true,
+          onNavItemActivate: handleNavItemActivate(index),
+          onSelect: props.onSelect,
+          isNavFromMenu: true
         }) : __jsx(_anchor.WmAnchor, {
           name: "",
           listener: {},
-          caption: item[props.itemlabel || "label"],
+          caption: label,
           iconclass: item[props.itemicon],
           iconposition: item[props.iconposition],
           iconheight: item[props.iconheight],
           iconwidth: item[props.iconwidth],
           iconmargin: item[props.iconmargin],
-          hyperlink: (0, _constants.hyperLinkMofify)(item[props.itemlink || "link"]),
+          hyperlink: "#",
+          onClick: function onClick(e) {
+            return triggerActionClickForAnchor(e, item);
+          },
           target: item[props.itemtarget],
           action: item[props.itemaction],
           badgevalue: item[props.itembadge],
@@ -69,8 +157,10 @@ var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
           key: index,
           name: "",
           listener: {},
-          className: hasSubactions ? "nav-".concat(type) : undefined,
-          hint: item[props.itemhint]
+          className: (0, _clsx["default"])(hasSubactions ? "nav-".concat(type) : "", isActive ? "active" : "", hoveredNavItemIndex === index ? "active" : ""),
+          hint: item[props.itemhint],
+          onMouseEnter: handleNavItemMouseEnter(index),
+          onMouseLeave: handleNavItemMouseLeave
         }, childComponent);
       });
     }

package/components/navbar/nav-item/index.js

@@ -20,7 +20,8 @@ var WmNavItem = exports.WmNavItem = /*#__PURE__*/(0, _react.memo)(function (prop
   var className = props.className,
     styles = props.styles,
     id = props.id,
-    name = props.name;
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave;
   return __jsx(_ListItem["default"], {
     name: name,
     id: id,
@@ -32,7 +33,9 @@ var WmNavItem = exports.WmNavItem = /*#__PURE__*/(0, _react.memo)(function (prop
       padding: "inherit"
     }),
     className: (0, _clsx["default"])(DEFAULT_CLASS, className),
-    title: props.hint
+    title: props.hint,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
   }, props.children);
 }, function (prev, current) {
   var keys = ["className", "styles", "children"];