@wavemaker/react-runtime 11.14.1-rc.236

package/components/basic/search/index.js

@@ -0,0 +1,1023 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _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 _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/react-runtime/higherOrder/withBaseWrapper"));
+var _lodash = require("lodash");
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _providers = require("./providers");
+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"];
+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["class"],
+    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$conditionalsty = props.conditionalstyles,
+    conditionalstyles = _props$conditionalsty === void 0 ? {} : _props$conditionalsty,
+    _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,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var searchRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var dropdownRef = (0, _react.useRef)(null);
+  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];
+  (0, _react.useEffect)(function () {
+    // do not remove this code specifically handled for chips component for clearing the query.
+    if (datavalue == "") {
+      setQuery("");
+    }
+  }, [datavalue]);
+
+  // Combine width with other styles
+  var searchStyle = _objectSpread(_objectSpread({
+    width: width
+  }, styles), conditionalstyles);
+
+  // Create dataProvider instance
+  var dataProvider = (0, _react.useMemo)(function () {
+    return new _providers.DataProvider();
+  }, []);
+
+  // 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();
+    }
+  }, []);
+
+  // 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("");
+    }
+  }, [dataset, type]);
+
+  // Update listen query state when type changes
+  (0, _react.useEffect)(function () {
+    setListenQuery(type === "autocomplete");
+  }, [type]);
+  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) {
+        if (!(props !== null && props !== void 0 && props.groupby)) {
+          return;
+        }
+        var groupKey = item[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 _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) {
+          case 0:
+            if (!(!query && (type === "search" || type === "autocomplete" && !nextPage))) {
+              _context.next = 5;
+              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 = {
+              dataset: normalizedData,
+              datafield: datafield || "All Fields",
+              query: query,
+              matchMode: matchmode,
+              casesensitive: false,
+              searchKey: searchkey,
+              isformfield: false,
+              limit: limit,
+              page: nextPage ? page + 1 : 1,
+              isLocalFilter: true,
+              onBeforeservicecall: onBeforeservicecall
+            };
+            _context.prev = 7;
+            setLoadingItems(true);
+            _isUpdateRequired = updateRequired;
+            if (searchkey && updateRequired === undefined) {
+              _isUpdateRequired = dataProvider.init(props);
+              setUpdateRequired(_isUpdateRequired);
+            }
+
+            // Handle remote search if required
+            if (!(searchkey && _isUpdateRequired)) {
+              _context.next = 31;
+              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);
+            if (!_response) {
+              _context.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) {
+              setGroupedData(getGroupedData(dataSet));
+            }
+
+            // Update UI state based on results
+            if (dataSet.length > 0) {
+              setIsOpen(true);
+              setMenuOpen(true);
+            } else {
+              setIsOpen(false);
+              setMenuOpen(false);
+            }
+            return _context.abrupt("return", dataSet);
+          case 23:
+            _context.next = 30;
+            break;
+          case 25:
+            _context.prev = 25;
+            _context.t0 = _context["catch"](12);
+            setLoadingItems(false);
+            setIsOpen(false);
+            setMenuOpen(false);
+            // TODO: call a toast here
+          case 30:
+            return _context.abrupt("return", []);
+          case 31:
+            if (!(!normalizedData || normalizedData.length === 0)) {
+              _context.next = 33;
+              break;
+            }
+            return _context.abrupt("return", []);
+          case 33:
+            localDataProvider = new _providers.LocalDataProvider();
+            _context.next = 36;
+            return localDataProvider.filter(dataConfig);
+          case 36:
+            response = _context.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) {
+                return [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(data));
+              });
+              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) {
+              setIsOpen(true);
+              setMenuOpen(true);
+            }
+
+            // Call onDatasetready callback if provided
+            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;
+            setLoadingItems(false);
+            return _context.finish(51);
+          case 54:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[7, 47, 51, 54], [12, 25]]);
+    }));
+    return function (_x, _x2) {
+      return _ref.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) {
+            case 0:
+              if (query) {
+                _context2.next = 5;
+                break;
+              }
+              setFormattedDataset([]);
+              setIsOpen(false);
+              setMenuOpen(false);
+              return _context2.abrupt("return");
+            case 5:
+              if (!(query.length >= minchars)) {
+                _context2.next = 22;
+                break;
+              }
+              _context2.prev = 6;
+              setLoadingItems(true);
+              _context2.next = 10;
+              return getDataSource(query);
+            case 10:
+              data = _context2.sent;
+              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);
+              }
+              _context2.next = 22;
+              break;
+            case 16:
+              _context2.prev = 16;
+              _context2.t0 = _context2["catch"](6);
+              console.error("Error in search:", _context2.t0);
+              setLoadingItems(false);
+              setIsOpen(false);
+              setMenuOpen(false);
+            case 22:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[6, 16]]);
+      }));
+      return function (_x3) {
+        return _ref2.apply(this, arguments);
+      };
+    }(), debouncetime);
+  }, [getDataSource, minchars, debouncetime]);
+
+  // listen to query change and trigger debounced search
+  (0, _react.useEffect)(function () {
+    if (query && (type === "autocomplete" && listenQuery || type === "search" && searchon === "typing")) {
+      getDataSourceDebounced(query);
+    }
+  }, [query]);
+
+  // Simplify handleInputChange to only update query
+  var handleInputChange = function handleInputChange(event) {
+    var _event$target;
+    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
+    if (onChange && listener !== null && listener !== void 0 && listener.Widgets && name && name in (listener === null || listener === void 0 ? void 0 : listener.Widgets)) {
+      onChange(event, listener.Widgets[name], queryValue, queryValue);
+    }
+
+    // Clear results and close dropdown if query is empty
+    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: {}
+        });
+      }
+      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") {
+      // 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 && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+          onSubmit(event, listener.Widgets[name]);
+        }
+      }
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      handleFocusNextItem();
+    } else if (event.key === "Escape") {
+      setIsOpen(false);
+      setMenuOpen(false);
+    }
+  };
+  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]);
+    }
+
+    // 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);
+  };
+  var handleFocus = function handleFocus(event) {
+    // For autocomplete type
+    if (type === "autocomplete") {
+      // If we already have results, show them
+      if (formattedDataset.length > 0) {
+        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);
+        setFormattedDataset(normalizedData);
+        setIsOpen(true);
+        setMenuOpen(true);
+        setLoadingItems(false);
+      }
+    }
+
+    // Call onFocus handler if provided
+    if (onFocus && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+      onFocus(event, listener.Widgets[name]);
+    }
+  };
+  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))) {
+        setIsOpen(false);
+        setMenuOpen(false);
+      }
+    }, 200);
+    if (onBlur && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+      onBlur(event, listener.Widgets[name]);
+    }
+  };
+  var handleSearchClick = function handleSearchClick(event) {
+    // 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);
+    }
+
+    // Call the onSearch handler if provided
+    if (onSearch && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+      onSearch(event, listener.Widgets[name]);
+    }
+  };
+  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();
+    }
+  };
+  var handleMatchSelect = function handleMatchSelect(match) {
+    var itemData = match.getAttribute("data-item");
+    if (!itemData) return;
+    try {
+      var item = JSON.parse(itemData);
+
+      // Set display value in input
+      var displayVal = item.displayValue || item.label;
+      setQuery(displayVal);
+      setIsOpen(false);
+      setMenuOpen(false);
+      setSelectedItem(item); // Set the selected item
+      setFormattedDataset([]); // Clear the dropdown dataset
+
+      if (listener !== null && listener !== void 0 && listener.onChange) {
+        listener.onChange(name, {
+          datavalue: item.dataObject.value
+        });
+      }
+
+      // 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);
+      }
+    } catch (error) {
+      console.error("Error parsing item data:", error);
+    }
+  };
+  var handleMenuItemClick = function handleMenuItemClick(event) {
+    handleMatchSelect(event.currentTarget);
+  };
+  var handleScroll = function handleScroll(event) {
+    if (!loadingItems && !isScrolled && 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",
+        style: {
+          padding: "10px 16px"
+        }
+      }, 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 = 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 displayImage = displayimagesrc && item[displayimagesrc] ? item[displayimagesrc] : null;
+    return {
+      key: keyValue,
+      value: item,
+      label: displayValue,
+      displayValue: displayValue,
+      displayImage: displayImage,
+      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,
+            style: {
+              color: "var(--wm-search-dropdown-menu-item-color-matched)"
+            }
+          }, 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);
+    return __jsx(_MenuItem["default"], {
+      key: "item-".concat(index, "-").concat(dataItem.key),
+      onClick: handleMenuItemClick,
+      "data-item": JSON.stringify(dataItem),
+      dense: true,
+      className: "search-dropdown-item",
+      style: {
+        padding: "10px 16px"
+      }
+    }, __jsx(_material.Box, {
+      component: "a",
+      style: {
+        textDecoration: "none",
+        color: "inherit"
+      }
+    }, dataItem.displayImage && __jsx(_image["default"], {
+      src: dataItem.displayImage,
+      alt: "",
+      width: parseInt(imagewidth) || 16,
+      height: parseInt(imagewidth) || 16,
+      style: {
+        marginRight: "8px"
+      }
+    }), __jsx(_material.Box, {
+      component: "span",
+      className: "",
+      title: displayText
+    }, 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) {
+      if (index < limit) {
+        return renderItem(item, query, index);
+      }
+      return null;
+    }).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, {
+        className: "app-search-button btn btn-icon",
+        title: "search",
+        type: "submit",
+        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(_CircularProgress["default"], {
+        size: 20,
+        color: "primary",
+        style: {
+          marginRight: "8px"
+        }
+      }), loadingdatamsg);
+    }
+    return null;
+  };
+  var renderNoResultsMessage = function renderNoResultsMessage() {
+    if (!loadingItems && formattedDataset.length === 0 && query !== "" && !selectedItem) {
+      return __jsx(_Typography["default"], {
+        variant: "body2",
+        className: "dropdown-status",
+        style: {
+          padding: "8px 16px"
+        }
+      }, "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",
+        style: {
+          padding: "8px 16px",
+          textAlign: "center"
+        }
+      }, 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",
+      style: {
+        zIndex: 1300,
+        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,
+      style: {
+        maxHeight: "300px",
+        overflow: "auto",
+        boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)"
+      },
+      className: "search-dropdown-container"
+    }, __jsx(_MenuList["default"], {
+      className: "search-menu-list app-search dropdown-menu"
+    }, 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];
+    // 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
+  }), 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: handleInputChange,
+    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()));
+});
+Search.displayName = "WmSearch";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(Search);