@wavemaker-ai/react-runtime 1.0.0-rc.647499 → 1.0.0-rc.647565

package/components/basic/search/index.js

@@ -1,658 +1,575 @@
-"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 === "") {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState, useCallback, useMemo, startTransition } from "react";
+import clsx from "clsx";
+import Image from "next/image";
+import debounce from "lodash-es/debounce";
+import isPlainObject from "lodash-es/isPlainObject";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
+import CircularProgress from "@mui/material/CircularProgress";
+import DOMPurify from "dompurify";
+import { Box, Button } from "@mui/material";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { transformDataset } from "../../../utils/transformedDataset-utils";
+import { DataProvider, LocalDataProvider } from "./providers";
+import withFormController from "../../data/form/form-controller/withFormController";
+import withStandalone from "../../../higherOrder/withStandalone";
+import {
+  CustomTemplateCaption,
+  useCustomTemplate
+} from "../../common/customTemplate";
+const DEFAULT_CLASS = "app-search input-group";
+const Search = React.forwardRef((props, ref) => {
+  const _a = props, {
+    showclear = false,
+    debouncetime = 250,
+    searchkey,
+    searchon = "typing",
+    matchmode = "contains",
+    minchars = 1,
+    limit = 10,
+    tabindex = 0,
+    placeholder = "Search",
+    dropup = false,
+    readonly = false,
+    datavalue,
+    dataset = [],
+    datafield = "All Fields",
+    displayfield,
+    disabled = false,
+    autofocus = false,
+    type = "search",
+    showsearchicon: showsearchicon = true,
+    showbackbutton = false,
+    imagewidth: imagewidth = "16px",
+    width,
+    displaylabel: displaylabel,
+    displayimagesrc,
+    displayexpression,
+    datacompletemsg = "No more data to load",
+    loadingdatamsg = "Loading items...",
+    clearsearchiconclass = "wi wi-close",
+    backsearchiconclass = "wi wi-arrow-left",
+    searchiconclass = "sl-search wm-sl-l",
+    navsearchbar = false,
+    className,
+    shortcutkey,
+    required,
+    hint,
+    arialabel = "Search field",
+    onBeforeservicecall,
+    onBlur,
+    onChange,
+    onFocus,
+    onSelect,
+    onSubmit,
+    onClear,
+    onSearch,
+    onDatasetready,
+    styles: styles = {},
+    name,
+    listener,
+    content,
+    value,
+    datasetItems: datasetItems,
+    selectedItems,
+    displayValue,
+    groupedData: initialGroupedData,
+    handleHeaderClick,
+    toggleAllHeaders,
+    isDestroyed,
+    validation,
+    casesensitive = false,
+    isUpdateRequired: isUpdateRequired,
+    onQuerySearch,
+    getDisplayExpression,
+    standalone = false,
+    viewParent,
+    destroy,
+    clearSearch
+  } = _a, restProps = __objRest(_a, [
+    "showclear",
+    "debouncetime",
+    "searchkey",
+    "searchon",
+    "matchmode",
+    "minchars",
+    "limit",
+    "tabindex",
+    "placeholder",
+    "dropup",
+    "readonly",
+    "datavalue",
+    "dataset",
+    "datafield",
+    "displayfield",
+    "disabled",
+    "autofocus",
+    "type",
+    // Changed default to 'search'
+    "showsearchicon",
+    "showbackbutton",
+    // Added with default false
+    "imagewidth",
+    "width",
+    // Added width prop
+    "displaylabel",
+    "displayimagesrc",
+    "displayexpression",
+    "datacompletemsg",
+    "loadingdatamsg",
+    "clearsearchiconclass",
+    "backsearchiconclass",
+    "searchiconclass",
+    "navsearchbar",
+    "className",
+    "shortcutkey",
+    "required",
+    "hint",
+    "arialabel",
+    "onBeforeservicecall",
+    "onBlur",
+    "onChange",
+    "onFocus",
+    "onSelect",
+    "onSubmit",
+    "onClear",
+    "onSearch",
+    "onDatasetready",
+    // Added onDatasetready callback
+    "styles",
+    "name",
+    "listener",
+    "content",
+    "value",
+    // Extract props that should not be spread to DOM elements
+    "datasetItems",
+    "selectedItems",
+    "displayValue",
+    "groupedData",
+    "handleHeaderClick",
+    "toggleAllHeaders",
+    "isDestroyed",
+    "validation",
+    "casesensitive",
+    // Default to case-insensitive
+    "isUpdateRequired",
+    "onQuerySearch",
+    "getDisplayExpression",
+    "standalone",
+    "viewParent",
+    "destroy",
+    "clearSearch"
+  ]);
+  const debouncedSearchRef = useRef(null);
+  const debouncedSearchItemRef = useRef(null);
+  const getDataSourceRef = useRef(
+    null
+  );
+  const searchRef = useRef(null);
+  const inputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const searchButtonRef = useRef(null);
+  const listRef = useRef(null);
+  const initializedRef = useRef(false);
+  const isLoadingNextPageRef = useRef(false);
+  const [query, setQuery] = useState(typeof datavalue === "string" ? datavalue : "");
+  const [isOpen, setIsOpen] = useState(false);
+  const [loadingItems, setLoadingItems] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [page, setPage] = useState(1);
+  const [formattedDataset, setFormattedDataset] = useState([]);
+  const [groupedData, setGroupedData] = useState({});
+  const [listenQuery, setListenQuery] = useState(type === "autocomplete");
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [hasMoreData, setHasMoreData] = useState(true);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [updateRequired, setUpdateRequired] = useState(void 0);
+  const { templateName, setTemplate } = useCustomTemplate({ content, name });
+  const dataProvider = useMemo(() => new DataProvider(), []);
+  const normalizedData = useMemo(
+    () => transformDataset(
+      dataset,
+      datafield,
+      displayfield,
+      displaylabel,
+      displayexpression,
+      props.orderby,
+      void 0,
+      // Don't pre-group - getGroupedData will handle it
+      props.dataPath
+    ),
+    [
+      dataset,
+      datafield,
+      displayfield,
+      displaylabel,
+      displayexpression,
+      props.orderby,
+      props.dataPath
+    ]
+  );
+  useEffect(() => {
+    var _a2;
+    if (datavalue === void 0 || 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 ((isPlainObject(datavalue) || Array.isArray(datavalue)) && searchkey && Object.keys(datavalue).length > 0) {
+      const value2 = Array.isArray(datavalue) ? datavalue[0] : datavalue;
+      if (value2) {
+        const key = searchkey.split(",")[0] || searchkey;
+        const item = (getDisplayExpression == null ? void 0 : getDisplayExpression(value2)) || value2[key];
         if (item) {
           setQuery(item);
-          handleUpdateDatavalue(_value);
+          handleUpdateDatavalue(value2);
         }
       }
     } else if (datafield !== "All Fields" && datafield) {
-      var findItem = normalizedData === null || normalizedData === void 0 ? void 0 : normalizedData.find(function (item) {
-        return item.value === datavalue;
-      });
+      let findItem = normalizedData == null ? void 0 : normalizedData.find((item) => item.value === datavalue);
       if (findItem) {
-        var _displayValue = (getDisplayExpression === null || getDisplayExpression === void 0 ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem.label;
-        setQuery(_displayValue);
+        let displayValue2 = (getDisplayExpression == null ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem.label;
+        setQuery(displayValue2);
         handleUpdateDatavalue(findItem);
       } else {
-        var _debouncedSearchItemR;
-        (_debouncedSearchItemR = debouncedSearchItemRef.current) === null || _debouncedSearchItemR === void 0 || _debouncedSearchItemR.call(debouncedSearchItemRef, datavalue);
+        (_a2 = debouncedSearchItemRef.current) == null ? void 0 : _a2.call(debouncedSearchItemRef, datavalue);
       }
-    }
-    // do not remove this code specifically handled for chips component for clearing the query.
-    else if (!(0, _isPlainObject["default"])(datavalue)) {
+    } else if (!isPlainObject(datavalue)) {
       setQuery(datavalue);
     }
   }, [datavalue]);
-
-  // Combine width with other styles
-  var searchStyle = _objectSpread({
-    width: width
+  const searchStyle = __spreadValues({
+    width
   }, styles);
-
-  // Create dataProvider instance
-
-  // Initialize debounced searchItem function
-  (0, _react.useEffect)(function () {
-    // Cancel previous debounced function if it exists
+  useEffect(() => {
     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 () {
+    debouncedSearchItemRef.current = debounce(async (value2) => {
+      const response = await (dataProvider == null ? void 0 : dataProvider.invokeVariable(props, value2));
+      if (response && response.length > 0) {
+        let key = (searchkey == null ? void 0 : searchkey.split(",")[0]) || searchkey;
+        if (!key) return;
+        const findItem = response.find((item) => item[key] == value2);
+        if (findItem && Object.keys(findItem).length > 0) {
+          let displayValue2 = (getDisplayExpression == null ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem[key];
+          setQuery(displayValue2);
+        }
+      }
+    }, 200);
+    return () => {
       if (debouncedSearchItemRef.current) {
         debouncedSearchItemRef.current.cancel();
       }
     };
   }, [dataProvider, props, searchkey, getDisplayExpression]);
-
-  // Focus input on mount
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
+    var _a2;
     if (autofocus) {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }
     if (listener && listener.onChange) {
       listener.onChange(name, {
-        clearSearch: handleClearSearch
+        clearSearch: handleClearSearch,
+        setTemplate
       });
     }
   }, []);
-
-  // Handle shortcut key
-  (0, _react.useEffect)(function () {
-    var handleShortcutKey = function handleShortcutKey(event) {
+  useEffect(() => {
+    const handleShortcutKey = (event) => {
+      var _a2;
       if (shortcutkey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
-        var _inputRef$current2;
         event.preventDefault();
-        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
       }
     };
     window.addEventListener("keydown", handleShortcutKey);
-    return function () {
-      return window.removeEventListener("keydown", handleShortcutKey);
-    };
+    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
+  useEffect(() => {
     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)) {
+  useEffect(() => {
+    if (type !== "autocomplete" || !(normalizedData == null ? void 0 : normalizedData.length)) {
       return;
     }
-    (0, _react.startTransition)(function () {
+    startTransition(() => {
       setFormattedDataset(normalizedData);
-      if (props !== null && props !== void 0 && props.groupby) {
+      if (props == null ? 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);
+  const getGroupedData = useCallback(
+    (data) => {
+      if ((props == null ? void 0 : props.groupby) && (data == null ? void 0 : data.length)) {
+        const result = {};
+        data.forEach((item) => {
+          var _a2;
+          if (!(props == null ? void 0 : props.groupby)) {
+            return;
+          }
+          const groupKey = item[props == null ? void 0 : props.groupby] || ((_a2 = item == null ? void 0 : item.dataObject) == null ? void 0 : _a2[props == null ? void 0 : props.groupby]) || "ungrouped";
+          if (!result[groupKey]) {
+            result[groupKey] = [];
+          }
+          result[groupKey].push(item);
+        });
+        return result;
+      }
+      return { ungrouped: data };
+    },
+    [props == null ? void 0 : props.groupby]
+  );
+  const getDataSource = useCallback(
+    async (query2, nextPage) => {
+      if (nextPage && isLoadingNextPageRef.current) {
+        return [];
+      }
+      if (!query2 && (type === "search" || type === "autocomplete" && !nextPage)) {
+        setFormattedDataset([]);
+        setIsOpen(false);
+        setMenuOpen(false);
+        return [];
+      }
+      const dataConfig = __spreadProps(__spreadValues({}, props), {
+        dataset: normalizedData,
+        datafield: datafield || "All Fields",
+        query: query2,
+        matchMode: matchmode,
+        casesensitive: false,
+        searchKey: searchkey,
+        isformfield: false,
+        page: nextPage ? page + 1 : 1,
+        isLocalFilter: true,
+        onBeforeservicecall,
+        groupby: props.groupby,
+        orderby: props.orderby,
+        limit
       });
-      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);
+      if (nextPage) {
+        isLoadingNextPageRef.current = true;
+        setPage((prev) => prev + 1);
+      }
+      try {
+        setLoadingItems(true);
+        let isUpdateRequired2 = updateRequired;
+        if (searchkey && updateRequired === void 0) {
+          isUpdateRequired2 = dataProvider.init(dataConfig);
+          setUpdateRequired(isUpdateRequired2);
+        }
+        if (searchkey && isUpdateRequired2) {
+          try {
+            const response2 = await (dataProvider == null ? void 0 : dataProvider.invokeVariable(dataConfig, query2));
+            if (response2) {
+              const dataSet = Array.isArray(response2) ? response2 : [response2];
+              if (!nextPage) {
+                setFormattedDataset(dataSet);
+                setGroupedData(getGroupedData(dataSet));
+              } else {
+                setFormattedDataset((prev) => {
+                  const updatedDataset = [...prev, ...dataSet];
+                  setGroupedData(getGroupedData(updatedDataset));
+                  return updatedDataset;
+                });
+              }
+              if (dataSet.length > 0) {
+                setIsOpen(true);
+                setMenuOpen(true);
+              } else {
+                setIsOpen(false);
+                setMenuOpen(false);
+              }
+              return dataSet;
             }
-            return _context2.abrupt("return", dataSet);
-          case 23:
-            _context2.next = 31;
-            break;
-          case 25:
-            _context2.prev = 25;
-            _context2.t0 = _context2["catch"](14);
+          } catch (error) {
             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();
+          }
+          return [];
         }
-      }, _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 () {
+        if (!normalizedData || normalizedData.length === 0) {
+          return [];
+        }
+        const localDataProvider = new LocalDataProvider();
+        const response = await localDataProvider.filter(dataConfig);
+        const { data, isLastPage } = response;
+        setHasMoreData(data.length > 0 && !isLastPage);
+        if (!nextPage) {
+          setFormattedDataset(data);
+          setGroupedData(getGroupedData(data));
+        } else {
+          setFormattedDataset((prev) => {
+            const updatedDataset = [...prev, ...data];
+            setGroupedData(getGroupedData(updatedDataset));
+            return updatedDataset;
+          });
+        }
+        if (data.length > 0) {
+          setIsOpen(true);
+          setMenuOpen(true);
+        }
+        if (onDatasetready && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+          onDatasetready(
+            name != null && (listener == null ? void 0 : listener.Widgets) && name in listener.Widgets ? listener.Widgets[name] : props,
+            data
+          );
+        }
+        return data;
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        return [];
+      } finally {
+        setLoadingItems(false);
+        if (nextPage) {
+          isLoadingNextPageRef.current = false;
+          setIsScrolled(false);
+        }
+      }
+    },
+    [
+      dataset,
+      datafield,
+      matchmode,
+      searchkey,
+      limit,
+      onBeforeservicecall,
+      page,
+      formattedDataset,
+      getGroupedData,
+      type,
+      onDatasetready,
+      standalone,
+      listener == null ? void 0 : listener.Widgets,
+      name
+    ]
+  );
+  useEffect(() => {
     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
+  useEffect(() => {
     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();
+    debouncedSearchRef.current = debounce(async (query2) => {
+      var _a2;
+      if (!query2) {
+        setFormattedDataset([]);
+        setIsOpen(false);
+        setMenuOpen(false);
+        return;
+      }
+      if (query2.length >= minchars) {
+        try {
+          setLoadingItems(true);
+          const data = await ((_a2 = getDataSourceRef.current) == null ? void 0 : _a2.call(getDataSourceRef, query2)) || [];
+          setLoadingItems(false);
+          setFormattedDataset(data);
+          if (data && data.length > 0) {
+            setIsOpen(true);
+            setMenuOpen(true);
+          } else {
+            setIsOpen(false);
+            setMenuOpen(false);
           }
-        }, _callee3, null, [[6, 19]]);
-      }));
-      return function (_x4) {
-        return _ref3.apply(this, arguments);
-      };
-    }(), debouncetime);
-
-    // Cleanup: cancel debounced function on unmount or dependency change
-    return function () {
+        } catch (error) {
+          console.error("Error in search:", error);
+          setLoadingItems(false);
+          setIsOpen(false);
+          setMenuOpen(false);
+        }
+      }
+    }, debouncetime);
+    return () => {
       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 () {
+  }, [minchars, debouncetime]);
+  useEffect(() => {
+    var _a2;
     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);
+      (_a2 = debouncedSearchRef.current) == null ? void 0 : _a2.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, {
+    var _a2;
+    (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, props.fieldName || name, {
       datavalue: ""
     });
   }
-
-  // Simplify handleInputChange to only update query
-  var handleInputChange = function handleInputChange(event) {
-    var _event$target;
+  const handleInputChange = (event) => {
+    var _a2;
     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) || "";
+    const queryValue = ((_a2 = event == null ? void 0 : event.target) == null ? void 0 : _a2.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);
+    if (onChange && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+      onChange(
+        event,
+        name != null && (listener == null ? 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);
+      if (onClear && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+        onClear(
+          event,
+          name != null && (listener == null ? 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) {
+        if (props == null ? void 0 : props.groupby) {
           setGroupedData(getGroupedData(normalizedData));
         }
         setIsOpen(true);
@@ -665,25 +582,24 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       return;
     }
   };
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = (event) => {
+    var _a2;
     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")) || [];
+        const matches = ((_a2 = dropdownRef.current) == null ? void 0 : _a2.querySelectorAll("li")) || [];
         if (matches.length > 0) {
-          var firstMatch = matches[0];
+          const 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 (onSubmit && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+          onSubmit(
+            event,
+            name != null && (listener == null ? void 0 : listener.Widgets) && name in listener.Widgets ? listener.Widgets[name] : props
+          );
         }
         if (props.isSearchInChips) {
           setQuery("");
@@ -697,37 +613,36 @@ 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)
+  useEffect(() => {
+    const handler = (event) => {
+      const target = event.currentTarget;
       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 () {
+    return () => {
       if (listRef.current) {
         listRef.current.removeEventListener("scroll", handler);
       }
     };
   }, [hasMoreData]);
-  var handleClearSearch = function handleClearSearch(event) {
-    var _inputRef$current3;
+  const handleClearSearch = (event) => {
+    var _a2;
     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);
+    if (onClear && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+      onClear(
+        event,
+        name != null && (listener == null ? 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) {
+      if (props == null ? void 0 : props.groupby) {
         setGroupedData(getGroupedData(normalizedData));
       }
       setIsOpen(true);
@@ -737,115 +652,106 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       setIsOpen(false);
       setMenuOpen(false);
     }
-
-    // Focus back on input
-    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   };
-  var handleClickAway = function handleClickAway(e) {
+  const handleClickAway = (e) => {
     if (isOpen) {
       setIsOpen(false);
       setMenuOpen(false);
       handleBlur(e);
     }
   };
-  var handleFocus = function handleFocus(event) {
-    // For autocomplete type - show all options on focus
+  const handleFocus = (event) => {
     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) {
+      } else if (normalizedData && normalizedData.length > 0) {
         setFormattedDataset(normalizedData);
-        // Update grouped data if groupby is specified
-        if (props !== null && props !== void 0 && props.groupby) {
+        if (props == null ? 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);
+    if (onFocus && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+      onFocus(
+        event,
+        name != null && (listener == null ? 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))) {
+  const handleBlur = (event) => {
+    setTimeout(() => {
+      var _a2, _b;
+      const activeElement = document.activeElement;
+      if (document.activeElement !== dropdownRef.current && !((_a2 = dropdownRef.current) == null ? void 0 : _a2.contains(activeElement)) && !((_b = searchButtonRef.current) == null ? void 0 : _b.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);
+    if (onBlur && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+      onBlur(
+        event,
+        name != null && (listener == null ? void 0 : listener.Widgets) && name in listener.Widgets ? listener.Widgets[name] : props
+      );
     }
   };
-  var handleSearchClick = function handleSearchClick(event) {
+  const 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);
+    if (onSearch && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+      onSearch(
+        event,
+        name != null && (listener == null ? 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
+  const handleFocusNextItem = () => {
+    var _a2;
     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")) || [];
+    const matches = ((_a2 = dropdownRef.current) == null ? void 0 : _a2.querySelectorAll("li")) || [];
     if (matches.length > 0) {
-      var firstMatch = matches[0];
+      const 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) {
+    const updatedItem = getSelectedItem(item);
+    const value2 = datafield === "All Fields" ? updatedItem : updatedItem == null ? void 0 : updatedItem[datafield];
+    if (listener == null ? void 0 : listener.onChange) {
       listener.onChange(props.fieldName || name, {
-        datavalue: value
+        datavalue: value2
       });
     }
   }
   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 _a2;
+    return ((_a2 = item == null ? void 0 : item.dataObject) == null ? void 0 : _a2.dataObject) || (item == null ? void 0 : item.dataObject) || item;
   }
-  var handleMatchSelect = function handleMatchSelect(match) {
+  const handleMatchSelect = (match) => {
+    var _a2, _b;
     if (readonly || disabled) {
       return;
     }
-    var itemData = match.getAttribute("data-item");
+    const 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;
+      const item = JSON.parse(itemData);
+      const selectedItem2 = getSelectedItem(item);
+      const displayVal = (getDisplayExpression == null ? void 0 : getDisplayExpression(selectedItem2)) || item.displayValue || item.label;
       if (props.isSearchInChips) {
         setQuery("");
       } else {
@@ -853,55 +759,65 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       }
       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);
+      setSelectedItem(item);
+      setFormattedDataset([]);
+      if (onChange && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+        onChange(
+          void 0,
+          name != null && (listener == null ? void 0 : listener.Widgets) && name in listener.Widgets ? listener.Widgets[name] : props,
+          (_a2 = item.dataObject) == null ? void 0 : _a2.value,
+          (_b = item.dataObject) == null ? void 0 : _b.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);
+      if (onSelect && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+        onSelect(
+          new MouseEvent("click"),
+          props,
+          selectedItem2
+        );
+        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) {
+  const handleMenuItemClick = (event, item) => {
     handleMatchSelect(event.currentTarget);
   };
-  var handleScroll = function handleScroll(event) {
+  const handleScroll = (event) => {
     if (!loadingItems && !isScrolled && !isLoadingNextPageRef.current && hasMoreData && !selectedItem) {
-      var target = event.target;
+      const target = event.target;
       if (target.scrollHeight - target.scrollTop <= target.clientHeight + 50) {
         setIsScrolled(true);
         getDataSource(query, true);
       }
     }
   };
-  var renderGroupDivider = function renderGroupDivider(groupKey) {
+  const 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 /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          onClick: handleMenuItemClick,
+          dense: true,
+          className: "list-group-header",
+          children: /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "group-title wm-search-group-title", children: groupKey })
+        },
+        `header-${groupKey}`
+      );
     }
     return null;
   };
-  var prepareDataItem = function prepareDataItem(item, index) {
-    // Handle primitive values
-    if ((0, _typeof2["default"])(item) !== "object" || item === null) {
-      var stringValue = String(item);
+  const prepareDataItem = (item, index) => {
+    var _a2, _b, _c, _d, _e;
+    if (typeof item !== "object" || item === null) {
+      const stringValue = String(item);
       return {
         key: index,
         value: item,
@@ -911,35 +827,19 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
         dataObject: item
       };
     }
-
-    // Return if already normalized
-    var isNormalized = ["key", "value", "label", "displayValue"].every(function (prop) {
-      return item.hasOwnProperty(prop);
-    });
+    const isNormalized = ["key", "value", "label", "displayValue"].every(
+      (prop) => 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];
-          }
+    const findFieldValue = (fields, fallback) => {
+      for (const field of fields.filter(Boolean)) {
+        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
+    const getDisplayValue = () => {
       if (displayexpression && typeof displayexpression === "function") {
         try {
           return displayexpression(item.dataObject ? item.dataObject : item);
@@ -947,112 +847,119 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
           console.warn("Error executing displayexpression:", e);
         }
       }
-
-      // Try predefined field names
-      var displayFields = [displaylabel, displayfield, "label", "name", "title", "text", "displayValue", "display"];
-      var fieldValue = findFieldValue(displayFields);
+      const displayFields = [
+        displaylabel,
+        displayfield,
+        "label",
+        "name",
+        "title",
+        "text",
+        "displayValue",
+        "display"
+      ];
+      const 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;
-      });
+      const firstValue = !(props.groupby && props.isSearchInChips) && Object.values(item).find((val) => 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;
+    const displayValue2 = getDisplayValue();
+    const keyFields = [
+      datafield && datafield !== "All Fields" ? datafield : null,
+      "id",
+      "key",
+      "value"
+    ];
+    const keyValue = findFieldValue(keyFields, index);
+    let 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);
+      imageSrc = displayimagesrc((_c = (_b = (_a2 = item == null ? void 0 : item.dataObject) == null ? void 0 : _a2.dataObject) != null ? _b : item == null ? void 0 : item.dataObject) != null ? _c : 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;
+      imageSrc = displayimagesrc && ((_d = item.dataObject) == null ? void 0 : _d[displayimagesrc]) ? (_e = item.dataObject) == null ? void 0 : _e[displayimagesrc] : null;
     }
     return {
       key: keyValue,
       value: item,
-      label: displayValue,
-      displayValue: displayValue,
+      label: displayValue2,
+      displayValue: displayValue2,
       displayImage: imageSrc,
       dataObject: item
     };
   };
-
-  // Add this helper function to highlight matching text
-  var highlightMatch = function highlightMatch(text, query) {
-    if (!query || !text) return text;
+  const highlightMatch = (text, query2) => {
+    if (!query2 || !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);
+      const parts = text.split(new RegExp(`(${query2})`, "gi"));
+      return parts.map((part, index) => {
+        if (part.toLowerCase() === query2.toLowerCase()) {
+          return /* @__PURE__ */ jsx("strong", { className: "wm-search-match-highlight", children: part }, index);
         }
         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);
+  const renderItem = (item, query2, index) => {
+    const dataItem = prepareDataItem(item, index);
+    const displayText = typeof dataItem.displayValue === "string" ? DOMPurify.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))));
+    return /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        onClick: handleClick,
+        "data-item": JSON.stringify(dataItem),
+        dense: true,
+        className: "search-dropdown-item wm-search-dropdown-item",
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "a",
+            className: clsx("wm-search-item-link", templateName && "customTemplate"),
+            children: templateName ? /* @__PURE__ */ jsx(Box, { component: "div", children: /* @__PURE__ */ jsx(
+              CustomTemplateCaption,
+              {
+                templateName,
+                item: dataItem,
+                index,
+                widgetName: name,
+                listener
+              }
+            ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              dataItem.displayImage && /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: dataItem.displayImage,
+                  alt: "",
+                  width: parseInt(imagewidth) || 16,
+                  height: parseInt(imagewidth) || 16,
+                  className: "wm-search-item-image"
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { component: "span", className: "", title: displayText, children: getDisplayExpression ? highlightMatch(getDisplayExpression(getSelectedItem(item)), query2) : highlightMatch(displayText, query2) })
+            ] })
+          }
+        )
+      },
+      `item-${index}-${dataItem.key}`
+    );
   };
-
-  // Update renderItems to handle non-array cases
-  var renderItems = function renderItems() {
-    var itemCount = 0;
-
-    // If we have grouped data, render by groups
+  const renderItems = () => {
+    let itemCount = 0;
     if (props.groupby) {
-      var groupKeys = Object.keys(groupedData || {});
+      const 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);
+      const renderedItems = [];
+      groupKeys.forEach((groupKey) => {
+        const 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) {
+        const groupItems = (groupedData == null ? void 0 : groupedData[groupKey]) || [];
+        groupItems.forEach((item) => {
           if (itemCount < limit) {
             renderedItems.push(renderItem(item, query, itemCount));
             itemCount++;
@@ -1061,197 +968,171 @@ var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       });
       return renderedItems;
     }
-
-    // Ensure formattedDataset is an array before mapping
-    var formattedArray = Array.isArray(formattedDataset) ? formattedDataset : [];
-    return formattedArray.map(function (item, index) {
+    const formattedArray = Array.isArray(formattedDataset) ? formattedDataset : [];
+    return formattedArray.map((item, index) => {
       return renderItem(item, query, index);
-    }).filter(Boolean); // Remove null values
+    }).filter(Boolean);
   };
-  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)
-      }));
+  const renderClearButton = () => /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      className: clsx("btn btn-icon form-control-feedback clear-btn", {
+        "show-btn": !!query
+      }),
+      "aria-label": "Clear",
+      onClick: handleClearSearch,
+      size: "small",
+      children: /* @__PURE__ */ jsx(Box, { component: "i", className: `app-icon ${clearsearchiconclass}` })
     }
-    return null;
-  };
-  var renderSearchIcon = function renderSearchIcon() {
+  );
+  const 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 /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref: searchButtonRef,
+          className: "app-search-button btn btn-icon",
+          title: "search",
+          type: "button",
+          onClick: handleSearchClick,
+          disabled,
+          size: "small",
+          children: /* @__PURE__ */ jsx(Box, { component: "i", className: `app-icon ${searchiconclass}` })
+        }
+      );
     }
     return null;
   };
-  var renderBackButton = function renderBackButton() {
+  const 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 /* @__PURE__ */ jsxs(IconButton, { className: "back-btn", "aria-label": "Back", onClick: handleClearSearch, size: "small", children: [
+        /* @__PURE__ */ jsx(Box, { component: "span", className: `app-icon ${backsearchiconclass}` }),
+        /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: "Back button" })
+      ] });
     }
     return null;
   };
-  var renderLoadingIndicator = function renderLoadingIndicator() {
+  const 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 /* @__PURE__ */ jsxs(Typography, { variant: "body2", className: "dropdown-status", children: [
+        /* @__PURE__ */ jsx("span", { className: "wm-search-loading-spinner", children: /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "primary" }) }),
+        loadingdatamsg
+      ] });
     }
     return null;
   };
-  var renderNoResultsMessage = function renderNoResultsMessage() {
+  const 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 /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "dropdown-status wm-search-dropdown-message", children: "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
+  const renderCompletionMessage = () => {
     if (!loadingItems && formattedDataset.length > 0 && !selectedItem) {
-      return __jsx(_Typography["default"], {
-        variant: "body2",
-        className: "dropdown-status wm-search-dropdown-completion"
-      }, datacompletemsg);
+      return /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "dropdown-status wm-search-dropdown-completion", children: 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
+  const renderDropdown = () => {
+    var _a2;
     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
+    return /* @__PURE__ */ jsx(
+      Popper,
+      {
+        open: isOpen && menuOpen,
+        anchorEl: inputRef.current,
+        placement: dropup ? "top-start" : "bottom-start",
+        className: "wm-search-popper",
+        style: { width: (_a2 = searchRef.current) == null ? void 0 : _a2.clientWidth },
+        children: /* @__PURE__ */ jsx(Paper, { elevation: 3, className: "search-dropdown-paper", children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "div",
+            ref: dropdownRef,
+            onScroll: handleScroll,
+            className: "search-dropdown-container wm-search-dropdown-scroll",
+            children: /* @__PURE__ */ jsxs(MenuList, { className: "search-menu-list app-search dropdown-menu", ref: listRef, children: [
+              renderItems(),
+              renderNoResultsMessage(),
+              renderLoadingIndicator(),
+              renderCompletionMessage()
+            ] })
+          }
+        ) })
       }
-    }, __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);
+  const safeRestProps = Object.entries(restProps).reduce(
+    (acc, [key, value2]) => {
+      const invalidProps = [
+        "validation",
+        "datasetItems",
+        "selectedItems",
+        "displayValue",
+        "onchange",
+        "onblur",
+        "groupedData",
+        "handleHeaderClick",
+        "toggleAllHeaders",
+        "isDestroyed"
+      ];
+      if (!invalidProps.includes(key)) {
+        acc[key] = value2;
+      }
+      return acc;
     },
-    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()));
+    {}
+  );
+  return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsxs(
+    Box,
+    __spreadProps(__spreadValues({
+      component: "div",
+      ref: searchRef,
+      style: searchStyle
+    }, safeRestProps), {
+      className: clsx(DEFAULT_CLASS, className),
+      "data-search-type": type,
+      type,
+      "aria-readonly": readonly,
+      children: [
+        renderBackButton(),
+        /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: "Back button" }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "input",
+            name,
+            className: clsx("app-textbox form-control list-of-objs app-search-input"),
+            type: "text",
+            "focus-target": "true",
+            value: query,
+            onChange: !readonly ? handleInputChange : void 0,
+            disabled,
+            tabIndex: tabindex,
+            ref: inputRef,
+            "aria-label": arialabel,
+            autoComplete: "off",
+            title: query,
+            placeholder,
+            readOnly: readonly,
+            onBlur: (e) => handleBlur(e),
+            onFocus: (e) => handleFocus(e),
+            onKeyDown: (e) => handleKeyDown(e)
+          }
+        ),
+        type === "autocomplete" ? null : /* @__PURE__ */ jsx(Box, { component: "span", className: "input-group-addon", children: /* @__PURE__ */ jsx(Box, { component: "form", noValidate: true, autoComplete: "off", children: renderSearchIcon() }) }),
+        /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: "Clear button" }),
+        renderClearButton(),
+        renderDropdown()
+      ]
+    })
+  ) });
 });
-var WmSearchStandalone = exports.WmSearch = (0, _withStandalone["default"])((0, _withFormController["default"])(Search));
+const WmSearchStandalone = withStandalone(withFormController(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));
+var search_default = withFormController(withBaseWrapper(Search));
+export {
+  WmSearchStandalone as WmSearch,
+  search_default as default
+};