@wavemaker/react-runtime 11.14.2-1.245 → 12.0.0-next.28533

package/components/basic/search/index.js

@@ -17,6 +17,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _image = _interopRequireDefault(require("next/image"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -28,11 +30,10 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 var _dompurify = _interopRequireDefault(require("dompurify"));
 var _material = require("@mui/material");
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
-var _lodash = require("lodash");
 var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
 var _providers = require("./providers");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
-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", "class", "shortcutkey", "required", "hint", "arialabel", "onBeforeservicecall", "onBlur", "onChange", "onFocus", "onSelect", "onSubmit", "onClear", "onSearch", "onDatasetready", "conditionalstyles", "styles", "name", "listener", "value", "datasetItems", "selectedItems", "displayValue", "groupedData", "handleHeaderClick", "toggleAllHeaders", "isDestroyed", "validation", "casesensitive", "isUpdateRequired", "onQuerySearch"];
+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", "class", "shortcutkey", "required", "hint", "arialabel", "onBeforeservicecall", "onBlur", "onChange", "onFocus", "onSelect", "onSubmit", "onClear", "onSearch", "onDatasetready", "conditionalstyles", "styles", "name", "listener", "value", "datasetItems", "selectedItems", "displayValue", "groupedData", "handleHeaderClick", "toggleAllHeaders", "isDestroyed", "validation", "casesensitive", "isUpdateRequired", "onQuerySearch", "getDisplayExpression"];
 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; } } }; }
@@ -131,10 +132,18 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     casesensitive = _props$casesensitive === void 0 ? false : _props$casesensitive,
     isUpdateRequired = props.isUpdateRequired,
     onQuerySearch = props.onQuerySearch,
+    getDisplayExpression = props.getDisplayExpression,
     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];
@@ -171,10 +180,52 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   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 () {
-    // do not remove this code specifically handled for chips component for clearing the query.
-    if (datavalue == "") {
+    // 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]);
 
@@ -184,9 +235,61 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, styles), conditionalstyles);
 
   // Create dataProvider instance
-  var dataProvider = (0, _react.useMemo)(function () {
-    return new _providers.DataProvider();
-  }, []);
+
+  // 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 () {
@@ -194,6 +297,11 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       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
@@ -217,20 +325,29 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     if (type === "autocomplete") {
       getDataSource("");
     }
-  }, [type]);
-
-  // Update listen query state when type changes
-  (0, _react.useEffect)(function () {
+    // 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] || "ungrouped";
+        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] = [];
         }
@@ -243,22 +360,27 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     };
   }, [props === null || props === void 0 ? void 0 : props.groupby]);
   var getDataSource = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(query, nextPage) {
-      var normalizedData, dataConfig, _isUpdateRequired, _response, dataSet, localDataProvider, response, data, isLastPage;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    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))) {
-              _context.next = 5;
+              _context2.next = 7;
               break;
             }
             setFormattedDataset([]);
             setIsOpen(false);
             setMenuOpen(false);
-            return _context.abrupt("return", []);
-          case 5:
-            normalizedData = (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, displaylabel, displayexpression, props.orderby, props.groupby, props.dataPath);
-            dataConfig = {
+            return _context2.abrupt("return", []);
+          case 7:
+            dataConfig = _objectSpread(_objectSpread({}, props), {}, {
               dataset: normalizedData,
               datafield: datafield || "All Fields",
               query: query,
@@ -266,40 +388,51 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
               casesensitive: false,
               searchKey: searchkey,
               isformfield: false,
-              limit: limit,
               page: nextPage ? page + 1 : 1,
               isLocalFilter: true,
-              onBeforeservicecall: onBeforeservicecall
-            };
-            _context.prev = 7;
+              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(props);
+              _isUpdateRequired = dataProvider.init(dataConfig);
               setUpdateRequired(_isUpdateRequired);
             }
 
             // Handle remote search if required
             if (!(searchkey && _isUpdateRequired)) {
-              _context.next = 31;
+              _context2.next = 32;
               break;
             }
-            _context.prev = 12;
-            _context.next = 15;
-            return dataProvider === null || dataProvider === void 0 ? void 0 : dataProvider.invokeVariable(props, query);
-          case 15:
-            _response = _context.sent;
-            setLoadingItems(false);
+            _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) {
-              _context.next = 23;
+              _context2.next = 23;
               break;
             }
             dataSet = Array.isArray(_response) ? _response : [_response];
-            setFormattedDataset(dataSet);
-
-            // Group data if grouping is enabled
-            if (props !== null && props !== void 0 && props.groupby) {
+            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
@@ -310,31 +443,35 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
               setIsOpen(false);
               setMenuOpen(false);
             }
-            return _context.abrupt("return", dataSet);
+            return _context2.abrupt("return", dataSet);
           case 23:
-            _context.next = 30;
+            _context2.next = 31;
             break;
           case 25:
-            _context.prev = 25;
-            _context.t0 = _context["catch"](12);
+            _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 30:
-            return _context.abrupt("return", []);
           case 31:
+            return _context2.abrupt("return", []);
+          case 32:
             if (!(!normalizedData || normalizedData.length === 0)) {
-              _context.next = 33;
+              _context2.next = 34;
               break;
             }
-            return _context.abrupt("return", []);
-          case 33:
+            return _context2.abrupt("return", []);
+          case 34:
             localDataProvider = new _providers.LocalDataProvider();
-            _context.next = 36;
+            _context2.next = 37;
             return localDataProvider.filter(dataConfig);
-          case 36:
-            response = _context.sent;
+          case 37:
+            response = _context2.sent;
             data = response.data, isLastPage = response.isLastPage; // Update hasMoreData state based on results
             setHasMoreData(data.length > 0 && !isLastPage);
             if (!nextPage) {
@@ -342,14 +479,11 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
               setGroupedData(getGroupedData(data));
             } else {
               setFormattedDataset(function (prev) {
-                return [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(data));
+                var updatedDataset = [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(data));
+                setGroupedData(getGroupedData(updatedDataset));
+                return updatedDataset;
               });
-              setGroupedData(getGroupedData([].concat((0, _toConsumableArray2["default"])(formattedDataset), (0, _toConsumableArray2["default"])(data))));
             }
-            setPage(function (prev) {
-              return nextPage ? prev + 1 : 1;
-            });
-            setIsScrolled(false);
 
             // Show dropdown if we have results
             if (data.length > 0) {
@@ -361,54 +495,79 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
             if (onDatasetready && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
               onDatasetready(listener.Widgets[name], data);
             }
-            return _context.abrupt("return", data);
-          case 47:
-            _context.prev = 47;
-            _context.t1 = _context["catch"](7);
-            console.error("Error fetching data:", _context.t1);
-            return _context.abrupt("return", []);
-          case 51:
-            _context.prev = 51;
+            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);
-            return _context.finish(51);
+            // Reset pagination loading flag and scroll state
+            if (nextPage) {
+              isLoadingNextPageRef.current = false;
+              setIsScrolled(false);
+            }
+            return _context2.finish(50);
           case 54:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee, null, [[7, 47, 51, 54], [12, 25]]);
+      }, _callee2, null, [[9, 46, 50, 54], [14, 25]]);
     }));
-    return function (_x, _x2) {
-      return _ref.apply(this, arguments);
+    return function (_x2, _x3) {
+      return _ref2.apply(this, arguments);
     };
   }(), [dataset, datafield, matchmode, searchkey, limit, onBeforeservicecall, page, formattedDataset, getGroupedData, type, onDatasetready, listener === null || listener === void 0 ? void 0 : listener.Widgets, name]);
 
-  // First, modify getDataSourceAsObservable to handle the state updates properly
-  var getDataSourceDebounced = (0, _react.useMemo)(function () {
-    return (0, _lodash.debounce)(/*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(query) {
-        var data;
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+  // 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) {
-                _context2.next = 5;
+                _context3.next = 5;
                 break;
               }
               setFormattedDataset([]);
               setIsOpen(false);
               setMenuOpen(false);
-              return _context2.abrupt("return");
+              return _context3.abrupt("return");
             case 5:
               if (!(query.length >= minchars)) {
-                _context2.next = 22;
+                _context3.next = 25;
                 break;
               }
-              _context2.prev = 6;
+              _context3.prev = 6;
               setLoadingItems(true);
-              _context2.next = 10;
-              return getDataSource(query);
+              // 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:
-              data = _context2.sent;
+              _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
@@ -422,37 +581,55 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
                 setIsOpen(false);
                 setMenuOpen(false);
               }
-              _context2.next = 22;
+              _context3.next = 25;
               break;
-            case 16:
-              _context2.prev = 16;
-              _context2.t0 = _context2["catch"](6);
-              console.error("Error in search:", _context2.t0);
+            case 19:
+              _context3.prev = 19;
+              _context3.t1 = _context3["catch"](6);
+              console.error("Error in search:", _context3.t1);
               setLoadingItems(false);
               setIsOpen(false);
               setMenuOpen(false);
-            case 22:
+            case 25:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, null, [[6, 16]]);
+        }, _callee3, null, [[6, 19]]);
       }));
-      return function (_x3) {
-        return _ref2.apply(this, arguments);
+      return function (_x4) {
+        return _ref3.apply(this, arguments);
       };
     }(), debouncetime);
-  }, [getDataSource, minchars, 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")) {
-      getDataSourceDebounced(query);
+      var _debouncedSearchRef$c;
+      // Call the persisted debounced function
+      (_debouncedSearchRef$c = debouncedSearchRef.current) === null || _debouncedSearchRef$c === void 0 || _debouncedSearchRef$c.call(debouncedSearchRef, query);
     }
-  }, [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);
 
@@ -461,30 +638,28 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       onChange(event, listener.Widgets[name], queryValue, queryValue);
     }
 
-    // Clear results and close dropdown if query is empty
+    // Handle empty query - for autocomplete show all options, for search close dropdown
     if (!queryValue) {
-      setFormattedDataset([]);
       setSelectedItem(null);
-      setIsOpen(false);
-      setMenuOpen(false);
       if (onClear && listener !== null && listener !== void 0 && listener.Widgets && name && name in (listener === null || listener === void 0 ? void 0 : listener.Widgets)) {
         onClear(event, listener.Widgets[name]);
       }
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        listener.onChange(name, {
-          datavalue: {}
-        });
+      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;
     }
-
-    // For autocomplete type, only show dropdown if we meet minimum chars
-    if (type === "autocomplete" && queryValue.length < minchars) {
-      setFormattedDataset([]);
-      setIsOpen(false);
-      setMenuOpen(false);
-      return;
-    }
   };
   var handleKeyDown = function handleKeyDown(event) {
     if (event.key === "Enter") {
@@ -506,6 +681,9 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
         if (onSubmit && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
           onSubmit(event, listener.Widgets[name]);
         }
+        if (props.isSearchInChips) {
+          setQuery("");
+        }
       }
     } else if (event.key === "ArrowDown") {
       event.preventDefault();
@@ -515,41 +693,74 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       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("");
-    setIsOpen(false);
-    setMenuOpen(false);
     setSelectedItem(null);
-    setFormattedDataset([]);
     if (onClear && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
       onClear(event, listener.Widgets[name]);
     }
+    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) {
-    setIsOpen(false);
-    setMenuOpen(false);
-    handleBlur(e);
+    if (isOpen) {
+      setIsOpen(false);
+      setMenuOpen(false);
+      handleBlur(e);
+    }
   };
   var handleFocus = function handleFocus(event) {
-    // For autocomplete type
+    // For autocomplete type - show all options on focus
     if (type === "autocomplete") {
       // If we already have results, show them
-      if (formattedDataset.length > 0) {
+      if (formattedDataset.length > 0 && !selectedItem) {
         setIsOpen(true);
         setMenuOpen(true);
       }
-      // If we have a query that meets minimum length, search with it
-      else {
-        setLoadingItems(true);
-        var normalizedData = (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, displaylabel, displayexpression, props.orderby, props.groupby);
+      // 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);
-        setLoadingItems(false);
       }
     }
 
@@ -561,8 +772,9 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var handleBlur = function handleBlur(event) {
     // Don't close dropdown immediately to allow click events on menu items
     setTimeout(function () {
-      var _dropdownRef$current2;
-      if (document.activeElement !== dropdownRef.current && !((_dropdownRef$current2 = dropdownRef.current) !== null && _dropdownRef$current2 !== void 0 && _dropdownRef$current2.contains(document.activeElement))) {
+      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);
       }
@@ -572,6 +784,8 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }
   };
   var handleSearchClick = function handleSearchClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
     // Reset hasMoreData state before new search
     setHasMoreData(true);
 
@@ -607,42 +821,62 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       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 = item.displayValue || item.label;
-      setQuery(displayVal);
+      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 && listener !== null && listener !== void 0 && listener.Widgets && name && name in (listener === null || listener === void 0 ? void 0 : listener.Widgets)) {
-        var _item$dataObject, _item$dataObject2;
-        onChange(undefined, listener.Widgets[name], (_item$dataObject = item.dataObject) === null || _item$dataObject === void 0 ? void 0 : _item$dataObject.value, (_item$dataObject2 = item.dataObject) === null || _item$dataObject2 === void 0 ? void 0 : _item$dataObject2.value);
+        var _item$dataObject3, _item$dataObject4;
+        onChange(undefined, listener.Widgets[name], (_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 (listener !== null && listener !== void 0 && listener.onChange) {
-        listener.onChange(name, {
-          datavalue: item.dataObject.value
-        });
+      if (!props.isSearchInChips) {
+        handleUpdateDatavalue(item);
       }
 
       // Trigger onSelect callback if provided
       if (onSelect && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
-        onSelect(new MouseEvent("click"), listener.Widgets[name], item);
+        onSelect(new MouseEvent("click"), props, item);
+        props.onSubmit && !props.isSearchInChips && props.onSubmit(new MouseEvent("click"), props);
       }
     } catch (error) {
       console.error("Error parsing item data:", error);
     }
   };
-  var handleMenuItemClick = function handleMenuItemClick(event) {
+  var handleMenuItemClick = function handleMenuItemClick(event, item) {
     handleMatchSelect(event.currentTarget);
   };
   var handleScroll = function handleScroll(event) {
-    if (!loadingItems && !isScrolled && hasMoreData && !selectedItem) {
+    if (!loadingItems && !isScrolled && !isLoadingNextPageRef.current && hasMoreData && !selectedItem) {
       var target = event.target;
       if (target.scrollHeight - target.scrollTop <= target.clientHeight + 50) {
         setIsScrolled(true);
@@ -723,7 +957,7 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       if (fieldValue != null) return String(fieldValue);
 
       // Fallback to first object value
-      var firstValue = Object.values(item).find(function (val) {
+      var firstValue = !(props.groupby && props.isSearchInChips) && Object.values(item).find(function (val) {
         return val != null;
       });
       return firstValue ? String(firstValue) : "";
@@ -731,13 +965,20 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     var displayValue = getDisplayValue();
     var keyFields = [datafield && datafield !== "All Fields" ? datafield : null, "id", "key", "value"];
     var keyValue = findFieldValue(keyFields, index);
-    var displayImage = displayimagesrc && item[displayimagesrc] ? item[displayimagesrc] : null;
+    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: displayImage,
+      displayImage: imageSrc,
       dataObject: item
     };
   };
@@ -771,9 +1012,12 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
 
     // 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: handleMenuItemClick,
+      onClick: handleClick,
       "data-item": JSON.stringify(dataItem),
       dense: true,
       className: "search-dropdown-item",
@@ -792,13 +1036,14 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       width: parseInt(imagewidth) || 16,
       height: parseInt(imagewidth) || 16,
       style: {
-        marginRight: "8px"
+        marginRight: "8px",
+        borderRadius: "100%"
       }
     }), __jsx(_material.Box, {
       component: "span",
       className: "",
       title: displayText
-    }, highlightMatch(displayText, query))));
+    }, getDisplayExpression ? highlightMatch(getDisplayExpression(getSelectedItem(item)), query) : highlightMatch(displayText, query))));
   };
 
   // Update renderItems to handle non-array cases
@@ -834,10 +1079,7 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     // Ensure formattedDataset is an array before mapping
     var formattedArray = Array.isArray(formattedDataset) ? formattedDataset : [];
     return formattedArray.map(function (item, index) {
-      if (index < limit) {
-        return renderItem(item, query, index);
-      }
-      return null;
+      return renderItem(item, query, index);
     }).filter(Boolean); // Remove null values
   };
   var renderClearButton = function renderClearButton() {
@@ -859,9 +1101,10 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var renderSearchIcon = function renderSearchIcon() {
     if (showsearchicon) {
       return __jsx(_material.Button, {
+        ref: searchButtonRef,
         className: "app-search-button btn btn-icon",
         title: "search",
-        type: "submit",
+        type: "button",
         onClick: handleSearchClick,
         disabled: disabled,
         size: "small"
@@ -956,15 +1199,16 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       },
       className: "search-dropdown-container"
     }, __jsx(_MenuList["default"], {
-      className: "search-menu-list app-search dropdown-menu"
+      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, _ref3) {
-    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
-      key = _ref4[0],
-      value = _ref4[1];
+  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)) {
@@ -982,7 +1226,8 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, safeRestProps, {
     className: (0, _clsx["default"])(DEFAULT_CLASS, className),
     "data-search-type": type,
-    type: type
+    type: type,
+    readonly: readonly
   }), renderBackButton(), __jsx(_material.Box, {
     component: "span",
     className: "sr-only"
@@ -993,7 +1238,7 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     type: "text",
     "focus-target": "true",
     value: query,
-    onChange: handleInputChange,
+    onChange: !readonly ? handleInputChange : undefined,
     disabled: disabled,
     tabIndex: tabindex,
     ref: inputRef,