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

package/components/input/select/index.js

@@ -0,0 +1,492 @@
+"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" : ""
+      };
+    }
+    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, {
+              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();
+        }
+      }, _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) {
+      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;
+      }
+    } else if (!datavalue) {
+      if (placeholder) {
+        placeholderOption.textContent = "";
+      }
+      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);
+      } else {
+        var selectedOption = transformedDataset.find(function (item) {
+          return item.selected;
+        });
+        if (selectedOption) {
+          setDisplayValue(selectedOption.label);
+        }
+      }
+    }
+  }, [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);
+      }
+    } 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, 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
+        };
+      }
+    }
+    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("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];
+  });
+});
+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);

package/components/input/select/props.d.ts

@@ -0,0 +1,134 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmSelect component.
+ */
+export interface SelectProps {
+    /**
+     * Whether the select should be focused on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * CSS class name override.
+     */
+    class?: string;
+    /**
+     * The field from the dataset to use as the data value.
+     */
+    datafield?: string;
+    /**
+     * The data source bound to the select widget.
+     */
+    dataset?: unknown[] | string | Record<string, unknown>;
+    /**
+     * Data path for nested data access.
+     */
+    dataPath?: string;
+    /**
+     * The currently selected data value.
+     */
+    datavalue?: string | number | boolean | null | Array<string | number | boolean>;
+    /**
+     * Expression to compute the display text for each option.
+     */
+    displayExpression?: string | ((item: Record<string, unknown>) => string);
+    /**
+     * The field from the dataset to display as the option label.
+     */
+    displayfield?: string;
+    /**
+     * Display label expression for the option text.
+     */
+    displaylabel?: string;
+    /**
+     * The field to group options by.
+     */
+    groupby?: string;
+    /**
+     * Match mode for filtering options.
+     */
+    match?: string;
+    /**
+     * Whether multiple selections are allowed.
+     */
+    multiple?: boolean;
+    /**
+     * The unique name of the select widget (required).
+     */
+    name: string;
+    /**
+     * Field(s) to order the options by.
+     */
+    orderby?: string;
+    /**
+     * Placeholder text shown when no option is selected.
+     */
+    placeholder?: string;
+    /**
+     * Whether the select is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Whether a selection is required.
+     */
+    required?: boolean;
+    /**
+     * Whether the select is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Keyboard shortcut key to focus the select.
+     */
+    shortcutkey?: string;
+    /**
+     * Callback invoked when the selection changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement> | React.SyntheticEvent, widget: Record<string, unknown>, value: string | number | boolean | null | Array<string | number | boolean>, prevDatavalue: string | number | boolean | null | Array<string | number | boolean>) => void;
+    /**
+     * Callback invoked when the select is clicked.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the select receives focus.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked on key down.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when enter is pressed.
+     */
+    onEnter?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse enters the select element.
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse leaves the select element.
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked on key up.
+     */
+    onKeyUp?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked on key press.
+     */
+    onKeyPress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Whether the input has a validation error.
+     */
+    error?: boolean;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+    /**
+     * Display value for the selected option.
+     */
+    displayValue?: string;
+}
+/**
+ * Combined props for the WmSelect component, including base WaveMaker props.
+ */
+export type WmSelectProps = Prettify<SelectProps & BaseProps>;

package/components/input/select/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});