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

package/components/input/select/index.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _NativeSelect = _interopRequireDefault(require("@mui/material/NativeSelect"));
@@ -21,7 +23,7 @@ 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 WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
-  var _ref;
+  var _ref2, _key;
   var autofocus = props.autofocus,
     className = props.className,
     _props$datafield = props.datafield,
@@ -30,7 +32,7 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
     datavalue = props.datavalue,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
-    displayexpression = props.displayexpression,
+    displayExpression = props.displayExpression,
     displaylabel = props.displaylabel,
     _props$displayfield = props.displayfield,
     displayfield = _props$displayfield === void 0 ? "value" : _props$displayfield,
@@ -52,6 +54,7 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
     listener = props.listener,
     _props$tabindex = props.tabindex,
     tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    match = props.match,
     onClick = props.onClick,
     onChange = props.onChange,
     onBlur = props.onBlur,
@@ -63,6 +66,8 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
     onKeyUp = props.onKeyUp;
   var DEFAULT_CLASS = "app-select-wrapper ng-dirty";
   var selectRef = (0, _react.useRef)(null);
+  var lastDatavalueRef = (0, _react.useRef)(datavalue);
+  var externalDatavalueRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(""),
     displayValue = _useState[0],
     setDisplayValue = _useState[1];
@@ -81,7 +86,9 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
   var _useState6 = (0, _react.useState)(datavalue),
     prevDatavalue = _useState6[0],
     setPrevDatavalue = _useState6[1];
-  var transformedDataset = (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, displaylabel, displayexpression, orderby, groupby, dataPath);
+  // Check if dataset is a function and call it to get the actual dataset value
+  var resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
+  var transformedDataset = (0, _transformedDatasetUtils.transformDataset)(resolvedDataset, datafield, displayfield, displaylabel, displayExpression, orderby, groupby, dataPath, "", match);
   var validateInput = (0, _react.useCallback)(function (value) {
     // Handle special case value
     if (value === "") {
@@ -103,71 +110,112 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
   }, [required]);
 
   // Handle value change
-  var handleValueChange = function handleValueChange(event) {
-    var _listener$Widgets, _transformedDataset;
-    var newValue = multiple ? Array.from(event.target.selectedOptions, function (option) {
-      return option.value;
-    }) : event.target.selectedIndex;
-    if (multiple) {
-      // Filter out placeholder value from multiple selection
-      var filteredValues = newValue.filter(function (val) {
-        return val !== placeholder;
-      });
-      setLocalDatavalue(filteredValues);
-      var selectedTexts = Array.from(event.target.selectedOptions, function (option) {
-        return option.text;
-      }).filter(function (text) {
-        return text !== placeholder;
-      });
-      setDisplayValue(selectedTexts.join(", "));
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        if (filteredValues.length === 0) {
-          // If only placeholder is selected or no valid selections, return empty array
-          listener.onChange(props.fieldName || name, {
-            datavalue: [],
-            displayValue: []
-          });
-        } else {
-          var findItem = function findItem(val) {
-            return transformedDataset.find(function (item) {
-              return (0, _typeof2["default"])(item.value) === "object" ? String(item.key) === String(val) : String(item.value) === String(val);
+  var handleValueChange = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(event) {
+      var _listener$Widgets, _transformedDataset;
+      var newValue, filteredValues, selectedTexts, findItem, selectedValues, selectedDisplayValues, _event$target$options;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(props.readonly || disabled)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            newValue = multiple ? Array.from(event.target.selectedOptions, function (option) {
+              return option.value;
+            }) : event.target.selectedIndex;
+            if (!multiple) {
+              _context.next = 20;
+              break;
+            }
+            // Filter out placeholder value from multiple selection
+            filteredValues = newValue.filter(function (val) {
+              return val !== placeholder;
             });
-          };
-          var selectedValues = filteredValues.map(function (val) {
-            var item = findItem(val);
-            return item ? item.value : val;
-          });
-          var selectedDisplayValues = filteredValues.map(function (val) {
-            var item = findItem(val);
-            return item ? item.label : val;
-          });
-          listener.onChange(props.fieldName || name, {
-            datavalue: selectedValues,
-            displayValue: selectedDisplayValues
-          });
-        }
-      }
-    } else {
-      var _event$target$options;
-      setLocalDatavalue(event.target.value);
-      setDisplayValue(((_event$target$options = event.target.options[event.target.selectedIndex]) === null || _event$target$options === void 0 ? void 0 : _event$target$options.text) || "");
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        if (newValue === 0 || event.target.value === placeholder) {
-          listener.onChange(props.fieldName || name, {
-            datavalue: "",
-            displayValue: ""
-          });
-        } else {
-          listener.onChange(props.fieldName || name, {
-            datavalue: transformedDataset[newValue - 1].value,
-            displayValue: transformedDataset[newValue - 1].label
-          });
+            setLocalDatavalue(filteredValues);
+            selectedTexts = Array.from(event.target.selectedOptions, function (option) {
+              return option.text;
+            }).filter(function (text) {
+              return text !== placeholder;
+            });
+            setDisplayValue(selectedTexts.join(", "));
+            if (!(listener !== null && listener !== void 0 && listener.onChange)) {
+              _context.next = 18;
+              break;
+            }
+            if (!(filteredValues.length === 0)) {
+              _context.next = 14;
+              break;
+            }
+            _context.next = 12;
+            return listener.onChange(props.fieldName || name, {
+              datavalue: [],
+              displayValue: []
+            });
+          case 12:
+            _context.next = 18;
+            break;
+          case 14:
+            findItem = function findItem(val) {
+              return transformedDataset.find(function (item) {
+                return (0, _typeof2["default"])(item.value) === "object" ? String(item.key) === String(val) : String(item.value) === String(val);
+              });
+            };
+            selectedValues = filteredValues.map(function (val) {
+              var item = findItem(val);
+              return item ? item.value : val;
+            });
+            selectedDisplayValues = filteredValues.map(function (val) {
+              var item = findItem(val);
+              return item ? item.label : val;
+            });
+            listener.onChange(props.fieldName || name, {
+              datavalue: selectedValues,
+              displayValue: selectedDisplayValues
+            });
+          case 18:
+            _context.next = 30;
+            break;
+          case 20:
+            setLocalDatavalue(event.target.value);
+            setDisplayValue(((_event$target$options = event.target.options[event.target.selectedIndex]) === null || _event$target$options === void 0 ? void 0 : _event$target$options.text) || "");
+            if (!(listener !== null && listener !== void 0 && listener.onChange)) {
+              _context.next = 30;
+              break;
+            }
+            if (!(newValue === 0 || event.target.value === placeholder)) {
+              _context.next = 28;
+              break;
+            }
+            _context.next = 26;
+            return listener.onChange(props.fieldName || name, {
+              datavalue: "",
+              displayValue: ""
+            });
+          case 26:
+            _context.next = 30;
+            break;
+          case 28:
+            _context.next = 30;
+            return listener.onChange(props.fieldName || name, {
+              datavalue: transformedDataset[newValue - 1].value,
+              displayValue: transformedDataset[newValue - 1].label
+            });
+          case 30:
+            if (onChange) onChange === null || onChange === void 0 || onChange(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], (transformedDataset === null || transformedDataset === void 0 || (_transformedDataset = transformedDataset[newValue - 1]) === null || _transformedDataset === void 0 ? void 0 : _transformedDataset.value) || "en", prevDatavalue);
+            setPrevDatavalue(newValue);
+          case 32:
+          case "end":
+            return _context.stop();
         }
-      }
-    }
-    if (onChange) onChange === null || onChange === void 0 || onChange(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], (transformedDataset === null || transformedDataset === void 0 || (_transformedDataset = transformedDataset[newValue - 1]) === null || _transformedDataset === void 0 ? void 0 : _transformedDataset.value) || "en", prevDatavalue);
-    setPrevDatavalue(newValue);
-  };
+      }, _callee);
+    }));
+    return function handleValueChange(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var handleBlur = function handleBlur(e) {
     var newValue = e.target.value;
     var selectedItem = transformedDataset.find(function (item) {
@@ -231,9 +279,13 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
       }
     }
   }, [transformedDataset, datavalue, multiple]);
-
   // Sync localDatavalue with incoming datavalue prop
   (0, _react.useEffect)(function () {
+    if (lastDatavalueRef.current !== datavalue) {
+      lastDatavalueRef.current = datavalue;
+    } else {
+      return;
+    }
     if (multiple) {
       var normalizedValue = Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [];
       if (JSON.stringify(normalizedValue) !== JSON.stringify(localDatavalue)) {
@@ -241,10 +293,33 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
       }
     } else {
       if (datavalue !== localDatavalue) {
+        var _listener$onChange;
+        // Compute displayValue for the external value
+        var computedDisplayValue = "";
+        if ((0, _typeof2["default"])(datavalue) === "object" && datavalue !== null) {
+          var matchingItem = transformedDataset.find(function (item) {
+            return item.value === datavalue || JSON.stringify(item.value) === JSON.stringify(datavalue);
+          });
+          computedDisplayValue = (matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) || "";
+        } else {
+          var _matchingItem = transformedDataset.find(function (item) {
+            return item.value == datavalue;
+          });
+          computedDisplayValue = (_matchingItem === null || _matchingItem === void 0 ? void 0 : _matchingItem.label) || "";
+        }
+
+        // Store the DATAVALUE so listener useEffect can skip until localDatavalue matches
+        externalDatavalueRef.current = datavalue;
         setLocalDatavalue(datavalue);
+
+        // Call listener.onChange with BOTH datavalue and displayValue in a single call
+        listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || name, {
+          datavalue: datavalue,
+          displayValue: computedDisplayValue
+        });
       }
     }
-  }, [datavalue, multiple]);
+  }, [datavalue, multiple, transformedDataset]);
   var handleClick = (0, _react.useCallback)(function (event) {
     onClick === null || onClick === void 0 || onClick(event);
   }, [onClick]);
@@ -279,7 +354,68 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
   } : {}), onMouseLeave ? {
     onMouseLeave: handleMouseLeave
   } : {});
+
+  // Memoize the computed select value to prevent re-renders
+  var computedSelectValue = (0, _react.useMemo)(function () {
+    if (multiple) {
+      return Array.isArray(localDatavalue) ? localDatavalue : [];
+    }
+    if ((0, _typeof2["default"])(localDatavalue) === "object" && localDatavalue !== null) {
+      var _matchingItem2 = transformedDataset.find(function (item) {
+        return item.value === localDatavalue || JSON.stringify(item.value) === JSON.stringify(localDatavalue);
+      });
+      if (_matchingItem2) {
+        return {
+          key: _matchingItem2.key,
+          displayValue: _matchingItem2.label
+        };
+      }
+    }
+    var matchingItem = transformedDataset.find(function (item) {
+      return item.value == localDatavalue;
+    });
+    var displayLabel = (matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) || "";
+    return {
+      key: localDatavalue,
+      displayValue: displayLabel
+    };
+  }, [localDatavalue, transformedDataset, multiple]);
+
+  // Track previous computed value to avoid unnecessary listener calls
+  var prevComputedValueRef = (0, _react.useRef)(null);
+
+  // Handle side effect (listener.onChange) in useEffect, not during render
+  // This effect ONLY handles displayValue updates for INTERNAL state changes
+  // External prop changes are handled in sync useEffect above
+  (0, _react.useEffect)(function () {
+    if (multiple) return;
+    var currentValue = computedSelectValue;
+
+    // Check if localDatavalue matches the external datavalue (final state reached)
+    var isExternalChange = externalDatavalueRef.current !== null && (localDatavalue === externalDatavalueRef.current || (0, _typeof2["default"])(localDatavalue) === "object" && (0, _typeof2["default"])(externalDatavalueRef.current) === "object" && JSON.stringify(localDatavalue) === JSON.stringify(externalDatavalueRef.current));
+
+    // Skip if we have a pending external change (already handled in sync useEffect)
+    if (externalDatavalueRef.current !== null) {
+      // Only clear when localDatavalue has been updated to match the external value
+      if (isExternalChange) {
+        externalDatavalueRef.current = null;
+      }
+      prevComputedValueRef.current = currentValue;
+      return;
+    }
+    var prevValue = prevComputedValueRef.current;
+
+    // Only call listener if the computed value actually changed
+    if (currentValue.displayValue && (!prevValue || prevValue.key !== currentValue.key || prevValue.displayValue !== currentValue.displayValue)) {
+      var _listener$onChange2;
+      listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || name, {
+        displayValue: currentValue.displayValue
+      });
+    }
+    prevComputedValueRef.current = currentValue;
+  }, [computedSelectValue, multiple, listener, props.fieldName, name, localDatavalue]);
   return __jsx(_material.Box, {
+    hidden: props.hidden,
     sx: {
       display: "inherit !important"
     },
@@ -289,7 +425,7 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
     IconComponent: function IconComponent() {
       return null;
     },
-    value: multiple ? Array.isArray(localDatavalue) ? localDatavalue : [] : (_ref = localDatavalue !== null && localDatavalue !== void 0 ? localDatavalue : placeholder) !== null && _ref !== void 0 ? _ref : ""
+    value: multiple ? computedSelectValue : (_ref2 = (_key = computedSelectValue.key) !== null && _key !== void 0 ? _key : placeholder) !== null && _ref2 !== void 0 ? _ref2 : ""
   }, events, {
     sx: {
       "& .MuiNativeSelect-select": _objectSpread(_objectSpread({}, styles), {}, {
@@ -304,12 +440,13 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
       tabIndex: tabindex,
       "aria-label": arialabel,
       multiple: multiple,
-      disabled: disabled || readonly,
+      disabled: disabled,
       "aria-readonly": readonly,
       className: "app-select ".concat(className, " form-control ng-valid ng-touched ng-dirty wm-app "),
       accessKey: shortcutkey,
       title: hint
-    }
+    },
+    readOnly: readonly
   }), __jsx("option", {
     value: placeholder,
     id: "placeholderOption",
@@ -335,7 +472,7 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
     }, item.label);
   })));
 }, function (prevProps, nextProps) {
-  var keys = ["dataset", "datafield", "displayfield", "displaylabel", "displayexpression", "orderby", "groupby", "dataPath", "arialabel", "multiple", "styles", "autofocus", "disabled", "readonly", "required", "datavalue"];
+  var keys = ["dataset", "datafield", "displayfield", "displaylabel", "displayExpression", "orderby", "groupby", "dataPath", "arialabel", "multiple", "styles", "autofocus", "disabled", "readonly", "required", "datavalue", "hidden", "className"];
   return keys.every(function (key) {
     return prevProps[key] === nextProps[key];
   });

package/components/input/slider/index.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -13,13 +14,14 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _input = require("@base-ui-components/react/input");
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
-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 _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-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" != _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; }
 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 = "app-slider slider";
 var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var className = props["class"],
+  var className = props.className,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     hint = props.hint,
@@ -29,8 +31,7 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
     readonly = _props$readonly === void 0 ? false : _props$readonly,
     _props$tabindex = props.tabindex,
     tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
-    _props$datavalue = props.datavalue,
-    datavalue = _props$datavalue === void 0 ? 0 : _props$datavalue,
+    datavalue = props.datavalue,
     _props$minvalue = props.minvalue,
     minvalue = _props$minvalue === void 0 ? 0 : _props$minvalue,
     _props$maxvalue = props.maxvalue,
@@ -40,13 +41,17 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
     onChange = props.onChange,
     styles = props.styles,
     listener = props.listener,
-    height = props.height,
-    width = props.width,
-    arialabel = props.arialabel;
-  var _useState = (0, _react.useState)(datavalue),
+    arialabel = props.arialabel,
+    _props$showmarkers = props.showmarkers,
+    showmarkers = _props$showmarkers === void 0 ? false : _props$showmarkers,
+    markerlabeltext = props.markerlabeltext;
+
+  // Always provide a number value to keep the input controlled
+  var initialValue = datavalue !== undefined ? datavalue : (minvalue + maxvalue) / 2;
+  var _useState = (0, _react.useState)(initialValue),
     value = _useState[0],
     setValue = _useState[1];
-  var prevDatavalueRef = (0, _react.useRef)(datavalue);
+  var prevDatavalueRef = (0, _react.useRef)(initialValue);
   var sliderRef = (0, _react.useRef)(null);
   var _useState2 = (0, _react.useState)(false),
     isTouched = _useState2[0],
@@ -54,15 +59,19 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
   var _useState3 = (0, _react.useState)(false),
     isDirty = _useState3[0],
     setIsDirty = _useState3[1];
+  var _useState4 = (0, _react.useState)([]),
+    markerItems = _useState4[0],
+    setMarkerItems = _useState4[1];
   (0, _react.useEffect)(function () {
+    var newValue = datavalue !== undefined ? datavalue : (minvalue + maxvalue) / 2;
     if (datavalue !== prevDatavalueRef.current) {
-      setValue(datavalue);
-      prevDatavalueRef.current = datavalue;
+      setValue(newValue);
+      prevDatavalueRef.current = newValue;
     }
-  }, [datavalue, listener]);
+  }, [datavalue, listener, minvalue, maxvalue]);
   (0, _react.useEffect)(function () {
-    if (props.datavalue !== value) {
-      setValue(props.datavalue || 0);
+    if (props.datavalue !== undefined && props.datavalue !== value) {
+      setValue(props.datavalue);
     }
   }, [props.datavalue]);
 
@@ -120,18 +129,50 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
       };
     }
   }, [sliderRef, disabled, readonly]);
+  var getMarkersItems = (0, _react.useCallback)(function () {
+    var sliderTrack = sliderRef.current;
+    if (!sliderTrack) return;
+    var trackWidth = sliderTrack.offsetWidth - 9 || 0;
+
+    // Calculate tick count based on min/max/step values
+    var tickCount = 0;
+    if (props.minvalue !== undefined && props.maxvalue !== undefined) {
+      tickCount = step > 0 ? Math.floor((props.maxvalue - props.minvalue) / step) + 1 : 0;
+    } else {
+      tickCount = step > 0 ? Math.floor(100 / step) + 1 : 0;
+    }
+
+    // Convert marker label text to object format
+    var labels = (0, _transformedDatasetUtils.convertDataToObject)(markerlabeltext);
+    var newMarkerItems = [];
+    for (var i = 0; i < tickCount; i++) {
+      var _labels$i$dataValue, _labels$i, _labels$i2, _labels$i3;
+      var left = trackWidth / (tickCount - 1) * i;
+      var label = (_labels$i$dataValue = labels === null || labels === void 0 || (_labels$i = labels[i]) === null || _labels$i === void 0 ? void 0 : _labels$i.dataValue) !== null && _labels$i$dataValue !== void 0 ? _labels$i$dataValue : Array.isArray(labels) ? (0, _typeof2["default"])(labels[i]) === "object" && (_labels$i2 = labels[i]) !== null && _labels$i2 !== void 0 && _labels$i2.title ? labels[i].title : labels[i] : "".concat(i);
+      var position = Array.isArray(labels) && (0, _typeof2["default"])(labels[i]) === "object" && (_labels$i3 = labels[i]) !== null && _labels$i3 !== void 0 && _labels$i3.position ? labels[i].position : "up";
+      newMarkerItems.push({
+        label: label,
+        position: position,
+        left: left
+      });
+    }
+    setMarkerItems(newMarkerItems);
+  }, [props.minvalue, props.maxvalue, step, markerlabeltext]);
+  (0, _react.useEffect)(function () {
+    if (showmarkers) {
+      getMarkersItems();
+    }
+  }, [props.minvalue, props.maxvalue, step, markerlabeltext, showmarkers]);
   return __jsx(_Box["default"], {
+    hidden: props.hidden,
     className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty ? "ng-invalid" : "ng-valid"),
-    sx: _objectSpread(_objectSpread({}, styles), {}, {
-      height: height,
-      width: width
-    })
-  }, (minvalue || maxvalue) && __jsx(_react["default"].Fragment, null, __jsx(_Box["default"], {
+    style: styles
+  }, !showmarkers && (minvalue || maxvalue) && __jsx(_react["default"].Fragment, null, __jsx(_Box["default"], {
     component: "span",
-    className: "app-slider-value pull-left"
+    className: "app-slider-value fa-pull-left"
   }, minvalue || minvalue == 0 ? minvalue : null), __jsx(_Box["default"], {
     component: "span",
-    className: "app-slider-value pull-right"
+    className: "app-slider-value fa-pull-right"
   }, maxvalue || maxvalue == 0 ? maxvalue : null)), __jsx(_input.Input, {
     type: "range",
     ref: sliderRef,
@@ -143,22 +184,39 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
     max: maxvalue,
     disabled: disabled // Only disabled when explicitly disabled, not when readonly
     ,
-    "aria-label": name || "slider",
+    "aria-label": arialabel,
     "aria-orientation": "horizontal",
     role: "slider",
     "aria-valuenow": value,
     "aria-valuemin": minvalue,
     "aria-valuemax": maxvalue,
     tabIndex: tabindex,
-    title: hint,
+    title: props.datavalue !== undefined ? String(value) : "undefined",
     onBlur: handleBlur
   }), readonly && __jsx(_Box["default"], {
     className: "readonly-wrapper",
     "aria-readonly": "true"
-  }));
+  }), showmarkers && __jsx(_Box["default"], {
+    className: "marker-container"
+  }, markerItems.map(function (marker, index) {
+    return __jsx("span", {
+      key: index,
+      className: "marker-wrapper",
+      style: {
+        left: marker.left + "px"
+      },
+      title: marker.label
+    }, __jsx("span", {
+      className: "marker-label ".concat(marker.position),
+      title: marker.label
+    }, marker.label), __jsx("span", {
+      className: "marker-dot",
+      title: marker.label
+    }));
+  })));
 }, function (prev, current) {
   // Enhanced memo comparison
-  var keys = ["datavalue", "disabled", "readonly", "minvalue", "maxvalue", "step", "class", "styles"];
+  var keys = ["datavalue", "disabled", "readonly", "minvalue", "maxvalue", "step", "className", "styles", "hidden", "showmarkers", "markerlabeltext"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });