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

package/components/data/table/components/TableFilters.js

@@ -1,27 +1,25 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TableFilterRow = exports.GlobalSearchFilter = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _lodashEs = require("lodash-es");
-var _utils = require("@wavemaker-ai/react-runtime/components/data/utils");
-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" != _typeof(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;
-// Constants
-var ACTION_COLUMN_IDS = ["actions", "row-operations", "multiSelect", "radioSelect", "row-index"];
-var DEFAULT_MATCH_MODE = "anywhereignorecase";
-var DATA_TYPES = {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { Box, Input, Menu } from "@mui/material";
+import { filter, map, includes, get, isEmpty, defaultTo } from "lodash-es";
+import {
+  getMatchModeTypesMap,
+  getMatchModeMsgs
+} from "../../utils";
+const ACTION_COLUMN_IDS = [
+  "actions",
+  "row-operations",
+  "multiSelect",
+  "radioSelect",
+  "row-index"
+];
+const DEFAULT_MATCH_MODE = "anywhereignorecase";
+const DATA_TYPES = {
   NUMBER: "number",
   DATE: "date",
   STRING: "string"
 };
-
-// Menu popup styles for Bootstrap dropdown compatibility
-var MENU_POPUP_STYLES = {
+const MENU_POPUP_STYLES = {
   paper: {
     style: {
       zIndex: 1040,
@@ -31,32 +29,23 @@ var MENU_POPUP_STYLES = {
     }
   }
 };
-var MENU_LIST_STYLES = {
-  style: {
-    padding: 0
-  }
+const MENU_LIST_STYLES = {
+  style: { padding: 0 }
 };
-
-// Utility: Get data type from widget configuration
-var getDataType = function getDataType(widgetType, editInputType) {
-  // Check edit input type first
+const getDataType = (widgetType, editInputType) => {
   if (editInputType === DATA_TYPES.NUMBER) return DATA_TYPES.NUMBER;
-  if ((0, _lodashEs.includes)(["date", "datetime-local", "time"], editInputType)) {
+  if (includes(["date", "datetime-local", "time"], editInputType)) {
     return DATA_TYPES.DATE;
   }
-
-  // Check widget type
-  if ((0, _lodashEs.includes)(["number", "currency", "integer"], widgetType)) {
+  if (includes(["number", "currency", "integer"], widgetType)) {
     return DATA_TYPES.NUMBER;
   }
-  if ((0, _lodashEs.includes)(["date", "datetime", "time", "timestamp"], widgetType)) {
+  if (includes(["date", "datetime", "time", "timestamp"], widgetType)) {
     return DATA_TYPES.DATE;
   }
   return DATA_TYPES.STRING;
 };
-
-// Utility: Get input group CSS class based on data type
-var getInputGroupClass = function getInputGroupClass(dataType) {
+const getInputGroupClass = (dataType) => {
   switch (dataType) {
     case DATA_TYPES.NUMBER:
       return "input-group number input-group-sm";
@@ -66,364 +55,376 @@ var getInputGroupClass = function getInputGroupClass(dataType) {
       return "input-group text input-group-sm";
   }
 };
-
-// Utility: Check if column should be filtered
-var isFilterableColumn = function isFilterableColumn(column) {
-  var columnId = (0, _lodashEs.defaultTo)(column.id, column.accessorKey);
-  var isActionColumn = (0, _lodashEs.includes)(ACTION_COLUMN_IDS, columnId) || column.isRowIndex;
-  return !isActionColumn && column.enableColumnFilter !== false && !(0, _lodashEs.isEmpty)(column.accessorKey);
+const isFilterableColumn = (column) => {
+  const columnId = defaultTo(column.id, column.accessorKey);
+  const isActionColumn = includes(ACTION_COLUMN_IDS, columnId) || column.isRowIndex;
+  return !isActionColumn && column.enableColumnFilter !== false && !isEmpty(column.accessorKey);
 };
-
-// Utility: Shallow comparison helper for memo
-var shallowEqual = function shallowEqual(prev, next, keys) {
-  return keys.every(function (key) {
-    return prev[key] === next[key];
-  });
+const shallowEqual = (prev, next, keys) => {
+  return keys.every((key) => prev[key] === next[key]);
 };
-var GlobalSearchFilter = exports.GlobalSearchFilter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    selectedColumn = _ref.selectedColumn,
-    onColumnChange = _ref.onColumnChange,
-    columns = _ref.columns,
-    _ref$searchLabel = _ref.searchLabel,
-    searchLabel = _ref$searchLabel === void 0 ? "Search" : _ref$searchLabel,
-    name = _ref.name,
-    _ref$filteronkeypress = _ref.filteronkeypress,
-    filteronkeypress = _ref$filteronkeypress === void 0 ? false : _ref$filteronkeypress,
-    listener = _ref.listener;
-  // Local state for input value
-  var _useState = (0, _react.useState)(value),
-    inputValue = _useState[0],
-    setInputValue = _useState[1];
-  // Local state for selected column to prevent immediate API calls
-  var _useState2 = (0, _react.useState)(selectedColumn),
-    localSelectedColumn = _useState2[0],
-    setLocalSelectedColumn = _useState2[1];
-
-  // Update local value when prop changes
-  (0, _react.useEffect)(function () {
-    setInputValue(value);
-  }, [value]);
-
-  // Update local column when prop changes
-  (0, _react.useEffect)(function () {
-    setLocalSelectedColumn(selectedColumn);
-  }, [selectedColumn]);
-  var clearLocalSearchControls = (0, _react.useCallback)(function () {
-    setInputValue("");
-    setLocalSelectedColumn("");
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (listener !== null && listener !== void 0 && listener.onChange && name) {
-      listener.onChange(name, {
-        clearFilter: clearLocalSearchControls
-      });
-    }
-  }, [clearLocalSearchControls, name]);
-
-  // Filter searchable columns - memoize to prevent recalculation
-  var searchableColumns = (0, _react.useMemo)(function () {
-    return (0, _lodashEs.filter)((0, _lodashEs.defaultTo)(columns, []), function (col) {
-      return !(0, _lodashEs.isEmpty)(col === null || col === void 0 ? void 0 : col.accessorKey) && !(0, _lodashEs.includes)(ACTION_COLUMN_IDS, col === null || col === void 0 ? void 0 : col.id);
-    });
-  }, [columns]);
-
-  // Apply filter with current column selection
-  var applyFilter = (0, _react.useCallback)(function (value) {
-    onChange(value);
-    if (localSelectedColumn !== selectedColumn) {
-      onColumnChange(localSelectedColumn);
-    }
-  }, [onChange, onColumnChange, localSelectedColumn, selectedColumn]);
-  var handleColumnChange = (0, _react.useCallback)(function (e) {
-    var newColumn = e.target.value;
-    setLocalSelectedColumn(newColumn);
-
-    // If filteronkeypress is true, apply filter immediately when column changes
-    if (filteronkeypress && inputValue) {
-      onColumnChange(newColumn);
-      onChange(inputValue);
-    }
-  }, [filteronkeypress, inputValue, onColumnChange, onChange]);
-  var handleSearch = (0, _react.useCallback)(function () {
-    applyFilter(inputValue);
-  }, [applyFilter, inputValue]);
-  var handleInputChange = (0, _react.useCallback)(function (e) {
-    var newValue = e.target.value;
-    setInputValue(newValue);
-
-    // If filteronkeypress is true, apply filter on every keystroke
-    if (filteronkeypress) {
-      applyFilter(newValue);
-    }
-  }, [filteronkeypress, applyFilter]);
-  var handleKeyDown = (0, _react.useCallback)(function (e) {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      // Only trigger search manually if filteronkeypress is false
-      if (!filteronkeypress) {
-        handleSearch();
-      }
-    }
-  }, [filteronkeypress, handleSearch]);
-  return __jsx(_material.Box, {
-    component: "form",
-    className: "form-search form-inline",
-    onSubmit: function onSubmit(e) {
-      return e.preventDefault();
-    }
-  }, __jsx(_material.Box, {
-    className: "form-group form-group-sm"
-  }, __jsx(_material.Input, {
-    type: "text",
-    className: "form-control app-textbox",
-    placeholder: searchLabel,
-    value: inputValue,
-    onChange: handleInputChange,
-    onKeyDown: handleKeyDown,
-    size: "small",
-    sx: {
-      "& input::placeholder": {
-        color: "text.secondary",
-        opacity: 0.7,
-        fontWeight: "normal"
+const GlobalSearchFilter = memo(
+  ({
+    value,
+    onChange,
+    selectedColumn,
+    onColumnChange,
+    columns,
+    searchLabel = "Search",
+    name,
+    filteronkeypress = false,
+    listener
+  }) => {
+    const [inputValue, setInputValue] = useState(value);
+    const [localSelectedColumn, setLocalSelectedColumn] = useState(selectedColumn);
+    useEffect(() => {
+      setInputValue(value);
+    }, [value]);
+    useEffect(() => {
+      setLocalSelectedColumn(selectedColumn);
+    }, [selectedColumn]);
+    const clearLocalSearchControls = useCallback(() => {
+      setInputValue("");
+      setLocalSelectedColumn("");
+    }, []);
+    useEffect(() => {
+      if ((listener == null ? void 0 : listener.onChange) && name) {
+        listener.onChange(name, { clearFilter: clearLocalSearchControls });
       }
-    }
-  })), __jsx(_material.Box, {
-    className: "input-append input-group input-group-sm",
-    component: "div"
-  }, __jsx(_material.Box, {
-    component: "select",
-    name: "wm-datatable",
-    "data-element": "dgFilterValue",
-    className: "form-control app-select input-sm",
-    value: localSelectedColumn,
-    onChange: handleColumnChange
-  }, __jsx("option", {
-    value: "",
-    className: "placeholder"
-  }, "Select Field"), (0, _lodashEs.map)(searchableColumns, function (column, index) {
-    return __jsx("option", {
-      key: (0, _lodashEs.defaultTo)(column.id, column.accessorKey),
-      value: column.accessorKey,
-      "data-coldef-index": index
-    }, column.header);
-  })), __jsx(_material.Box, {
-    component: "span",
-    className: "input-group-addon"
-  }, __jsx(_material.Box, {
-    component: "button",
-    type: "button",
-    "data-element": "dgSearchButton",
-    className: "app-search-button",
-    title: searchLabel,
-    onClick: handleSearch
-  }, __jsx(_material.Box, {
-    component: "i",
-    className: "wi wi-search"
-  })))));
-}, function (prevProps, nextProps) {
-  return shallowEqual(prevProps, nextProps, ["value", "selectedColumn", "columns", "searchLabel", "name", "filteronkeypress", "onChange", "onColumnChange"]);
-});
+    }, [clearLocalSearchControls, name]);
+    const searchableColumns = useMemo(
+      () => filter(
+        defaultTo(columns, []),
+        (col) => !isEmpty(col == null ? void 0 : col.accessorKey) && !includes(ACTION_COLUMN_IDS, col == null ? void 0 : col.id)
+      ),
+      [columns]
+    );
+    const applyFilter = useCallback(
+      (value2) => {
+        onChange(value2);
+        if (localSelectedColumn !== selectedColumn) {
+          onColumnChange(localSelectedColumn);
+        }
+      },
+      [onChange, onColumnChange, localSelectedColumn, selectedColumn]
+    );
+    const handleColumnChange = useCallback(
+      (e) => {
+        const newColumn = e.target.value;
+        setLocalSelectedColumn(newColumn);
+        if (filteronkeypress && inputValue) {
+          onColumnChange(newColumn);
+          onChange(inputValue);
+        }
+      },
+      [filteronkeypress, inputValue, onColumnChange, onChange]
+    );
+    const handleSearch = useCallback(() => {
+      applyFilter(inputValue);
+    }, [applyFilter, inputValue]);
+    const handleInputChange = useCallback(
+      (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (filteronkeypress) {
+          applyFilter(newValue);
+        }
+      },
+      [filteronkeypress, applyFilter]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          if (!filteronkeypress) {
+            handleSearch();
+          }
+        }
+      },
+      [filteronkeypress, handleSearch]
+    );
+    return /* @__PURE__ */ jsxs(Box, { component: "form", className: "form-search form-inline", onSubmit: (e) => e.preventDefault(), children: [
+      /* @__PURE__ */ jsx(Box, { className: "form-group form-group-sm", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          className: "form-control app-textbox",
+          placeholder: searchLabel,
+          value: inputValue,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          size: "small",
+          sx: {
+            "& input::placeholder": {
+              color: "text.secondary",
+              opacity: 0.7,
+              fontWeight: "normal"
+            }
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Box, { className: "input-append input-group input-group-sm", component: "div", children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "select",
+            name: "wm-datatable",
+            "data-element": "dgFilterValue",
+            className: "form-control app-select input-sm",
+            value: localSelectedColumn,
+            onChange: handleColumnChange,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", className: "placeholder", children: "Select Field" }),
+              map(searchableColumns, (column, index) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  value: column.accessorKey,
+                  "data-coldef-index": index,
+                  children: column.header
+                },
+                defaultTo(column.id, column.accessorKey)
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { component: "span", className: "input-group-addon", children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            "data-element": "dgSearchButton",
+            className: "app-search-button",
+            title: searchLabel,
+            onClick: handleSearch,
+            children: /* @__PURE__ */ jsx(Box, { component: "i", className: "wi wi-search" })
+          }
+        ) })
+      ] })
+    ] });
+  },
+  (prevProps, nextProps) => shallowEqual(prevProps, nextProps, [
+    "value",
+    "selectedColumn",
+    "columns",
+    "searchLabel",
+    "name",
+    "filteronkeypress",
+    "onChange",
+    "onColumnChange"
+  ])
+);
 GlobalSearchFilter.displayName = "GlobalSearchFilter";
-// Component to handle individual column filter with local state
-var ColumnFilterCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
-  var columnId = _ref2.columnId,
-    value = _ref2.value,
-    onChange = _ref2.onChange,
-    widgetType = _ref2.widgetType,
-    columnMeta = _ref2.columnMeta,
-    columnAccessorKey = _ref2.columnAccessorKey,
-    listener = _ref2.listener,
-    renderFormWidget = _ref2.renderFormWidget,
-    onMatchModeChange = _ref2.onMatchModeChange;
-  var _useState3 = (0, _react.useState)(value),
-    localValue = _useState3[0],
-    setLocalValue = _useState3[1];
-  var _useState4 = (0, _react.useState)(null),
-    anchorEl = _useState4[0],
-    setAnchorEl = _useState4[1];
-  var _useState5 = (0, _react.useState)(DEFAULT_MATCH_MODE),
-    selectedMatchMode = _useState5[0],
-    setSelectedMatchMode = _useState5[1];
-  var filterButtonRef = (0, _react.useRef)(null);
-
-  // Sync local value with prop changes
-  (0, _react.useEffect)(function () {
-    setLocalValue(value);
-  }, [value]);
-
-  // Memoize data type, match modes, and CSS classes
-  var dataType = (0, _react.useMemo)(function () {
-    return getDataType(widgetType, columnMeta.editinputtype);
-  }, [widgetType, columnMeta.editinputtype]);
-  var matchModes = (0, _react.useMemo)(function () {
-    var matchModeMap = (0, _utils.getMatchModeTypesMap)();
-    return (0, _lodashEs.get)(matchModeMap, dataType, (0, _lodashEs.get)(matchModeMap, "default", []));
-  }, [dataType]);
-  var matchModeMessages = (0, _react.useMemo)(function () {
-    return (0, _utils.getMatchModeMsgs)(listener === null || listener === void 0 ? void 0 : listener.appLocale);
-  }, [listener === null || listener === void 0 ? void 0 : listener.appLocale]);
-  var inputGroupClass = (0, _react.useMemo)(function () {
-    return getInputGroupClass(dataType);
-  }, [dataType]);
-
-  // Event handlers
-  var handleApplyFilter = (0, _react.useCallback)(function (e) {
-    var inputValue = (0, _lodashEs.defaultTo)(e.target.value, localValue);
-    if (inputValue !== value) {
-      onChange(columnId, inputValue, selectedMatchMode);
-    }
-  }, [localValue, value, columnId, selectedMatchMode, onChange]);
-  var handleKeyDown = (0, _react.useCallback)(function (e) {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleApplyFilter(e);
-    }
-    e.stopPropagation();
-  }, [handleApplyFilter]);
-  var handleFilterIconClick = (0, _react.useCallback)(function (e) {
-    e.stopPropagation();
-    setAnchorEl(filterButtonRef.current);
-  }, []);
-  var handleClosePopover = (0, _react.useCallback)(function () {
-    setAnchorEl(null);
-  }, []);
-  var handleMatchModeSelect = (0, _react.useCallback)(function (matchMode) {
-    setSelectedMatchMode(matchMode);
-    onMatchModeChange === null || onMatchModeChange === void 0 || onMatchModeChange(columnId, matchMode);
-    if (localValue) {
-      onChange(columnId, localValue, matchMode);
-    }
-    handleClosePopover();
-  }, [columnId, localValue, onChange, onMatchModeChange, handleClosePopover]);
-  var handleClearFilterIconClick = (0, _react.useCallback)(function () {
-    onChange(columnId, "", selectedMatchMode);
-    setLocalValue("");
-  }, [columnId, selectedMatchMode, onChange]);
-  var handleLocalValueChange = (0, _react.useCallback)(function (value) {
-    setLocalValue(value);
-  }, []);
-  return __jsx("div", {
-    "data-col-identifier": columnAccessorKey,
-    className: inputGroupClass
-  }, __jsx(_material.Box, {
-    component: "div",
-    tabIndex: 0,
-    onBlur: handleApplyFilter,
-    onKeyDown: handleKeyDown,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, renderFormWidget(columnId, widgetType, localValue, handleLocalValueChange, {
-    placeholder: "",
-    sessionKey: "filter_".concat(columnId),
-    column: columnMeta
-  })), __jsx("span", {
-    className: "input-group-addon filter-clear-icon"
-  }, __jsx(_material.Box, {
-    hidden: (0, _lodashEs.isEmpty)(localValue),
-    component: "button",
-    type: "button",
-    className: "btn-transparent btn app-button",
-    "aria-haspopup": "true",
-    "aria-expanded": Boolean(anchorEl),
-    onClick: handleClearFilterIconClick
-  }, __jsx("i", {
-    className: "app-icon wi wi-clear"
-  }))), __jsx(_material.Box, {
-    component: "span",
-    className: "input-group-addon"
-  }, __jsx(_material.Box, {
-    ref: filterButtonRef,
-    component: "button",
-    type: "button",
-    className: "btn-transparent btn app-button",
-    "aria-haspopup": "true",
-    "aria-expanded": Boolean(anchorEl),
-    onClick: handleFilterIconClick
-  }, __jsx(_material.Box, {
-    component: "i",
-    className: "app-icon wi wi-filter-list"
-  })), __jsx(_material.Menu, {
-    anchorEl: anchorEl,
-    open: Boolean(anchorEl),
-    onClose: handleClosePopover,
-    anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "right"
-    },
-    transformOrigin: {
-      vertical: "top",
-      horizontal: "right"
-    },
-    slotProps: MENU_POPUP_STYLES,
-    MenuListProps: MENU_LIST_STYLES
-  }, __jsx(_material.Box, {
-    className: "dropdown open show"
-  }, __jsx(_material.Box, {
-    component: "ul",
-    className: "matchmode-dropdown dropdown-menu"
-  }, (0, _lodashEs.map)(matchModes, function (mode) {
-    return __jsx(_material.Box, {
-      key: mode,
-      component: "li",
-      className: selectedMatchMode === mode ? "active" : ""
-    }, __jsx(_material.Box, {
-      component: "a",
-      href: "javascript:void(0);",
-      onClick: function onClick() {
-        return handleMatchModeSelect(mode);
+const ColumnFilterCell = memo(
+  ({
+    columnId,
+    value,
+    onChange,
+    widgetType,
+    columnMeta,
+    columnAccessorKey,
+    listener,
+    renderFormWidget,
+    onMatchModeChange
+  }) => {
+    const [localValue, setLocalValue] = useState(value);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selectedMatchMode, setSelectedMatchMode] = useState(DEFAULT_MATCH_MODE);
+    const filterButtonRef = useRef(null);
+    useEffect(() => {
+      setLocalValue(value);
+    }, [value]);
+    const dataType = useMemo(
+      () => getDataType(widgetType, columnMeta.editinputtype),
+      [widgetType, columnMeta.editinputtype]
+    );
+    const matchModes = useMemo(() => {
+      const matchModeMap = getMatchModeTypesMap();
+      return get(matchModeMap, dataType, get(matchModeMap, "default", []));
+    }, [dataType]);
+    const matchModeMessages = useMemo(
+      () => getMatchModeMsgs(listener == null ? void 0 : listener.appLocale),
+      [listener == null ? void 0 : listener.appLocale]
+    );
+    const inputGroupClass = useMemo(() => getInputGroupClass(dataType), [dataType]);
+    const handleApplyFilter = useCallback(
+      (e) => {
+        const inputValue = defaultTo(e.target.value, localValue);
+        if (inputValue !== value) {
+          onChange(columnId, inputValue, selectedMatchMode);
+        }
       },
-      sx: {
-        cursor: "pointer",
-        textDecoration: "none"
-      }
-    }, (0, _lodashEs.get)(matchModeMessages, mode, mode)));
-  }))))));
-}, function (prevProps, nextProps) {
-  return shallowEqual(prevProps, nextProps, ["columnId", "value", "widgetType", "columnMeta", "columnAccessorKey", "onChange", "renderFormWidget", "onMatchModeChange"]);
-});
+      [localValue, value, columnId, selectedMatchMode, onChange]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleApplyFilter(e);
+        }
+        e.stopPropagation();
+      },
+      [handleApplyFilter]
+    );
+    const handleFilterIconClick = useCallback((e) => {
+      e.stopPropagation();
+      setAnchorEl(filterButtonRef.current);
+    }, []);
+    const handleClosePopover = useCallback(() => {
+      setAnchorEl(null);
+    }, []);
+    const handleMatchModeSelect = useCallback(
+      (matchMode) => {
+        setSelectedMatchMode(matchMode);
+        onMatchModeChange == null ? void 0 : onMatchModeChange(columnId, matchMode);
+        if (localValue) {
+          onChange(columnId, localValue, matchMode);
+        }
+        handleClosePopover();
+      },
+      [columnId, localValue, onChange, onMatchModeChange, handleClosePopover]
+    );
+    const handleClearFilterIconClick = useCallback(() => {
+      onChange(columnId, "", selectedMatchMode);
+      setLocalValue("");
+    }, [columnId, selectedMatchMode, onChange]);
+    const handleLocalValueChange = useCallback((value2) => {
+      setLocalValue(value2);
+    }, []);
+    return /* @__PURE__ */ jsxs("div", { "data-col-identifier": columnAccessorKey, className: inputGroupClass, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "div",
+          tabIndex: 0,
+          onBlur: handleApplyFilter,
+          onKeyDown: handleKeyDown,
+          onClick: (e) => e.stopPropagation(),
+          children: renderFormWidget(columnId, widgetType, localValue, handleLocalValueChange, {
+            placeholder: "",
+            sessionKey: `filter_${columnId}`,
+            column: columnMeta
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "input-group-addon filter-clear-icon", children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          hidden: isEmpty(localValue),
+          component: "button",
+          type: "button",
+          className: "btn-transparent btn app-button",
+          "aria-haspopup": "true",
+          "aria-expanded": Boolean(anchorEl),
+          onClick: handleClearFilterIconClick,
+          children: /* @__PURE__ */ jsx("i", { className: "app-icon wi wi-clear" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Box, { component: "span", className: "input-group-addon", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: filterButtonRef,
+            component: "button",
+            type: "button",
+            className: "btn-transparent btn app-button",
+            "aria-haspopup": "true",
+            "aria-expanded": Boolean(anchorEl),
+            onClick: handleFilterIconClick,
+            children: /* @__PURE__ */ jsx(Box, { component: "i", className: "app-icon wi wi-filter-list" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Menu,
+          {
+            anchorEl,
+            open: Boolean(anchorEl),
+            onClose: handleClosePopover,
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            transformOrigin: { vertical: "top", horizontal: "right" },
+            slotProps: MENU_POPUP_STYLES,
+            MenuListProps: MENU_LIST_STYLES,
+            children: /* @__PURE__ */ jsx(Box, { className: "dropdown open show", children: /* @__PURE__ */ jsx(Box, { component: "ul", className: "matchmode-dropdown dropdown-menu", children: map(matchModes, (mode) => /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "li",
+                className: selectedMatchMode === mode ? "active" : "",
+                children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "a",
+                    href: "javascript:void(0);",
+                    onClick: () => handleMatchModeSelect(mode),
+                    sx: { cursor: "pointer", textDecoration: "none" },
+                    children: get(matchModeMessages, mode, mode)
+                  }
+                )
+              },
+              mode
+            )) }) })
+          }
+        )
+      ] })
+    ] });
+  },
+  (prevProps, nextProps) => shallowEqual(prevProps, nextProps, [
+    "columnId",
+    "value",
+    "widgetType",
+    "columnMeta",
+    "columnAccessorKey",
+    "onChange",
+    "renderFormWidget",
+    "onMatchModeChange"
+  ])
+);
 ColumnFilterCell.displayName = "ColumnFilterCell";
-var TableFilterRow = exports.TableFilterRow = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
-  var columns = _ref3.columns,
-    columnFilters = _ref3.columnFilters,
-    onColumnFilterChange = _ref3.onColumnFilterChange,
-    filterMode = _ref3.filterMode,
-    renderFormWidget = _ref3.renderFormWidget,
-    listener = _ref3.listener;
-  if (filterMode !== "multicolumn") {
-    return null;
-  }
-  return __jsx("tr", {
-    className: "table-filter-row"
-  }, (0, _lodashEs.map)(columns, function (column, index) {
-    var columnId = (0, _lodashEs.defaultTo)(column.id, column.accessorKey);
-
-    // Skip non-filterable columns
-    if (!isFilterableColumn(column)) {
-      return __jsx("th", {
-        key: columnId
-      });
+const TableFilterRow = memo(
+  ({
+    columns,
+    columnFilters,
+    onColumnFilterChange,
+    filterMode,
+    renderFormWidget,
+    listener
+  }) => {
+    if (filterMode !== "multicolumn") {
+      return null;
     }
-    var columnMeta = (0, _lodashEs.defaultTo)(column.meta, {});
-    var widgetType = (0, _lodashEs.defaultTo)(columnMeta.editWidgetType, (0, _lodashEs.defaultTo)(columnMeta.widgetType, "text"));
-    return __jsx("th", {
-      key: columnId,
-      "data-col-id": index + 1
-    }, __jsx(ColumnFilterCell, {
-      columnId: columnId,
-      value: (0, _lodashEs.get)(columnFilters, [columnId, "value"], ""),
-      onChange: onColumnFilterChange,
-      widgetType: widgetType,
-      columnMeta: columnMeta,
-      columnAccessorKey: column.accessorKey,
-      renderFormWidget: renderFormWidget,
-      listener: listener
-    }));
-  }));
-}, function (prevProps, nextProps) {
-  return shallowEqual(prevProps, nextProps, ["columns", "columnFilters", "filterMode", "onColumnFilterChange", "renderFormWidget"]);
-});
-TableFilterRow.displayName = "TableFilterRow";
+    return /* @__PURE__ */ jsx("tr", { className: "table-filter-row", children: map(columns, (column, index) => {
+      const columnId = defaultTo(column.id, column.accessorKey);
+      if (!isFilterableColumn(column)) {
+        return /* @__PURE__ */ jsx("th", {}, columnId);
+      }
+      const columnMeta = defaultTo(column.meta, {});
+      const widgetType = defaultTo(
+        columnMeta.editWidgetType,
+        defaultTo(columnMeta.widgetType, "text")
+      );
+      return /* @__PURE__ */ jsx("th", { "data-col-id": index + 1, children: /* @__PURE__ */ jsx(
+        ColumnFilterCell,
+        {
+          columnId,
+          value: get(columnFilters, [columnId, "value"], ""),
+          onChange: onColumnFilterChange,
+          widgetType,
+          columnMeta,
+          columnAccessorKey: column.accessorKey,
+          renderFormWidget,
+          listener
+        }
+      ) }, columnId);
+    }) });
+  },
+  (prevProps, nextProps) => shallowEqual(prevProps, nextProps, [
+    "columns",
+    "columnFilters",
+    "filterMode",
+    "onColumnFilterChange",
+    "renderFormWidget"
+  ])
+);
+TableFilterRow.displayName = "TableFilterRow";
+export {
+  GlobalSearchFilter,
+  TableFilterRow
+};