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

package/components/basic/search/index.js

@@ -0,0 +1,1257 @@
+"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.WmSearch = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _image = _interopRequireDefault(require("next/image"));
+var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
+var _isPlainObject = _interopRequireDefault(require("lodash-es/isPlainObject"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _dompurify = _interopRequireDefault(require("dompurify"));
+var _material = require("@mui/material");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
+var _providers = require("./providers");
+var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+var _excluded = ["showclear", "debouncetime", "searchkey", "searchon", "matchmode", "minchars", "limit", "tabindex", "placeholder", "dropup", "readonly", "datavalue", "dataset", "datafield", "displayfield", "disabled", "autofocus", "type", "showsearchicon", "showbackbutton", "imagewidth", "width", "displaylabel", "displayimagesrc", "displayexpression", "datacompletemsg", "loadingdatamsg", "clearsearchiconclass", "backsearchiconclass", "searchiconclass", "navsearchbar", "className", "shortcutkey", "required", "hint", "arialabel", "onBeforeservicecall", "onBlur", "onChange", "onFocus", "onSelect", "onSubmit", "onClear", "onSearch", "onDatasetready", "styles", "name", "listener", "value", "datasetItems", "selectedItems", "displayValue", "groupedData", "handleHeaderClick", "toggleAllHeaders", "isDestroyed", "validation", "casesensitive", "isUpdateRequired", "onQuerySearch", "getDisplayExpression", "standalone", "viewParent", "destroy", "clearSearch"];
+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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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-search input-group";
+var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  var _props$showclear = props.showclear,
+    showclear = _props$showclear === void 0 ? false : _props$showclear,
+    _props$debouncetime = props.debouncetime,
+    debouncetime = _props$debouncetime === void 0 ? 250 : _props$debouncetime,
+    searchkey = props.searchkey,
+    _props$searchon = props.searchon,
+    searchon = _props$searchon === void 0 ? "typing" : _props$searchon,
+    _props$matchmode = props.matchmode,
+    matchmode = _props$matchmode === void 0 ? "contains" : _props$matchmode,
+    _props$minchars = props.minchars,
+    minchars = _props$minchars === void 0 ? 1 : _props$minchars,
+    _props$limit = props.limit,
+    limit = _props$limit === void 0 ? 10 : _props$limit,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Search" : _props$placeholder,
+    _props$dropup = props.dropup,
+    dropup = _props$dropup === void 0 ? false : _props$dropup,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    datavalue = props.datavalue,
+    _props$dataset = props.dataset,
+    dataset = _props$dataset === void 0 ? [] : _props$dataset,
+    _props$datafield = props.datafield,
+    datafield = _props$datafield === void 0 ? "All Fields" : _props$datafield,
+    displayfield = props.displayfield,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$autofocus = props.autofocus,
+    autofocus = _props$autofocus === void 0 ? false : _props$autofocus,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "search" : _props$type,
+    _props$showsearchicon = props.showsearchicon,
+    showsearchicon = _props$showsearchicon === void 0 ? true : _props$showsearchicon,
+    _props$showbackbutton = props.showbackbutton,
+    showbackbutton = _props$showbackbutton === void 0 ? false : _props$showbackbutton,
+    _props$imagewidth = props.imagewidth,
+    imagewidth = _props$imagewidth === void 0 ? "16px" : _props$imagewidth,
+    width = props.width,
+    displaylabel = props.displaylabel,
+    displayimagesrc = props.displayimagesrc,
+    displayexpression = props.displayexpression,
+    _props$datacompletems = props.datacompletemsg,
+    datacompletemsg = _props$datacompletems === void 0 ? "No more data to load" : _props$datacompletems,
+    _props$loadingdatamsg = props.loadingdatamsg,
+    loadingdatamsg = _props$loadingdatamsg === void 0 ? "Loading items..." : _props$loadingdatamsg,
+    _props$clearsearchico = props.clearsearchiconclass,
+    clearsearchiconclass = _props$clearsearchico === void 0 ? "wi wi-close" : _props$clearsearchico,
+    _props$backsearchicon = props.backsearchiconclass,
+    backsearchiconclass = _props$backsearchicon === void 0 ? "wi wi-arrow-left" : _props$backsearchicon,
+    _props$searchiconclas = props.searchiconclass,
+    searchiconclass = _props$searchiconclas === void 0 ? "sl-search wm-sl-l" : _props$searchiconclas,
+    _props$navsearchbar = props.navsearchbar,
+    navsearchbar = _props$navsearchbar === void 0 ? false : _props$navsearchbar,
+    className = props.className,
+    shortcutkey = props.shortcutkey,
+    required = props.required,
+    hint = props.hint,
+    _props$arialabel = props.arialabel,
+    arialabel = _props$arialabel === void 0 ? "Search field" : _props$arialabel,
+    onBeforeservicecall = props.onBeforeservicecall,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    onFocus = props.onFocus,
+    onSelect = props.onSelect,
+    onSubmit = props.onSubmit,
+    onClear = props.onClear,
+    onSearch = props.onSearch,
+    onDatasetready = props.onDatasetready,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
+    name = props.name,
+    listener = props.listener,
+    value = props.value,
+    datasetItems = props.datasetItems,
+    selectedItems = props.selectedItems,
+    displayValue = props.displayValue,
+    initialGroupedData = props.groupedData,
+    handleHeaderClick = props.handleHeaderClick,
+    toggleAllHeaders = props.toggleAllHeaders,
+    isDestroyed = props.isDestroyed,
+    validation = props.validation,
+    _props$casesensitive = props.casesensitive,
+    casesensitive = _props$casesensitive === void 0 ? false : _props$casesensitive,
+    isUpdateRequired = props.isUpdateRequired,
+    onQuerySearch = props.onQuerySearch,
+    getDisplayExpression = props.getDisplayExpression,
+    _props$standalone = props.standalone,
+    standalone = _props$standalone === void 0 ? false : _props$standalone,
+    viewParent = props.viewParent,
+    destroy = props.destroy,
+    clearSearch = props.clearSearch,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var debouncedSearchRef = (0, _react.useRef)(null);
+  var debouncedSearchItemRef = (0, _react.useRef)(null);
+  var getDataSourceRef = (0, _react.useRef)(null);
+  var searchRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var dropdownRef = (0, _react.useRef)(null);
+  var searchButtonRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
+  var initializedRef = (0, _react.useRef)(false);
+  var isLoadingNextPageRef = (0, _react.useRef)(false); // Track if pagination request is in progress
+  var _useState = (0, _react.useState)(typeof datavalue === "string" ? datavalue : ""),
+    query = _useState[0],
+    setQuery = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    loadingItems = _useState3[0],
+    setLoadingItems = _useState3[1];
+  var _useState4 = (0, _react.useState)(false),
+    isScrolled = _useState4[0],
+    setIsScrolled = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
+    page = _useState5[0],
+    setPage = _useState5[1];
+  var _useState6 = (0, _react.useState)([]),
+    formattedDataset = _useState6[0],
+    setFormattedDataset = _useState6[1];
+  var _useState7 = (0, _react.useState)({}),
+    groupedData = _useState7[0],
+    setGroupedData = _useState7[1];
+  var _useState8 = (0, _react.useState)(type === "autocomplete"),
+    listenQuery = _useState8[0],
+    setListenQuery = _useState8[1]; // Only listen for autocomplete type
+  var _useState9 = (0, _react.useState)(false),
+    menuOpen = _useState9[0],
+    setMenuOpen = _useState9[1]; // Track menu open state separately
+  var _useState0 = (0, _react.useState)(true),
+    hasMoreData = _useState0[0],
+    setHasMoreData = _useState0[1]; // Track if there's more data to load
+  var _useState1 = (0, _react.useState)(null),
+    selectedItem = _useState1[0],
+    setSelectedItem = _useState1[1]; // Track the selected item
+  var _useState10 = (0, _react.useState)(undefined),
+    updateRequired = _useState10[0],
+    setUpdateRequired = _useState10[1];
+  var dataProvider = (0, _react.useMemo)(function () {
+    return new _providers.DataProvider();
+  }, []);
+
+  // Note: Don't pass groupby to transformDataset - let getGroupedData handle grouping
+  // transformDataset with groupby produces {key: groupKey, data: [...]} structure
+  // which is incompatible with getGroupedData expecting {dataObject: {...}} structure
+  var normalizedData = (0, _react.useMemo)(function () {
+    return (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, displaylabel, displayexpression, props.orderby, undefined,
+    // Don't pre-group - getGroupedData will handle it
+    props.dataPath);
+  }, [dataset, datafield, displayfield, displaylabel, displayexpression, props.orderby, props.dataPath]);
+  (0, _react.useEffect)(function () {
+    // Handle clearing when datavalue becomes undefined or null
+    if (datavalue === undefined || datavalue === null || datavalue === "") {
+      setQuery("");
+      setSelectedItem(null);
+      setFormattedDataset([]);
+      return;
+    }
+    if (((0, _isPlainObject["default"])(datavalue) || Array.isArray(datavalue)) && searchkey && Object.keys(datavalue).length > 0) {
+      var _value = Array.isArray(datavalue) ? datavalue[0] : datavalue;
+      if (_value) {
+        var key = searchkey.split(",")[0] || searchkey;
+        var item = (getDisplayExpression === null || getDisplayExpression === void 0 ? void 0 : getDisplayExpression(_value)) || _value[key];
+        if (item) {
+          setQuery(item);
+          handleUpdateDatavalue(_value);
+        }
+      }
+    } else if (datafield !== "All Fields" && datafield) {
+      var findItem = normalizedData === null || normalizedData === void 0 ? void 0 : normalizedData.find(function (item) {
+        return item.value === datavalue;
+      });
+      if (findItem) {
+        var _displayValue = (getDisplayExpression === null || getDisplayExpression === void 0 ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem.label;
+        setQuery(_displayValue);
+        handleUpdateDatavalue(findItem);
+      } else {
+        var _debouncedSearchItemR;
+        (_debouncedSearchItemR = debouncedSearchItemRef.current) === null || _debouncedSearchItemR === void 0 || _debouncedSearchItemR.call(debouncedSearchItemRef, datavalue);
+      }
+    }
+    // do not remove this code specifically handled for chips component for clearing the query.
+    else if (!(0, _isPlainObject["default"])(datavalue)) {
+      setQuery(datavalue);
+    }
+  }, [datavalue]);
+
+  // Combine width with other styles
+  var searchStyle = _objectSpread({
+    width: width
+  }, styles);
+
+  // Create dataProvider instance
+
+  // Initialize debounced searchItem function
+  (0, _react.useEffect)(function () {
+    // Cancel previous debounced function if it exists
+    if (debouncedSearchItemRef.current) {
+      debouncedSearchItemRef.current.cancel();
+    }
+
+    // Create debounced version of searchItem
+    debouncedSearchItemRef.current = (0, _debounce["default"])(/*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(value) {
+        var response, key, findItem, _displayValue2;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return dataProvider === null || dataProvider === void 0 ? void 0 : dataProvider.invokeVariable(props, value);
+            case 2:
+              response = _context.sent;
+              if (!(response && response.length > 0)) {
+                _context.next = 9;
+                break;
+              }
+              key = (searchkey === null || searchkey === void 0 ? void 0 : searchkey.split(",")[0]) || searchkey;
+              if (key) {
+                _context.next = 7;
+                break;
+              }
+              return _context.abrupt("return");
+            case 7:
+              findItem = response.find(function (item) {
+                return item[key] == value;
+              });
+              if (findItem && Object.keys(findItem).length > 0) {
+                _displayValue2 = (getDisplayExpression === null || getDisplayExpression === void 0 ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem[key];
+                setQuery(_displayValue2);
+              }
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }(), 200);
+
+    // Cleanup: cancel debounced function on unmount or dependency change
+    return function () {
+      if (debouncedSearchItemRef.current) {
+        debouncedSearchItemRef.current.cancel();
+      }
+    };
+  }, [dataProvider, props, searchkey, getDisplayExpression]);
+
+  // Focus input on mount
+  (0, _react.useEffect)(function () {
+    if (autofocus) {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    }
+    if (listener && listener.onChange) {
+      listener.onChange(name, {
+        clearSearch: handleClearSearch
+      });
+    }
+  }, []);
+
+  // Handle shortcut key
+  (0, _react.useEffect)(function () {
+    var handleShortcutKey = function handleShortcutKey(event) {
+      if (shortcutkey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
+        var _inputRef$current2;
+        event.preventDefault();
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
+      }
+    };
+    window.addEventListener("keydown", handleShortcutKey);
+    return function () {
+      return window.removeEventListener("keydown", handleShortcutKey);
+    };
+  }, [shortcutkey]);
+
+  // Process and prepare dataset for autocomplete type since it list should be loaded immediately when the component is mounted
+  (0, _react.useEffect)(function () {
+    // For autocomplete type load data immediately
+    if (type === "autocomplete") {
+      getDataSource("");
+    }
+    // Update listen query state when type changes
+    setListenQuery(type === "autocomplete");
+  }, [type]);
+  (0, _react.useEffect)(function () {
+    if (type !== "autocomplete" || !(normalizedData !== null && normalizedData !== void 0 && normalizedData.length)) {
+      return;
+    }
+    (0, _react.startTransition)(function () {
+      setFormattedDataset(normalizedData);
+      if (props !== null && props !== void 0 && props.groupby) {
+        setGroupedData(getGroupedData(normalizedData));
+      }
+    });
+  }, [normalizedData]);
+  var getGroupedData = (0, _react.useCallback)(function (data) {
+    if (props !== null && props !== void 0 && props.groupby && data !== null && data !== void 0 && data.length) {
+      var result = {};
+      data.forEach(function (item) {
+        var _item$dataObject;
+        if (!(props !== null && props !== void 0 && props.groupby)) {
+          return;
+        }
+        var groupKey = item[props === null || props === void 0 ? void 0 : props.groupby] || (item === null || item === void 0 || (_item$dataObject = item.dataObject) === null || _item$dataObject === void 0 ? void 0 : _item$dataObject[props === null || props === void 0 ? void 0 : props.groupby]) || "ungrouped";
+        if (!result[groupKey]) {
+          result[groupKey] = [];
+        }
+        result[groupKey].push(item);
+      });
+      return result;
+    }
+    return {
+      ungrouped: data
+    };
+  }, [props === null || props === void 0 ? void 0 : props.groupby]);
+  var getDataSource = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(query, nextPage) {
+      var dataConfig, _isUpdateRequired, _response, dataSet, localDataProvider, response, data, isLastPage;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(nextPage && isLoadingNextPageRef.current)) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return", []);
+          case 2:
+            if (!(!query && (type === "search" || type === "autocomplete" && !nextPage))) {
+              _context2.next = 7;
+              break;
+            }
+            setFormattedDataset([]);
+            setIsOpen(false);
+            setMenuOpen(false);
+            return _context2.abrupt("return", []);
+          case 7:
+            dataConfig = _objectSpread(_objectSpread({}, props), {}, {
+              dataset: normalizedData,
+              datafield: datafield || "All Fields",
+              query: query,
+              matchMode: matchmode,
+              casesensitive: false,
+              searchKey: searchkey,
+              isformfield: false,
+              page: nextPage ? page + 1 : 1,
+              isLocalFilter: true,
+              onBeforeservicecall: onBeforeservicecall,
+              groupby: props.groupby,
+              orderby: props.orderby,
+              limit: limit
+            }); // Set loading flag for pagination requests
+            if (nextPage) {
+              isLoadingNextPageRef.current = true;
+              setPage(function (prev) {
+                return prev + 1;
+              });
+            }
+            _context2.prev = 9;
+            setLoadingItems(true);
+            _isUpdateRequired = updateRequired;
+            if (searchkey && updateRequired === undefined) {
+              _isUpdateRequired = dataProvider.init(dataConfig);
+              setUpdateRequired(_isUpdateRequired);
+            }
+
+            // Handle remote search if required
+            if (!(searchkey && _isUpdateRequired)) {
+              _context2.next = 32;
+              break;
+            }
+            _context2.prev = 14;
+            _context2.next = 17;
+            return dataProvider === null || dataProvider === void 0 ? void 0 : dataProvider.invokeVariable(dataConfig, query);
+          case 17:
+            _response = _context2.sent;
+            if (!_response) {
+              _context2.next = 23;
+              break;
+            }
+            dataSet = Array.isArray(_response) ? _response : [_response];
+            if (!nextPage) {
+              setFormattedDataset(dataSet);
+              setGroupedData(getGroupedData(dataSet));
+            } else {
+              setFormattedDataset(function (prev) {
+                var updatedDataset = [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(dataSet));
+                setGroupedData(getGroupedData(updatedDataset));
+                return updatedDataset;
+              });
+            }
+
+            // Update UI state based on results
+            if (dataSet.length > 0) {
+              setIsOpen(true);
+              setMenuOpen(true);
+            } else {
+              setIsOpen(false);
+              setMenuOpen(false);
+            }
+            return _context2.abrupt("return", dataSet);
+          case 23:
+            _context2.next = 31;
+            break;
+          case 25:
+            _context2.prev = 25;
+            _context2.t0 = _context2["catch"](14);
+            setLoadingItems(false);
+            setIsOpen(false);
+            setMenuOpen(false);
+            // Reset scroll flag on error so user can try again
+            if (nextPage) {
+              setIsScrolled(false);
+            }
+            // TODO: call a toast here
+          case 31:
+            return _context2.abrupt("return", []);
+          case 32:
+            if (!(!normalizedData || normalizedData.length === 0)) {
+              _context2.next = 34;
+              break;
+            }
+            return _context2.abrupt("return", []);
+          case 34:
+            localDataProvider = new _providers.LocalDataProvider();
+            _context2.next = 37;
+            return localDataProvider.filter(dataConfig);
+          case 37:
+            response = _context2.sent;
+            data = response.data, isLastPage = response.isLastPage; // Update hasMoreData state based on results
+            setHasMoreData(data.length > 0 && !isLastPage);
+            if (!nextPage) {
+              setFormattedDataset(data);
+              setGroupedData(getGroupedData(data));
+            } else {
+              setFormattedDataset(function (prev) {
+                var updatedDataset = [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(data));
+                setGroupedData(getGroupedData(updatedDataset));
+                return updatedDataset;
+              });
+            }
+
+            // Show dropdown if we have results
+            if (data.length > 0) {
+              setIsOpen(true);
+              setMenuOpen(true);
+            }
+
+            // Call onDatasetready callback if provided
+            if (onDatasetready && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+              onDatasetready(name != null && listener !== null && listener !== void 0 && listener.Widgets && name in listener.Widgets ? listener.Widgets[name] : props, data);
+            }
+            return _context2.abrupt("return", data);
+          case 46:
+            _context2.prev = 46;
+            _context2.t1 = _context2["catch"](9);
+            console.error("Error fetching data:", _context2.t1);
+            return _context2.abrupt("return", []);
+          case 50:
+            _context2.prev = 50;
+            setLoadingItems(false);
+            // Reset pagination loading flag and scroll state
+            if (nextPage) {
+              isLoadingNextPageRef.current = false;
+              setIsScrolled(false);
+            }
+            return _context2.finish(50);
+          case 54:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[9, 46, 50, 54], [14, 25]]);
+    }));
+    return function (_x2, _x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [dataset, datafield, matchmode, searchkey, limit, onBeforeservicecall, page, formattedDataset, getGroupedData, type, onDatasetready, standalone, listener === null || listener === void 0 ? void 0 : listener.Widgets, name]);
+
+  // Keep ref updated with latest getDataSource
+  (0, _react.useEffect)(function () {
+    getDataSourceRef.current = getDataSource;
+  }, [getDataSource]);
+
+  // Initialize or update the debounced function when dependencies change
+  // Note: Using ref for getDataSource to prevent debounced function recreation on every render
+  (0, _react.useEffect)(function () {
+    // Cancel previous debounced function if it exists
+    if (debouncedSearchRef.current) {
+      debouncedSearchRef.current.cancel();
+    }
+
+    // Create new debounced function - uses ref to always get latest getDataSource
+    debouncedSearchRef.current = (0, _debounce["default"])(/*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(query) {
+        var _getDataSourceRef$cur, data;
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (query) {
+                _context3.next = 5;
+                break;
+              }
+              setFormattedDataset([]);
+              setIsOpen(false);
+              setMenuOpen(false);
+              return _context3.abrupt("return");
+            case 5:
+              if (!(query.length >= minchars)) {
+                _context3.next = 25;
+                break;
+              }
+              _context3.prev = 6;
+              setLoadingItems(true);
+              // Use ref to get latest getDataSource function
+              _context3.next = 10;
+              return (_getDataSourceRef$cur = getDataSourceRef.current) === null || _getDataSourceRef$cur === void 0 ? void 0 : _getDataSourceRef$cur.call(getDataSourceRef, query);
+            case 10:
+              _context3.t0 = _context3.sent;
+              if (_context3.t0) {
+                _context3.next = 13;
+                break;
+              }
+              _context3.t0 = [];
+            case 13:
+              data = _context3.t0;
+              setLoadingItems(false);
+
+              // Update the formatted dataset first
+              setFormattedDataset(data);
+
+              // Then update visibility based on results
+              if (data && data.length > 0) {
+                setIsOpen(true);
+                setMenuOpen(true);
+              } else {
+                setIsOpen(false);
+                setMenuOpen(false);
+              }
+              _context3.next = 25;
+              break;
+            case 19:
+              _context3.prev = 19;
+              _context3.t1 = _context3["catch"](6);
+              console.error("Error in search:", _context3.t1);
+              setLoadingItems(false);
+              setIsOpen(false);
+              setMenuOpen(false);
+            case 25:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, null, [[6, 19]]);
+      }));
+      return function (_x4) {
+        return _ref3.apply(this, arguments);
+      };
+    }(), debouncetime);
+
+    // Cleanup: cancel debounced function on unmount or dependency change
+    return function () {
+      if (debouncedSearchRef.current) {
+        debouncedSearchRef.current.cancel();
+      }
+    };
+  }, [minchars, debouncetime]); // Removed getDataSource - now using ref
+
+  // listen to query change and trigger debounced search
+  (0, _react.useEffect)(function () {
+    if (query && (type === "autocomplete" && listenQuery || type === "search" && searchon === "typing")) {
+      var _debouncedSearchRef$c;
+      // Call the persisted debounced function
+      (_debouncedSearchRef$c = debouncedSearchRef.current) === null || _debouncedSearchRef$c === void 0 || _debouncedSearchRef$c.call(debouncedSearchRef, query);
+    }
+  }, [query, type, listenQuery, searchon]);
+  function clearDataValue() {
+    var _listener$onChange;
+    listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || name, {
+      datavalue: ""
+    });
+  }
+
+  // Simplify handleInputChange to only update query
+  var handleInputChange = function handleInputChange(event) {
+    var _event$target;
+    if (readonly || disabled) {
+      return;
+    }
+    var queryValue = (event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) || "";
+    setQuery(queryValue);
+
+    // Call onChange handlers (standalone apps have no listener.Widgets; chips use arg 3/4)
+    if (onChange && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+      onChange(event, name != null && listener !== null && listener !== void 0 && listener.Widgets && name in listener.Widgets ? listener.Widgets[name] : props, queryValue, queryValue);
+    }
+
+    // Handle empty query - for autocomplete show all options, for search close dropdown
+    if (!queryValue) {
+      setSelectedItem(null);
+      if (onClear && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+        onClear(event, name != null && listener !== null && listener !== void 0 && listener.Widgets && name in listener.Widgets ? listener.Widgets[name] : props);
+      }
+      clearDataValue();
+      // For autocomplete type, show all options when query is cleared
+      if (type === "autocomplete" && normalizedData && normalizedData.length > 0) {
+        setFormattedDataset(normalizedData);
+        if (props !== null && props !== void 0 && props.groupby) {
+          setGroupedData(getGroupedData(normalizedData));
+        }
+        setIsOpen(true);
+        setMenuOpen(true);
+      } else {
+        setFormattedDataset([]);
+        setIsOpen(false);
+        setMenuOpen(false);
+      }
+      return;
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "Enter") {
+      // If dropdown is open and we have items
+      if (menuOpen && formattedDataset.length > 0) {
+        var _dropdownRef$current;
+        var matches = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.querySelectorAll("li")) || [];
+        if (matches.length > 0) {
+          var firstMatch = matches[0];
+          handleMatchSelect(firstMatch);
+        }
+      } else {
+        // For search type with searchon=iconclick or no searchon specified
+        if (type === "search" && (!searchon || searchon === "onsearchiconclick")) {
+          handleSearchClick(event);
+        }
+
+        // Fire onSubmit if provided
+        if (onSubmit && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+          onSubmit(event, name != null && listener !== null && listener !== void 0 && listener.Widgets && name in listener.Widgets ? listener.Widgets[name] : props);
+        }
+        if (props.isSearchInChips) {
+          setQuery("");
+        }
+      }
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      handleFocusNextItem();
+    } else if (event.key === "Escape") {
+      setIsOpen(false);
+      setMenuOpen(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var handler = function handler(event) {
+      // Use currentTarget to always refer to the element on which the event listener is registered
+      var target = event.currentTarget;
+      // Consider it "at the bottom" if within 1px of the bottom (to deal with floating point inaccuracies)
+      if (target.scrollHeight - target.scrollTop - target.clientHeight <= 1) {
+        // Cast a synthetic event that looks like React's UIEvent if needed, otherwise just call with event
+        handleScroll(event);
+      }
+    };
+    if (listRef.current) {
+      listRef.current.addEventListener("scroll", handler);
+    }
+    return function () {
+      if (listRef.current) {
+        listRef.current.removeEventListener("scroll", handler);
+      }
+    };
+  }, [hasMoreData]);
+  var handleClearSearch = function handleClearSearch(event) {
+    var _inputRef$current3;
+    setQuery("");
+    setSelectedItem(null);
+    if (onClear && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+      onClear(event, name != null && listener !== null && listener !== void 0 && listener.Widgets && name in listener.Widgets ? listener.Widgets[name] : props);
+    }
+    clearDataValue();
+    // For autocomplete type, show all options after clearing
+    if (type === "autocomplete" && normalizedData && normalizedData.length > 0) {
+      setFormattedDataset(normalizedData);
+      if (props !== null && props !== void 0 && props.groupby) {
+        setGroupedData(getGroupedData(normalizedData));
+      }
+      setIsOpen(true);
+      setMenuOpen(true);
+    } else {
+      setFormattedDataset([]);
+      setIsOpen(false);
+      setMenuOpen(false);
+    }
+
+    // Focus back on input
+    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
+  };
+  var handleClickAway = function handleClickAway(e) {
+    if (isOpen) {
+      setIsOpen(false);
+      setMenuOpen(false);
+      handleBlur(e);
+    }
+  };
+  var handleFocus = function handleFocus(event) {
+    // For autocomplete type - show all options on focus
+    if (type === "autocomplete") {
+      // If we already have results, show them
+      if (formattedDataset.length > 0 && !selectedItem) {
+        setIsOpen(true);
+        setMenuOpen(true);
+      }
+      // Show all data on focus (use normalizedData which is already computed)
+      else if (normalizedData && normalizedData.length > 0) {
+        setFormattedDataset(normalizedData);
+        // Update grouped data if groupby is specified
+        if (props !== null && props !== void 0 && props.groupby) {
+          setGroupedData(getGroupedData(normalizedData));
+        }
+        setIsOpen(true);
+        setMenuOpen(true);
+      }
+    }
+    if (onFocus && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+      onFocus(event, name != null && listener !== null && listener !== void 0 && listener.Widgets && name in listener.Widgets ? listener.Widgets[name] : props);
+    }
+  };
+  var handleBlur = function handleBlur(event) {
+    // Don't close dropdown immediately to allow click events on menu items
+    setTimeout(function () {
+      var _dropdownRef$current2, _searchButtonRef$curr;
+      var activeElement = document.activeElement;
+      if (document.activeElement !== dropdownRef.current && !((_dropdownRef$current2 = dropdownRef.current) !== null && _dropdownRef$current2 !== void 0 && _dropdownRef$current2.contains(activeElement)) && !((_searchButtonRef$curr = searchButtonRef.current) !== null && _searchButtonRef$curr !== void 0 && _searchButtonRef$curr.contains(activeElement))) {
+        setIsOpen(false);
+        setMenuOpen(false);
+      }
+    }, 200);
+    if (onBlur && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+      onBlur(event, name != null && listener !== null && listener !== void 0 && listener.Widgets && name in listener.Widgets ? listener.Widgets[name] : props);
+    }
+  };
+  var handleSearchClick = function handleSearchClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    // Reset hasMoreData state before new search
+    setHasMoreData(true);
+
+    // For search type with searchon=iconclick or no searchon specified
+    if (type === "search" && (!searchon || searchon === "onsearchiconclick")) {
+      // First set loading state
+      setLoadingItems(true);
+      getDataSource(query);
+    }
+    if (onSearch && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+      onSearch(event, name != null && listener !== null && listener !== void 0 && listener.Widgets && name in listener.Widgets ? listener.Widgets[name] : props);
+    }
+  };
+  var handleFocusNextItem = function handleFocusNextItem() {
+    var _dropdownRef$current3;
+    // For autocomplete type, open dropdown if closed and no item is selected
+    if (type === "autocomplete" && !menuOpen && query.length >= minchars && !selectedItem) {
+      setIsOpen(true);
+      setMenuOpen(true);
+
+      // Load data if not loaded
+      if (formattedDataset.length === 0) {
+        getDataSource(query);
+      }
+    }
+
+    // Focus on first menu item
+    var matches = ((_dropdownRef$current3 = dropdownRef.current) === null || _dropdownRef$current3 === void 0 ? void 0 : _dropdownRef$current3.querySelectorAll("li")) || [];
+    if (matches.length > 0) {
+      var firstMatch = matches[0];
+      firstMatch.focus();
+    }
+  };
+  function handleUpdateDatavalue(item) {
+    var updatedItem = getSelectedItem(item);
+    var value = datafield === "All Fields" ? updatedItem : updatedItem === null || updatedItem === void 0 ? void 0 : updatedItem[datafield];
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.fieldName || name, {
+        datavalue: value
+      });
+    }
+  }
+  function getSelectedItem(item) {
+    var _item$dataObject2;
+    return (item === null || item === void 0 || (_item$dataObject2 = item.dataObject) === null || _item$dataObject2 === void 0 ? void 0 : _item$dataObject2.dataObject) || (item === null || item === void 0 ? void 0 : item.dataObject) || item;
+  }
+  var handleMatchSelect = function handleMatchSelect(match) {
+    if (readonly || disabled) {
+      return;
+    }
+    var itemData = match.getAttribute("data-item");
+    if (!itemData) return;
+    try {
+      var item = JSON.parse(itemData);
+      var _selectedItem = getSelectedItem(item);
+
+      // Set display value in input
+      var displayVal = (getDisplayExpression === null || getDisplayExpression === void 0 ? void 0 : getDisplayExpression(_selectedItem)) || item.displayValue || item.label;
+      if (props.isSearchInChips) {
+        setQuery("");
+      } else {
+        setQuery(displayVal);
+      }
+      setIsOpen(false);
+      setMenuOpen(false);
+      setSelectedItem(item); // Set the selected item
+      setFormattedDataset([]); // Clear the dropdown dataset
+      if (onChange && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+        var _item$dataObject3, _item$dataObject4;
+        onChange(undefined, name != null && listener !== null && listener !== void 0 && listener.Widgets && name in listener.Widgets ? listener.Widgets[name] : props, (_item$dataObject3 = item.dataObject) === null || _item$dataObject3 === void 0 ? void 0 : _item$dataObject3.value, (_item$dataObject4 = item.dataObject) === null || _item$dataObject4 === void 0 ? void 0 : _item$dataObject4.value);
+      }
+      if (!props.isSearchInChips) {
+        handleUpdateDatavalue(item);
+      }
+
+      // Trigger onSelect callback if provided
+      if (onSelect && (standalone || listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets)) {
+        onSelect(new MouseEvent("click"), props, _selectedItem);
+        props.onSubmit && !props.isSearchInChips && props.onSubmit(new MouseEvent("click"), props);
+      }
+    } catch (error) {
+      console.error("Error parsing item data:", error);
+    }
+  };
+  var handleMenuItemClick = function handleMenuItemClick(event, item) {
+    handleMatchSelect(event.currentTarget);
+  };
+  var handleScroll = function handleScroll(event) {
+    if (!loadingItems && !isScrolled && !isLoadingNextPageRef.current && hasMoreData && !selectedItem) {
+      var target = event.target;
+      if (target.scrollHeight - target.scrollTop <= target.clientHeight + 50) {
+        setIsScrolled(true);
+        getDataSource(query, true);
+      }
+    }
+  };
+  var renderGroupDivider = function renderGroupDivider(groupKey) {
+    if (props.groupby && groupKey !== "ungrouped") {
+      return __jsx(_MenuItem["default"], {
+        key: "header-".concat(groupKey),
+        onClick: handleMenuItemClick,
+        dense: true,
+        className: "list-group-header"
+      }, __jsx(_Typography["default"], {
+        variant: "h4",
+        className: "group-title wm-search-group-title"
+      }, groupKey));
+    }
+    return null;
+  };
+  var prepareDataItem = function prepareDataItem(item, index) {
+    // Handle primitive values
+    if ((0, _typeof2["default"])(item) !== "object" || item === null) {
+      var stringValue = String(item);
+      return {
+        key: index,
+        value: item,
+        label: stringValue,
+        displayValue: stringValue,
+        displayImage: null,
+        dataObject: item
+      };
+    }
+
+    // Return if already normalized
+    var isNormalized = ["key", "value", "label", "displayValue"].every(function (prop) {
+      return item.hasOwnProperty(prop);
+    });
+    if (isNormalized) return item;
+
+    // Helper to find first valid field value
+    var findFieldValue = function findFieldValue(fields, fallback) {
+      var _iterator = _createForOfIteratorHelper(fields.filter(Boolean)),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var field = _step.value;
+          if (field && item.hasOwnProperty(field) && item[field] != null && item[field] !== "") {
+            return item[field];
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return fallback;
+    };
+
+    // Get display value with priority: displayexpression > field names > first object value
+    var getDisplayValue = function getDisplayValue() {
+      // Try displayexpression first
+      if (displayexpression && typeof displayexpression === "function") {
+        try {
+          return displayexpression(item.dataObject ? item.dataObject : item);
+        } catch (e) {
+          console.warn("Error executing displayexpression:", e);
+        }
+      }
+
+      // Try predefined field names
+      var displayFields = [displaylabel, displayfield, "label", "name", "title", "text", "displayValue", "display"];
+      var fieldValue = findFieldValue(displayFields);
+      if (fieldValue != null) return String(fieldValue);
+
+      // Fallback to first object value
+      var firstValue = !(props.groupby && props.isSearchInChips) && Object.values(item).find(function (val) {
+        return val != null;
+      });
+      return firstValue ? String(firstValue) : "";
+    };
+    var displayValue = getDisplayValue();
+    var keyFields = [datafield && datafield !== "All Fields" ? datafield : null, "id", "key", "value"];
+    var keyValue = findFieldValue(keyFields, index);
+    var imageSrc = null;
+    if (typeof displayimagesrc === "function") {
+      var _ref4, _item$dataObject$data, _item$dataObject5;
+      imageSrc = displayimagesrc((_ref4 = (_item$dataObject$data = item === null || item === void 0 || (_item$dataObject5 = item.dataObject) === null || _item$dataObject5 === void 0 ? void 0 : _item$dataObject5.dataObject) !== null && _item$dataObject$data !== void 0 ? _item$dataObject$data : item === null || item === void 0 ? void 0 : item.dataObject) !== null && _ref4 !== void 0 ? _ref4 : item);
+    } else {
+      var _item$dataObject6, _item$dataObject7;
+      imageSrc = displayimagesrc && (_item$dataObject6 = item.dataObject) !== null && _item$dataObject6 !== void 0 && _item$dataObject6[displayimagesrc] ? (_item$dataObject7 = item.dataObject) === null || _item$dataObject7 === void 0 ? void 0 : _item$dataObject7[displayimagesrc] : null;
+    }
+    return {
+      key: keyValue,
+      value: item,
+      label: displayValue,
+      displayValue: displayValue,
+      displayImage: imageSrc,
+      dataObject: item
+    };
+  };
+
+  // Add this helper function to highlight matching text
+  var highlightMatch = function highlightMatch(text, query) {
+    if (!query || !text) return text;
+    try {
+      var parts = text.split(new RegExp("(".concat(query, ")"), "gi"));
+      return parts.map(function (part, index) {
+        if (part.toLowerCase() === query.toLowerCase()) {
+          return __jsx("strong", {
+            key: index,
+            className: "wm-search-match-highlight"
+          }, part);
+        }
+        return part;
+      });
+    } catch (e) {
+      // If there's any error in regex, return original text
+      return text;
+    }
+  };
+
+  // Update the renderItem function to use highlighting
+  var renderItem = function renderItem(item, query, index) {
+    // Convert raw data item to our format
+    var dataItem = prepareDataItem(item, index);
+
+    // Get the display text
+    var displayText = typeof dataItem.displayValue === "string" ? _dompurify["default"].sanitize(dataItem.displayValue) : String(dataItem.label);
+    function handleClick(event) {
+      handleMenuItemClick(event, dataItem);
+    }
+    return __jsx(_MenuItem["default"], {
+      key: "item-".concat(index, "-").concat(dataItem.key),
+      onClick: handleClick,
+      "data-item": JSON.stringify(dataItem),
+      dense: true,
+      className: "search-dropdown-item wm-search-dropdown-item"
+    }, __jsx(_material.Box, {
+      component: "a",
+      className: "wm-search-item-link"
+    }, dataItem.displayImage && __jsx(_image["default"], {
+      src: dataItem.displayImage,
+      alt: "",
+      width: parseInt(imagewidth) || 16,
+      height: parseInt(imagewidth) || 16,
+      className: "wm-search-item-image"
+    }), __jsx(_material.Box, {
+      component: "span",
+      className: "",
+      title: displayText
+    }, getDisplayExpression ? highlightMatch(getDisplayExpression(getSelectedItem(item)), query) : highlightMatch(displayText, query))));
+  };
+
+  // Update renderItems to handle non-array cases
+  var renderItems = function renderItems() {
+    var itemCount = 0;
+
+    // If we have grouped data, render by groups
+    if (props.groupby) {
+      var groupKeys = Object.keys(groupedData || {});
+      if (groupKeys.length === 0) {
+        return null;
+      }
+      var renderedItems = [];
+      groupKeys.forEach(function (groupKey) {
+        // Add group divider if needed
+        var divider = renderGroupDivider(groupKey);
+        if (divider) {
+          renderedItems.push(divider);
+        }
+
+        // Add items for this group
+        var groupItems = (groupedData === null || groupedData === void 0 ? void 0 : groupedData[groupKey]) || [];
+        groupItems.forEach(function (item) {
+          if (itemCount < limit) {
+            renderedItems.push(renderItem(item, query, itemCount));
+            itemCount++;
+          }
+        });
+      });
+      return renderedItems;
+    }
+
+    // Ensure formattedDataset is an array before mapping
+    var formattedArray = Array.isArray(formattedDataset) ? formattedDataset : [];
+    return formattedArray.map(function (item, index) {
+      return renderItem(item, query, index);
+    }).filter(Boolean); // Remove null values
+  };
+  var renderClearButton = function renderClearButton() {
+    if (showclear && query !== "") {
+      return __jsx(_material.Button, {
+        className: (0, _clsx["default"])("btn btn-icon form-control-feedback clear-btn show-btn clear-btn", {
+          "show-btn": !!query
+        }),
+        "aria-label": "Clear",
+        onClick: handleClearSearch,
+        size: "small"
+      }, __jsx(_material.Box, {
+        component: "i",
+        className: "app-icon ".concat(clearsearchiconclass)
+      }));
+    }
+    return null;
+  };
+  var renderSearchIcon = function renderSearchIcon() {
+    if (showsearchicon) {
+      return __jsx(_material.Button, {
+        ref: searchButtonRef,
+        className: "app-search-button btn btn-icon",
+        title: "search",
+        type: "button",
+        onClick: handleSearchClick,
+        disabled: disabled,
+        size: "small"
+      }, __jsx(_material.Box, {
+        component: "i",
+        className: "app-icon ".concat(searchiconclass)
+      }));
+    }
+    return null;
+  };
+  var renderBackButton = function renderBackButton() {
+    if (showbackbutton && backsearchiconclass) {
+      return __jsx(_IconButton["default"], {
+        className: "back-btn",
+        "aria-label": "Back",
+        onClick: handleClearSearch,
+        size: "small"
+      }, __jsx(_material.Box, {
+        component: "span",
+        className: "app-icon ".concat(backsearchiconclass)
+      }), __jsx(_material.Box, {
+        component: "span",
+        className: "sr-only"
+      }, "Back button"));
+    }
+    return null;
+  };
+  var renderLoadingIndicator = function renderLoadingIndicator() {
+    if (loadingItems) {
+      return __jsx(_Typography["default"], {
+        variant: "body2",
+        className: "dropdown-status"
+      }, __jsx("span", {
+        className: "wm-search-loading-spinner"
+      }, __jsx(_CircularProgress["default"], {
+        size: 20,
+        color: "primary"
+      })), loadingdatamsg);
+    }
+    return null;
+  };
+  var renderNoResultsMessage = function renderNoResultsMessage() {
+    if (!loadingItems && formattedDataset.length === 0 && query !== "" && !selectedItem) {
+      return __jsx(_Typography["default"], {
+        variant: "body2",
+        className: "dropdown-status wm-search-dropdown-message"
+      }, "No results found");
+    }
+    return null;
+  };
+  var renderCompletionMessage = function renderCompletionMessage() {
+    // Show "No more data to load" message when there are results but no more data to load
+    if (!loadingItems && formattedDataset.length > 0 && !selectedItem) {
+      return __jsx(_Typography["default"], {
+        variant: "body2",
+        className: "dropdown-status wm-search-dropdown-completion"
+      }, datacompletemsg);
+    }
+    return null;
+  };
+  var renderDropdown = function renderDropdown() {
+    var _searchRef$current;
+    // Don't show dropdown if an item is selected or if menu is not open
+    if (!isOpen || !menuOpen || selectedItem) return null;
+    return __jsx(_Popper["default"], {
+      open: isOpen && menuOpen,
+      anchorEl: inputRef.current,
+      placement: dropup ? "top-start" : "bottom-start",
+      className: "wm-search-popper",
+      style: {
+        width: (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.clientWidth
+      }
+    }, __jsx(_Paper["default"], {
+      elevation: 3,
+      className: "search-dropdown-paper"
+    }, __jsx(_material.Box, {
+      component: "div",
+      ref: dropdownRef,
+      onScroll: handleScroll,
+      className: "search-dropdown-container wm-search-dropdown-scroll"
+    }, __jsx(_MenuList["default"], {
+      className: "search-menu-list app-search dropdown-menu",
+      ref: listRef
+    }, renderItems(), renderNoResultsMessage(), renderLoadingIndicator(), renderCompletionMessage()))));
+  };
+
+  // Only include safe props in restProps to avoid React warnings
+  var safeRestProps = Object.entries(restProps).reduce(function (acc, _ref5) {
+    var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+      key = _ref6[0],
+      value = _ref6[1];
+    // Filter out any props that might cause DOM warnings
+    var invalidProps = ["validation", "datasetItems", "selectedItems", "displayValue", "onchange", "onblur", "groupedData", "handleHeaderClick", "toggleAllHeaders", "isDestroyed"];
+    if (!invalidProps.includes(key)) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+  return __jsx(_ClickAwayListener["default"], {
+    onClickAway: handleClickAway
+  }, __jsx(_material.Box, (0, _extends2["default"])({
+    component: "div",
+    ref: searchRef,
+    style: searchStyle
+    // Don't pass tabIndex to div when it contains focusable elements
+  }, safeRestProps, {
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    "data-search-type": type,
+    type: type,
+    "aria-readonly": readonly
+  }), renderBackButton(), __jsx(_material.Box, {
+    component: "span",
+    className: "sr-only"
+  }, "Back button"), __jsx(_material.Box, {
+    component: "input",
+    name: name,
+    className: (0, _clsx["default"])("app-textbox form-control list-of-objs app-search-input"),
+    type: "text",
+    "focus-target": "true",
+    value: query,
+    onChange: !readonly ? handleInputChange : undefined,
+    disabled: disabled,
+    tabIndex: tabindex,
+    ref: inputRef,
+    "aria-label": arialabel,
+    autoComplete: "off",
+    title: query,
+    placeholder: placeholder,
+    readOnly: readonly,
+    onBlur: function onBlur(e) {
+      return handleBlur(e);
+    },
+    onFocus: function onFocus(e) {
+      return handleFocus(e);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleKeyDown(e);
+    }
+  }), type === "autocomplete" ? null : __jsx(_material.Box, {
+    component: "span",
+    className: "input-group-addon"
+  }, __jsx(_material.Box, {
+    component: "form",
+    noValidate: true,
+    autoComplete: "off"
+  }, renderSearchIcon())), __jsx(_material.Box, {
+    component: "span",
+    className: "sr-only"
+  }, "Clear button"), showclear && showclear !== "false" ? renderClearButton() : null, renderDropdown()));
+});
+var WmSearchStandalone = exports.WmSearch = (0, _withStandalone["default"])((0, _withFormController["default"])(Search));
+Search.displayName = "WmSearch";
+
+/**
+ * The WmSearch component provides a search input with support for autocomplete,
+ * local and remote data filtering.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-search--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-search--docs)
+ *
+ * @param props - {@link WmSearchProps}
+ */
+var _default = exports["default"] = (0, _withFormController["default"])((0, _withBaseWrapper["default"])(Search));