@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.314

package/components/input/select/index.js

@@ -1,492 +1,437 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmSelect = 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"));
-var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-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-select-wrapper ng-dirty";
-var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
-  var _ref2, _key;
-  var autofocus = props.autofocus,
-    className = props.className,
-    _props$datafield = props.datafield,
-    datafield = _props$datafield === void 0 ? "key" : _props$datafield,
-    dataset = props.dataset,
-    datavalue = props.datavalue,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    displayExpression = props.displayExpression,
-    displaylabel = props.displaylabel,
-    _props$displayfield = props.displayfield,
-    displayfield = _props$displayfield === void 0 ? "value" : _props$displayfield,
-    groupby = props.groupby,
-    hint = props.hint,
-    dataPath = props.dataPath,
-    arialabel = props.arialabel,
-    _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? false : _props$multiple,
-    name = props.name,
-    styles = props.styles,
-    orderby = props.orderby,
-    placeholder = props.placeholder,
-    _props$readonly = props.readonly,
-    readonly = _props$readonly === void 0 ? false : _props$readonly,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    shortcutkey = props.shortcutkey,
-    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,
-    onFocus = props.onFocus,
-    onKeyDown = props.onKeyDown,
-    onEnter = props.onEnter,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    onKeyUp = props.onKeyUp;
-  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];
-  var _useState2 = (0, _react.useState)(multiple ? Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [] : datavalue),
-    localDatavalue = _useState2[0],
-    setLocalDatavalue = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    isTouched = _useState3[0],
-    setIsTouched = _useState3[1];
-  var _useState4 = (0, _react.useState)(false),
-    showError = _useState4[0],
-    setShowError = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    isDirty = _useState5[0],
-    setIsDirty = _useState5[1];
-  var _useState6 = (0, _react.useState)(datavalue),
-    prevDatavalue = _useState6[0],
-    setPrevDatavalue = _useState6[1];
-  // 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 === "") {
-      return {
-        isValid: !required,
-        message: required ? "This field is required" : ""
-      };
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    if (!value || !value.toString().trim()) {
-      return {
-        isValid: !required,
-        message: required ? "This field is required" : ""
-      };
-    }
-    return {
-      isValid: true,
-      message: ""
-    };
-  }, [required]);
-
-  // Handle value change
-  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;
-            });
-            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, {
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import NativeSelect from "@mui/material/NativeSelect";
+import { transformDataset } from "../../../utils/transformedDataset-utils";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import withFormController from "../../data/form/form-controller/withFormController";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLASS = "app-select-wrapper ng-dirty";
+const WmSelect = React.memo(
+  (props) => {
+    var _a, _b;
+    const {
+      autofocus,
+      className,
+      datafield = "key",
+      dataset,
+      datavalue,
+      disabled = false,
+      displayExpression,
+      displaylabel,
+      displayfield = "value",
+      groupby,
+      hint,
+      dataPath,
+      arialabel,
+      multiple = false,
+      name,
+      styles,
+      orderby,
+      placeholder,
+      readonly = false,
+      required = false,
+      shortcutkey,
+      listener,
+      tabindex = 0,
+      match,
+      onClick,
+      onChange,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      onEnter,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyUp
+    } = props;
+    const selectRef = useRef(null);
+    const lastDatavalueRef = useRef(datavalue);
+    const externalDatavalueRef = useRef(null);
+    const [displayValue, setDisplayValue] = useState("");
+    const [localDatavalue, setLocalDatavalue] = useState(
+      multiple ? Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [] : datavalue
+    );
+    const [isTouched, setIsTouched] = useState(false);
+    const [showError, setShowError] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [prevDatavalue, setPrevDatavalue] = useState(datavalue);
+    const resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
+    const transformedDataset = transformDataset(
+      resolvedDataset,
+      datafield,
+      displayfield,
+      displaylabel,
+      displayExpression,
+      orderby,
+      groupby,
+      dataPath,
+      "",
+      match
+    );
+    const validateInput = useCallback(
+      (value) => {
+        if (value === "") {
+          return { isValid: !required, message: required ? "This field is required" : "" };
+        }
+        if (!value || !value.toString().trim()) {
+          return { isValid: !required, message: required ? "This field is required" : "" };
+        }
+        return { isValid: true, message: "" };
+      },
+      [required]
+    );
+    const handleValueChange = async (event) => {
+      var _a2, _b2, _c;
+      if (props.readonly || disabled) {
+        return;
+      }
+      const newValue = multiple ? Array.from(event.target.selectedOptions, (option) => option.value) : event.target.selectedIndex;
+      if (multiple) {
+        const filteredValues = newValue.filter((val) => val !== placeholder);
+        setLocalDatavalue(filteredValues);
+        const selectedTexts = Array.from(
+          event.target.selectedOptions,
+          (option) => option.text
+        ).filter((text) => text !== placeholder);
+        setDisplayValue(selectedTexts.join(", "));
+        if (listener == null ? void 0 : listener.onChange) {
+          if (filteredValues.length === 0) {
+            await 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;
-            });
+          } else {
+            const findItem = (val) => transformedDataset.find(
+              (item) => typeof item.value === "object" ? String(item.key) === String(val) : String(item.value) === String(val)
+            );
+            const selectedValues = filteredValues.map(
+              (val) => {
+                const item = findItem(val);
+                return item ? item.value : val;
+              }
+            );
+            const selectedDisplayValues = filteredValues.map(
+              (val) => {
+                const 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, {
+          }
+        }
+      } else {
+        setLocalDatavalue(event.target.value);
+        setDisplayValue(((_a2 = event.target.options[event.target.selectedIndex]) == null ? void 0 : _a2.text) || "");
+        if (listener == null ? void 0 : listener.onChange) {
+          if (newValue === 0 || event.target.value === placeholder) {
+            await listener.onChange(props.fieldName || name, {
               datavalue: "",
               displayValue: ""
             });
-          case 26:
-            _context.next = 30;
-            break;
-          case 28:
-            _context.next = 30;
-            return listener.onChange(props.fieldName || name, {
+          } else {
+            await 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();
+          }
         }
-      }, _callee);
-    }));
-    return function handleValueChange(_x) {
-      return _ref.apply(this, arguments);
+      }
+      if (onChange)
+        onChange == null ? void 0 : onChange(
+          event,
+          (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name],
+          ((_c = transformedDataset == null ? void 0 : transformedDataset[newValue - 1]) == null ? void 0 : _c.value) || "en",
+          prevDatavalue
+        );
+      setPrevDatavalue(newValue);
     };
-  }();
-  var handleBlur = function handleBlur(e) {
-    var newValue = e.target.value;
-    var selectedItem = transformedDataset.find(function (item) {
-      return String(item.value) === newValue;
-    });
-    var validation = validateInput(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value);
-    setIsTouched(true);
-    if (!validation.isValid) {
-      setIsDirty(true);
-    } else {
-      setIsDirty(false);
-    }
-    setShowError(!validation.isValid);
-    onBlur === null || onBlur === void 0 || onBlur(e, props);
-  };
-
-  // Handle floating label behavior
-  var handleFloatingLabel = (0, _react.useCallback)(function (event) {
-    var _selectRef$current, _selectRef$current2, _selectRef$current3;
-    var captionEl = (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.closest(".app-composite-widget.caption-floating");
-    if (!captionEl) return;
-    var placeholderOption = (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.querySelector("#placeholderOption");
-    if (!placeholderOption) return;
-    if (event.type === "mousedown" && (!datavalue || datavalue && ((_selectRef$current3 = selectRef.current) === null || _selectRef$current3 === void 0 || (_selectRef$current3 = _selectRef$current3.querySelector("option:checked")) === null || _selectRef$current3 === void 0 ? void 0 : _selectRef$current3.textContent) === "")) {
-      if (placeholder) {
-        placeholderOption.textContent = placeholder;
+    const handleBlur = (e) => {
+      const newValue = e.target.value;
+      const selectedItem = transformedDataset.find((item) => String(item.value) === newValue);
+      const validation = validateInput(selectedItem == null ? void 0 : selectedItem.value);
+      setIsTouched(true);
+      if (!validation.isValid) {
+        setIsDirty(true);
+      } else {
+        setIsDirty(false);
+      }
+      setShowError(!validation.isValid);
+      onBlur == null ? void 0 : onBlur(e, props);
+    };
+    const handleFloatingLabel = useCallback(
+      (event) => {
+        var _a2, _b2, _c, _d;
+        const captionEl = (_a2 = selectRef.current) == null ? void 0 : _a2.closest(".app-composite-widget.caption-floating");
+        if (!captionEl) return;
+        const placeholderOption = (_b2 = selectRef.current) == null ? void 0 : _b2.querySelector("#placeholderOption");
+        if (!placeholderOption) return;
+        if (event.type === "mousedown" && (!datavalue || datavalue && ((_d = (_c = selectRef.current) == null ? void 0 : _c.querySelector("option:checked")) == null ? void 0 : _d.textContent) === "")) {
+          if (placeholder) {
+            placeholderOption.textContent = placeholder;
+          }
+        } else if (!datavalue) {
+          if (placeholder) {
+            placeholderOption.textContent = "";
+          }
+          captionEl.classList.remove("float-active");
+        }
+      },
+      [datavalue, placeholder]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === "Enter") {
+          onEnter == null ? void 0 : onEnter(event);
+        }
+        onKeyDown == null ? void 0 : onKeyDown(event);
+      },
+      [onEnter, onKeyDown]
+    );
+    useEffect(() => {
+      if (datavalue !== void 0) {
+        if (multiple) {
+          const normalizedValue = Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [];
+          const selectedOptions = normalizedValue.map(
+            (val) => transformedDataset.find((item) => String(item.value) === String(val))
+          );
+          const displayText = selectedOptions.map((option) => option == null ? void 0 : option.label).join(", ");
+          setDisplayValue(displayText);
+        } else {
+          const selectedOption = transformedDataset.find((item) => item.selected);
+          if (selectedOption) {
+            setDisplayValue(selectedOption.label);
+          }
+        }
       }
-    } else if (!datavalue) {
-      if (placeholder) {
-        placeholderOption.textContent = "";
+    }, [transformedDataset, datavalue, multiple]);
+    useEffect(() => {
+      var _a2;
+      if (lastDatavalueRef.current !== datavalue) {
+        lastDatavalueRef.current = datavalue;
+      } else {
+        return;
       }
-      captionEl.classList.remove("float-active");
-    }
-  }, [datavalue, placeholder]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === "Enter") {
-      onEnter === null || onEnter === void 0 || onEnter(event);
-    }
-    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-  }, [onEnter, onKeyDown]);
-  (0, _react.useEffect)(function () {
-    if (datavalue !== undefined) {
       if (multiple) {
-        var normalizedValue = Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [];
-        var selectedOptions = normalizedValue.map(function (val) {
-          return transformedDataset.find(function (item) {
-            return String(item.value) === String(val);
-          });
-        });
-        var displayText = selectedOptions.map(function (option) {
-          return option === null || option === void 0 ? void 0 : option.label;
-        }).join(", ");
-        setDisplayValue(displayText);
+        const normalizedValue = Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [];
+        if (JSON.stringify(normalizedValue) !== JSON.stringify(localDatavalue)) {
+          setLocalDatavalue(normalizedValue);
+        }
       } else {
-        var selectedOption = transformedDataset.find(function (item) {
-          return item.selected;
-        });
-        if (selectedOption) {
-          setDisplayValue(selectedOption.label);
+        if (datavalue !== localDatavalue) {
+          let computedDisplayValue = "";
+          if (typeof datavalue === "object" && datavalue !== null) {
+            const matchingItem = transformedDataset.find(
+              (item) => item.value === datavalue || JSON.stringify(item.value) === JSON.stringify(datavalue)
+            );
+            computedDisplayValue = (matchingItem == null ? void 0 : matchingItem.label) || "";
+          } else {
+            const matchingItem = transformedDataset.find((item) => item.value == datavalue);
+            computedDisplayValue = (matchingItem == null ? void 0 : matchingItem.label) || "";
+          }
+          externalDatavalueRef.current = datavalue;
+          setLocalDatavalue(datavalue);
+          (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, props.fieldName || name, {
+            datavalue,
+            displayValue: computedDisplayValue
+          });
         }
       }
-    }
-  }, [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)) {
-        setLocalDatavalue(normalizedValue);
+    }, [datavalue, multiple, transformedDataset]);
+    const handleClick = useCallback(
+      (event) => {
+        onClick == null ? void 0 : onClick(event);
+      },
+      [onClick]
+    );
+    const handleFocus = useCallback(
+      (event) => {
+        onFocus == null ? void 0 : onFocus(event);
+      },
+      [onFocus]
+    );
+    const handleMouseEnter = useCallback(
+      (event) => {
+        onMouseEnter == null ? void 0 : onMouseEnter(event);
+      },
+      [onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (event) => {
+        onMouseLeave == null ? void 0 : onMouseLeave(event);
+      },
+      [onMouseLeave]
+    );
+    const handleKeyUp = useCallback(
+      (event) => {
+        onKeyUp == null ? void 0 : onKeyUp(event);
+      },
+      [onKeyUp]
+    );
+    const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+      onChange: handleValueChange,
+      onBlur: (e) => {
+        handleFloatingLabel(e);
+        handleBlur(e);
       }
-    } 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) || "";
+    }, onFocus ? { onFocus: handleFocus } : {}), onKeyDown ? { onKeyDown: handleKeyDown } : {}), onKeyUp ? { onKeyUp: handleKeyUp } : {}), onClick ? { onClick: handleClick } : {}), onMouseEnter ? { onMouseEnter: handleMouseEnter } : {}), onMouseLeave ? { onMouseLeave: handleMouseLeave } : {});
+    const computedSelectValue = useMemo(() => {
+      if (multiple) {
+        return Array.isArray(localDatavalue) ? localDatavalue : [];
+      }
+      if (typeof localDatavalue === "object" && localDatavalue !== null) {
+        const matchingItem2 = transformedDataset.find(
+          (item) => item.value === localDatavalue || JSON.stringify(item.value) === JSON.stringify(localDatavalue)
+        );
+        if (matchingItem2) {
+          return { key: matchingItem2.key, displayValue: matchingItem2.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, transformedDataset]);
-  var handleClick = (0, _react.useCallback)(function (event) {
-    onClick === null || onClick === void 0 || onClick(event);
-  }, [onClick]);
-  var handleFocus = (0, _react.useCallback)(function (event) {
-    onFocus === null || onFocus === void 0 || onFocus(event);
-  }, [onFocus]);
-  var handleMouseEnter = (0, _react.useCallback)(function (event) {
-    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event);
-  }, [onMouseEnter]);
-  var handleMouseLeave = (0, _react.useCallback)(function (event) {
-    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event);
-  }, [onMouseLeave]);
-  var handleKeyUp = (0, _react.useCallback)(function (event) {
-    onKeyUp === null || onKeyUp === void 0 || onKeyUp(event);
-  }, [onKeyUp]);
-  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    onChange: handleValueChange,
-    onBlur: function onBlur(e) {
-      handleFloatingLabel(e);
-      handleBlur(e);
-    }
-  }, onFocus ? {
-    onFocus: handleFocus
-  } : {}), onKeyDown ? {
-    onKeyDown: handleKeyDown
-  } : {}), onKeyUp ? {
-    onKeyUp: handleKeyUp
-  } : {}), onClick ? {
-    onClick: handleClick
-  } : {}), onMouseEnter ? {
-    onMouseEnter: handleMouseEnter
-  } : {}), 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
-        };
+      const matchingItem = transformedDataset.find((item) => item.value == localDatavalue);
+      const displayLabel = (matchingItem == null ? void 0 : matchingItem.label) || "";
+      return { key: localDatavalue, displayValue: displayLabel };
+    }, [localDatavalue, transformedDataset, multiple]);
+    const prevComputedValueRef = useRef(null);
+    useEffect(() => {
+      var _a2;
+      if (multiple) return;
+      const currentValue = computedSelectValue;
+      const isExternalChange = externalDatavalueRef.current !== null && (localDatavalue === externalDatavalueRef.current || typeof localDatavalue === "object" && typeof externalDatavalueRef.current === "object" && JSON.stringify(localDatavalue) === JSON.stringify(externalDatavalueRef.current));
+      if (externalDatavalueRef.current !== null) {
+        if (isExternalChange) {
+          externalDatavalueRef.current = null;
+        }
+        prevComputedValueRef.current = currentValue;
+        return;
       }
-    }
-    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;
+      const prevValue = prevComputedValueRef.current;
+      if (currentValue.displayValue && (!prevValue || prevValue.key !== currentValue.key || prevValue.displayValue !== currentValue.displayValue)) {
+        (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, props.fieldName || name, {
+          displayValue: currentValue.displayValue
+        });
       }
       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("div", {
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className)
-  }, __jsx(_NativeSelect["default"], (0, _extends2["default"])({
-    key: name,
-    hidden: props.hidden,
-    name: name,
-    IconComponent: function IconComponent() {
-      return null;
-    },
-    className: (0, _clsx["default"])(isTouched ? "ng-touched" : "ng-untouched", isDirty ? "ng-invalid" : "ng-valid", className, "wm-native-select-root"),
-    value: multiple ? computedSelectValue : (_ref2 = (_key = computedSelectValue.key) !== null && _key !== void 0 ? _key : placeholder) !== null && _ref2 !== void 0 ? _ref2 : ""
-  }, events, {
-    sx: {
-      "& .MuiNativeSelect-select": {
-        WebkitAppearance: (styles === null || styles === void 0 ? void 0 : styles.WebkitAppearance) || "auto"
-      },
-      "& .MuiNativeSelect-icon": {
-        display: "none"
-      }
-    },
-    inputProps: {
-      id: name,
-      name: name,
-      required: required,
-      autoFocus: autofocus,
-      tabIndex: tabindex,
-      "aria-label": arialabel,
-      multiple: multiple,
-      disabled: disabled,
-      "aria-readonly": readonly,
-      className: "app-select ".concat(className, " ").concat(DEFAULT_CLASS, "  form-control ng-valid ng-touched ng-dirty wm-app "),
-      accessKey: shortcutkey,
-      title: hint,
-      style: styles
-    },
-    readOnly: readonly
-  }), __jsx("option", {
-    value: placeholder,
-    id: "placeholderOption",
-    key: "placeholder-text",
-    hidden: !placeholder
-  }, placeholder), groupby && transformedDataset ? transformedDataset.map(function (group) {
-    return __jsx("optgroup", {
-      key: group.key,
-      label: group.key
-    }, group.data.map(function (item) {
-      return __jsx("option", {
-        key: "".concat(group.key, "-").concat(item.key),
-        value: (0, _typeof2["default"])(item.value) === "object" ? item.key : item.value
-      }, item.label);
-    }));
-  }) : transformedDataset && transformedDataset.map(function (item) {
-    return __jsx("option", {
-      key: item.key,
-      value: (0, _typeof2["default"])(item.value) === "object" ? item.key : item.value
-    }, item.label);
-  })));
-}, function (prevProps, nextProps) {
-  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];
-  });
-});
+    }, [computedSelectValue, multiple, listener, props.fieldName, name, localDatavalue]);
+    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS, className), children: /* @__PURE__ */ jsxs(
+      NativeSelect,
+      __spreadProps(__spreadValues({
+        hidden: props.hidden,
+        name,
+        IconComponent: () => null,
+        className: clsx(
+          isTouched ? "ng-touched" : "ng-untouched",
+          isDirty ? "ng-invalid" : "ng-valid",
+          className,
+          "wm-native-select-root"
+        ),
+        value: multiple ? computedSelectValue : (_b = (_a = computedSelectValue.key) != null ? _a : placeholder) != null ? _b : ""
+      }, events), {
+        sx: {
+          "& .MuiNativeSelect-select": {
+            WebkitAppearance: (styles == null ? void 0 : styles.WebkitAppearance) || "auto"
+          },
+          "& .MuiNativeSelect-icon": {
+            display: "none"
+          }
+        },
+        inputProps: {
+          id: name,
+          name,
+          required,
+          autoFocus: autofocus,
+          tabIndex: tabindex,
+          "aria-label": arialabel,
+          multiple,
+          disabled,
+          "aria-readonly": readonly,
+          className: `app-select ${className} ${DEFAULT_CLASS}  form-control ng-valid ng-touched ng-dirty wm-app `,
+          accessKey: shortcutkey,
+          title: hint,
+          style: styles
+        },
+        readOnly: readonly,
+        children: [
+          /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: placeholder,
+              id: "placeholderOption",
+              hidden: !placeholder,
+              children: placeholder
+            },
+            "placeholder-text"
+          ),
+          groupby && transformedDataset ? transformedDataset.map((group) => /* @__PURE__ */ jsx("optgroup", { label: group.key, children: group.data.map((item) => /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: typeof item.value === "object" ? item.key : item.value,
+              children: item.label
+            },
+            `${group.key}-${item.key}`
+          )) }, group.key)) : transformedDataset && transformedDataset.map((item) => /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: typeof item.value === "object" ? item.key : item.value,
+              children: item.label
+            },
+            item.key
+          ))
+        ]
+      }),
+      name
+    ) });
+  },
+  (prevProps, nextProps) => {
+    const keys = [
+      "dataset",
+      "datafield",
+      "displayfield",
+      "displaylabel",
+      "displayExpression",
+      "orderby",
+      "groupby",
+      "dataPath",
+      "arialabel",
+      "multiple",
+      "styles",
+      "autofocus",
+      "disabled",
+      "readonly",
+      "required",
+      "datavalue",
+      "hidden",
+      "className"
+    ];
+    return keys.every((key) => prevProps[key] === nextProps[key]);
+  }
+);
 WmSelect.displayName = "WmSelect";
-var WithForm = (0, _withFormController["default"])(WmSelect);
-var WmSelectStandalone = exports.WmSelect = (0, _withStandalone["default"])(WithForm);
-/**
- * The WmSelect component provides a dropdown select input with single and multi-select support.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-select--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-select--docs)
- *
- * @param props - {@link WmSelectProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);
+const WithForm = withFormController(WmSelect);
+const WmSelectStandalone = withStandalone(WithForm);
+var select_default = withBaseWrapper(WithForm);
+export {
+  WmSelectStandalone as WmSelect,
+  select_default as default
+};