@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/basic/search/index.js

@@ -0,0 +1,1199 @@
+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 { WmAppIcon } from "../../common/WmAppIcon";
+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: typeProp = "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",
+    clearsearchiconurl,
+    backsearchiconclass = "wi wi-arrow-left",
+    backsearchiconurl,
+    searchiconclass = "sl-search wm-sl-l",
+    searchiconurl,
+    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,
+    query: queryProp = ""
+  } = _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",
+    "clearsearchiconurl",
+    "backsearchiconclass",
+    "backsearchiconurl",
+    "searchiconclass",
+    "searchiconurl",
+    "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",
+    "query"
+  ]);
+  const type = typeProp === "autocomplete" ? "autocomplete" : "search";
+  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
+    ]
+  );
+  const handleQueryChange = useCallback(
+    debounce((queryValue) => {
+      if (listener == null ? void 0 : listener.onChange) {
+        listener.onChange(name, {
+          query: queryValue
+        });
+      }
+    }, 100),
+    [name]
+  );
+  useEffect(() => {
+    const queryValue = queryProp != null ? queryProp : "";
+    setQuery(queryValue);
+    handleQueryChange(queryValue);
+  }, [queryProp]);
+  useEffect(() => {
+    var _a2;
+    if (datavalue === void 0 || datavalue === null || datavalue === "") {
+      setQuery("");
+      handleQueryChange("");
+      setSelectedItem(null);
+      setFormattedDataset([]);
+      return;
+    }
+    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);
+          handleQueryChange(item);
+          handleUpdateDatavalue(value2);
+        }
+      }
+    } else if (datafield !== "All Fields" && datafield) {
+      let findItem = normalizedData == null ? void 0 : normalizedData.find((item) => item.value === datavalue);
+      if (findItem) {
+        let displayValue2 = (getDisplayExpression == null ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem.label;
+        setQuery(displayValue2);
+        handleQueryChange(displayValue2);
+        handleUpdateDatavalue(findItem);
+      } else {
+        (_a2 = debouncedSearchItemRef.current) == null ? void 0 : _a2.call(debouncedSearchItemRef, datavalue);
+      }
+    } else if (!isPlainObject(datavalue)) {
+      setQuery(datavalue);
+      handleQueryChange(datavalue);
+    }
+  }, [datavalue]);
+  const searchStyle = __spreadValues({
+    width
+  }, styles);
+  useEffect(() => {
+    if (debouncedSearchItemRef.current) {
+      debouncedSearchItemRef.current.cancel();
+    }
+    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);
+          handleQueryChange(displayValue2);
+        }
+      }
+    }, 200);
+    return () => {
+      if (debouncedSearchItemRef.current) {
+        debouncedSearchItemRef.current.cancel();
+      }
+    };
+  }, [dataProvider, props, searchkey, getDisplayExpression]);
+  useEffect(() => {
+    var _a2;
+    if (autofocus) {
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    }
+    if (listener && listener.onChange) {
+      listener.onChange(name, {
+        clearSearch: handleClearSearch,
+        setTemplate
+      });
+    }
+  }, []);
+  useEffect(() => {
+    const handleShortcutKey = (event) => {
+      var _a2;
+      if (shortcutkey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
+        event.preventDefault();
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      }
+    };
+    window.addEventListener("keydown", handleShortcutKey);
+    return () => window.removeEventListener("keydown", handleShortcutKey);
+  }, [shortcutkey]);
+  useEffect(() => {
+    if (type === "autocomplete") {
+      getDataSource("");
+    }
+    setListenQuery(type === "autocomplete");
+  }, [type]);
+  useEffect(() => {
+    if (type !== "autocomplete" || !(normalizedData == null ? void 0 : normalizedData.length)) {
+      return;
+    }
+    startTransition(() => {
+      setFormattedDataset(normalizedData);
+      if (props == null ? void 0 : props.groupby) {
+        setGroupedData(getGroupedData(normalizedData));
+      }
+    });
+  }, [normalizedData]);
+  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
+      });
+      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;
+            }
+          } catch (error) {
+            setLoadingItems(false);
+            setIsOpen(false);
+            setMenuOpen(false);
+            if (nextPage) {
+              setIsScrolled(false);
+            }
+          }
+          return [];
+        }
+        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]);
+  useEffect(() => {
+    if (debouncedSearchRef.current) {
+      debouncedSearchRef.current.cancel();
+    }
+    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);
+          }
+        } catch (error) {
+          console.error("Error in search:", error);
+          setLoadingItems(false);
+          setIsOpen(false);
+          setMenuOpen(false);
+        }
+      }
+    }, debouncetime);
+    return () => {
+      if (debouncedSearchRef.current) {
+        debouncedSearchRef.current.cancel();
+      }
+    };
+  }, [minchars, debouncetime]);
+  useEffect(() => {
+    var _a2;
+    if (query && (type === "autocomplete" && listenQuery || type === "search" && searchon === "typing")) {
+      (_a2 = debouncedSearchRef.current) == null ? void 0 : _a2.call(debouncedSearchRef, query);
+    }
+  }, [query, type, listenQuery, searchon]);
+  function clearDataValue() {
+    var _a2;
+    (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, props.fieldName || name, {
+      datavalue: ""
+    });
+  }
+  const handleInputChange = (event) => {
+    var _a2;
+    if (readonly || disabled) {
+      return;
+    }
+    const queryValue = ((_a2 = event == null ? void 0 : event.target) == null ? void 0 : _a2.value) || "";
+    setQuery(queryValue);
+    handleQueryChange(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
+      );
+    }
+    if (!queryValue) {
+      setSelectedItem(null);
+      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();
+      if (type === "autocomplete" && normalizedData && normalizedData.length > 0) {
+        setFormattedDataset(normalizedData);
+        if (props == null ? void 0 : props.groupby) {
+          setGroupedData(getGroupedData(normalizedData));
+        }
+        setIsOpen(true);
+        setMenuOpen(true);
+      } else {
+        setFormattedDataset([]);
+        setIsOpen(false);
+        setMenuOpen(false);
+      }
+      return;
+    }
+  };
+  const handleKeyDown = (event) => {
+    var _a2;
+    if (event.key === "Enter") {
+      if (menuOpen && formattedDataset.length > 0) {
+        const matches = ((_a2 = dropdownRef.current) == null ? void 0 : _a2.querySelectorAll("li")) || [];
+        if (matches.length > 0) {
+          const firstMatch = matches[0];
+          handleMatchSelect(firstMatch);
+        }
+      } else {
+        if (type === "search" && (!searchon || searchon === "onsearchiconclick")) {
+          handleSearchClick(event);
+        }
+        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("");
+          handleQueryChange("");
+        }
+      }
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      handleFocusNextItem();
+    } else if (event.key === "Escape") {
+      setIsOpen(false);
+      setMenuOpen(false);
+    }
+  };
+  useEffect(() => {
+    const handler = (event) => {
+      const target = event.currentTarget;
+      if (target.scrollHeight - target.scrollTop - target.clientHeight <= 1) {
+        handleScroll(event);
+      }
+    };
+    if (listRef.current) {
+      listRef.current.addEventListener("scroll", handler);
+    }
+    return () => {
+      if (listRef.current) {
+        listRef.current.removeEventListener("scroll", handler);
+      }
+    };
+  }, [hasMoreData]);
+  const handleClearSearch = (event) => {
+    var _a2;
+    setQuery("");
+    handleQueryChange("");
+    setSelectedItem(null);
+    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();
+    if (type === "autocomplete" && normalizedData && normalizedData.length > 0) {
+      setFormattedDataset(normalizedData);
+      if (props == null ? void 0 : props.groupby) {
+        setGroupedData(getGroupedData(normalizedData));
+      }
+      setIsOpen(true);
+      setMenuOpen(true);
+    } else {
+      setFormattedDataset([]);
+      setIsOpen(false);
+      setMenuOpen(false);
+    }
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  };
+  const handleClickAway = (e) => {
+    if (isOpen) {
+      setIsOpen(false);
+      setMenuOpen(false);
+      handleBlur(e);
+    }
+  };
+  const handleFocus = (event) => {
+    if (type === "autocomplete") {
+      if (formattedDataset.length > 0 && !selectedItem) {
+        setIsOpen(true);
+        setMenuOpen(true);
+      } else if (normalizedData && normalizedData.length > 0) {
+        setFormattedDataset(normalizedData);
+        if (props == null ? void 0 : props.groupby) {
+          setGroupedData(getGroupedData(normalizedData));
+        }
+        setIsOpen(true);
+        setMenuOpen(true);
+      }
+    }
+    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
+      );
+    }
+  };
+  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 ? 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
+      );
+    }
+  };
+  const handleSearchClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setHasMoreData(true);
+    if (type === "search" && (!searchon || searchon === "onsearchiconclick")) {
+      setLoadingItems(true);
+      getDataSource(query);
+    }
+    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
+      );
+    }
+  };
+  const handleFocusNextItem = () => {
+    var _a2;
+    if (type === "autocomplete" && !menuOpen && query.length >= minchars && !selectedItem) {
+      setIsOpen(true);
+      setMenuOpen(true);
+      if (formattedDataset.length === 0) {
+        getDataSource(query);
+      }
+    }
+    const matches = ((_a2 = dropdownRef.current) == null ? void 0 : _a2.querySelectorAll("li")) || [];
+    if (matches.length > 0) {
+      const firstMatch = matches[0];
+      firstMatch.focus();
+    }
+  };
+  function handleUpdateDatavalue(item) {
+    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: value2
+      });
+    }
+  }
+  function getSelectedItem(item) {
+    var _a2;
+    return ((_a2 = item == null ? void 0 : item.dataObject) == null ? void 0 : _a2.dataObject) || (item == null ? void 0 : item.dataObject) || item;
+  }
+  const handleMatchSelect = (match) => {
+    var _a2, _b;
+    if (readonly || disabled) {
+      return;
+    }
+    const itemData = match.getAttribute("data-item");
+    if (!itemData) return;
+    try {
+      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("");
+        handleQueryChange("");
+      } else {
+        setQuery(displayVal);
+        handleQueryChange(displayVal);
+      }
+      setIsOpen(false);
+      setMenuOpen(false);
+      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);
+      }
+      if (onSelect && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+        onSelect(
+          new MouseEvent("click"),
+          props,
+          // Chips expects queryModel (DataSetItem), not the raw dataObject
+          props.isSearchInChips ? item : selectedItem2
+        );
+        props.onSubmit && !props.isSearchInChips && props.onSubmit(
+          new MouseEvent("click"),
+          props
+        );
+      }
+    } catch (error) {
+      console.error("Error parsing item data:", error);
+    }
+  };
+  const handleMenuItemClick = (event, item) => {
+    handleMatchSelect(event.currentTarget);
+  };
+  const handleScroll = (event) => {
+    if (!loadingItems && !isScrolled && !isLoadingNextPageRef.current && hasMoreData && !selectedItem) {
+      const target = event.target;
+      if (target.scrollHeight - target.scrollTop <= target.clientHeight + 50) {
+        setIsScrolled(true);
+        getDataSource(query, true);
+      }
+    }
+  };
+  const renderGroupDivider = (groupKey) => {
+    if (props.groupby && groupKey !== "ungrouped") {
+      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;
+  };
+  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,
+        label: stringValue,
+        displayValue: stringValue,
+        displayImage: null,
+        dataObject: item
+      };
+    }
+    const isNormalized = ["key", "value", "label", "displayValue"].every(
+      (prop) => item.hasOwnProperty(prop)
+    );
+    if (isNormalized) return item;
+    const findFieldValue = (fields, fallback) => {
+      for (const field of fields.filter(Boolean)) {
+        if (field && item.hasOwnProperty(field) && item[field] != null && item[field] !== "") {
+          return item[field];
+        }
+      }
+      return fallback;
+    };
+    const getDisplayValue = () => {
+      if (displayexpression && typeof displayexpression === "function") {
+        try {
+          return displayexpression(item.dataObject ? item.dataObject : item);
+        } catch (e) {
+          console.warn("Error executing displayexpression:", e);
+        }
+      }
+      const displayFields = [
+        displaylabel,
+        displayfield,
+        "label",
+        "name",
+        "title",
+        "text",
+        "displayValue",
+        "display"
+      ];
+      const fieldValue = findFieldValue(displayFields);
+      if (fieldValue != null) return String(fieldValue);
+      const firstValue = !(props.groupby && props.isSearchInChips) && Object.values(item).find((val) => val != null);
+      return firstValue ? String(firstValue) : "";
+    };
+    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") {
+      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 {
+      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: displayValue2,
+      displayValue: displayValue2,
+      displayImage: imageSrc,
+      dataObject: item
+    };
+  };
+  const highlightMatch = (text, query2) => {
+    if (!query2 || !text) return text;
+    try {
+      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) {
+      return text;
+    }
+  };
+  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 /* @__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}`
+    );
+  };
+  const renderItems = () => {
+    let itemCount = 0;
+    if (props.groupby) {
+      const groupKeys = Object.keys(groupedData || {});
+      if (groupKeys.length === 0) {
+        return null;
+      }
+      const renderedItems = [];
+      groupKeys.forEach((groupKey) => {
+        const divider = renderGroupDivider(groupKey);
+        if (divider) {
+          renderedItems.push(divider);
+        }
+        const groupItems = (groupedData == null ? void 0 : groupedData[groupKey]) || [];
+        groupItems.forEach((item) => {
+          if (itemCount < limit) {
+            renderedItems.push(renderItem(item, query, itemCount));
+            itemCount++;
+          }
+        });
+      });
+      return renderedItems;
+    }
+    const formattedArray = Array.isArray(formattedDataset) ? formattedDataset : [];
+    return formattedArray.map((item, index) => {
+      return renderItem(item, query, index);
+    }).filter(Boolean);
+  };
+  const renderClearButton = () => /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      className: clsx("btn btn-icon form-control-feedback clear-btn", {
+        "show-btn": showclear && query !== ""
+      }),
+      "aria-label": "Clear",
+      onClick: handleClearSearch,
+      size: "small",
+      children: /* @__PURE__ */ jsx(
+        WmAppIcon,
+        {
+          iconclass: clearsearchiconclass,
+          iconurl: clearsearchiconurl,
+          prefabName: props.prefabName,
+          alt: "Clear"
+        }
+      )
+    }
+  );
+  const renderSearchIcon = () => {
+    if (showsearchicon) {
+      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(
+            WmAppIcon,
+            {
+              iconclass: searchiconclass,
+              iconurl: searchiconurl,
+              prefabName: props.prefabName,
+              alt: "Search"
+            }
+          )
+        }
+      );
+    }
+    return null;
+  };
+  const renderBackButton = () => {
+    if (showbackbutton && (backsearchiconclass || backsearchiconurl)) {
+      return /* @__PURE__ */ jsxs(IconButton, { className: "back-btn", "aria-label": "Back", onClick: handleClearSearch, size: "small", children: [
+        /* @__PURE__ */ jsx(
+          WmAppIcon,
+          {
+            iconclass: backsearchiconclass,
+            iconurl: backsearchiconurl,
+            prefabName: props.prefabName,
+            alt: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: "Back button" })
+      ] });
+    }
+    return null;
+  };
+  const renderLoadingIndicator = () => {
+    if (loadingItems) {
+      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;
+  };
+  const renderNoResultsMessage = () => {
+    if (!loadingItems && formattedDataset.length === 0 && query !== "" && !selectedItem) {
+      return /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "dropdown-status wm-search-dropdown-message", children: "No results found" });
+    }
+    return null;
+  };
+  const renderCompletionMessage = () => {
+    if (!loadingItems && formattedDataset.length > 0 && !selectedItem) {
+      return /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "dropdown-status wm-search-dropdown-completion", children: datacompletemsg });
+    }
+    return null;
+  };
+  const renderDropdown = () => {
+    var _a2;
+    if (!isOpen || !menuOpen || selectedItem) return null;
+    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()
+            ] })
+          }
+        ) })
+      }
+    );
+  };
+  const safeRestProps = Object.entries(restProps).reduce(
+    (acc, [key, value2]) => {
+      const invalidProps = [
+        "validation",
+        "datasetItems",
+        "selectedItems",
+        "displayValue",
+        "onchange",
+        "onblur",
+        "groupedData",
+        "handleHeaderClick",
+        "toggleAllHeaders",
+        "isDestroyed",
+        "setTemplate"
+      ];
+      if (!invalidProps.includes(key)) {
+        acc[key] = value2;
+      }
+      return acc;
+    },
+    {}
+  );
+  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()
+      ]
+    })
+  ) });
+});
+const WmSearchStandalone = withStandalone(withFormController(Search));
+Search.displayName = "WmSearch";
+var search_default = withFormController(withBaseWrapper(Search));
+export {
+  WmSearchStandalone as WmSearch,
+  search_default as default
+};