@wavemaker/react-runtime 11.14.1-15.6409

package/components/data/table/components/RowExpansionButton.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RowExpansionButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _button = _interopRequireDefault(require("../../../form/button"));
+var _anchor = _interopRequireDefault(require("../../../basic/anchor"));
+var __jsx = _react["default"].createElement;
+var RowExpansionButton = exports.RowExpansionButton = function RowExpansionButton(_ref) {
+  var rowId = _ref.rowId,
+    rowData = _ref.rowData,
+    isExpanded = _ref.isExpanded,
+    onToggle = _ref.onToggle,
+    config = _ref.config;
+  if (!config.show) {
+    return null;
+  }
+  var handleClick = function handleClick(event, widget) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (!config.disabled) {
+      onToggle(rowId, rowData);
+    }
+  };
+
+  // Use the appropriate icon based on expanded state
+  var currentIcon = isExpanded ? config.expandicon : config.collapseicon;
+  var currentTitle = isExpanded ? config.collapsetitle : config.expandtitle;
+  var ariaLabel = config.expandtitle || config["displayName"] || "Toggle row expansion";
+
+  // Build common props with only defined values
+  var commonProps = {
+    name: "".concat(config.name || "row_expansion", "_").concat(rowId),
+    onClick: handleClick,
+    iconclass: currentIcon,
+    "aria-label": ariaLabel,
+    "aria-expanded": isExpanded,
+    "aria-live": "polite",
+    tabIndex: 0
+  };
+
+  // Only add optional props if they have values
+  if (config.listener) {
+    commonProps.listener = config.listener;
+  }
+  if (config["displayName"]) {
+    commonProps.caption = config["displayName"];
+  }
+  if (currentTitle) {
+    commonProps.title = currentTitle;
+  }
+  if (config.className) {
+    commonProps.className = "".concat(config.className, " row-expansion-button");
+  }
+  if (config.disabled) {
+    commonProps.disabled = config.disabled;
+  }
+  if (config.widgetType === "anchor") {
+    return __jsx(_anchor["default"], (0, _extends2["default"])({}, commonProps, {
+      hyperlink: "#",
+      role: "button"
+    }));
+  }
+  return __jsx(_button["default"], (0, _extends2["default"])({}, commonProps, {
+    type: "button"
+  }));
+};
+var _default = exports["default"] = RowExpansionButton;

package/components/data/table/components/TableBody.js

@@ -0,0 +1,279 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableBodyComponent = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _reactTable = require("@tanstack/react-table");
+var _utils = require("../utils");
+var _RowExpansionButton = require("./RowExpansionButton");
+var _excluded = ["name", "content"],
+  _excluded2 = ["className", "textAlign", "backgroundColor"];
+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;
+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; }
+// Constants
+var SYSTEM_COLUMN_IDS = ["multiSelect", "radioSelect", "row-index", "actions"];
+var DEFAULT_EXPANSION_WIDTH = "50px";
+var EXPANDED_ROW_BG_COLOR = "#f5f5f5";
+var DEFAULT_CELL_PADDING = "2rem";
+
+// Helper functions
+var isSystemColumn = function isSystemColumn(columnId) {
+  return SYSTEM_COLUMN_IDS.includes(columnId);
+};
+var parsePosition = function parsePosition(position) {
+  if (!position) return 0;
+  if (position === "-1" || position === -1) return -1;
+  return typeof position === "number" ? position : Number(position);
+};
+var EmptyRow = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var colSpan = _ref.colSpan,
+    message = _ref.message,
+    _ref$rowClass = _ref.rowClass,
+    rowClass = _ref$rowClass === void 0 ? "" : _ref$rowClass;
+  return __jsx(_material.TableRow, {
+    className: rowClass
+  }, __jsx(_material.TableCell, {
+    colSpan: colSpan,
+    className: "".concat(_utils.TABLE_CSS_CLASSES.tableCell, " text-center"),
+    style: {
+      padding: DEFAULT_CELL_PADDING
+    }
+  }, message));
+});
+EmptyRow.displayName = "EmptyRow";
+var ExpansionCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var rowId = _ref2.rowId,
+    rowData = _ref2.rowData,
+    isExpanded = _ref2.isExpanded,
+    onToggle = _ref2.onToggle,
+    config = _ref2.config;
+  return __jsx(_material.TableCell, {
+    className: "app-datagrid-cell row-expansion-cell",
+    style: {
+      textAlign: "center",
+      position: "relative",
+      width: config.columnwidth || DEFAULT_EXPANSION_WIDTH,
+      padding: "4px"
+    }
+  }, __jsx(_material.Box, {
+    component: "span",
+    className: "row-expansion-column",
+    "data-identifier": "rowExpansionButtons"
+  }, __jsx(_RowExpansionButton.RowExpansionButton, {
+    rowId: rowId,
+    rowData: rowData,
+    isExpanded: isExpanded,
+    onToggle: onToggle,
+    config: config
+  })));
+});
+ExpansionCell.displayName = "ExpansionCell";
+var ExpandedContent = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
+  var rowId = _ref3.rowId,
+    rowData = _ref3.rowData,
+    config = _ref3.config,
+    colSpan = _ref3.colSpan;
+  var renderContent = (0, _react.useCallback)(function () {
+    if (config.renderPartial) {
+      var name = config.name,
+        content = config.content,
+        restConfig = (0, _objectWithoutProperties2["default"])(config, _excluded);
+      var partialProps = _objectSpread({
+        name: name || "table_row",
+        content: content,
+        rowData: rowData,
+        rowId: rowId
+      }, restConfig);
+      var onLoad = function onLoad() {
+        console.log("Partial content loaded for row:", rowId);
+      };
+      return config.renderPartial(partialProps, onLoad);
+    }
+    if (config.children) {
+      return config.children;
+    }
+    return __jsx("div", null, config.content || "No content available");
+  }, [config, rowData, rowId]);
+  return __jsx(_material.TableRow, {
+    className: "expanded-row-content",
+    "data-row-id": rowId,
+    style: {
+      backgroundColor: EXPANDED_ROW_BG_COLOR
+    }
+  }, __jsx(_material.TableCell, {
+    colSpan: colSpan,
+    style: {
+      padding: "16px",
+      borderBottom: "1px solid #e0e0e0"
+    }
+  }, renderContent()));
+});
+ExpandedContent.displayName = "ExpandedContent";
+
+// Custom hook for expansion logic
+var useExpansionPosition = function useExpansionPosition(hasExpansion, rowExpansionConfig, columns) {
+  return (0, _react.useMemo)(function () {
+    if (!hasExpansion || !rowExpansionConfig) return -1;
+    var position = rowExpansionConfig.position;
+    var parsedPosition = parsePosition(position);
+
+    // Insert before last column
+    if (parsedPosition === -1) {
+      return columns.length - 1;
+    }
+
+    // Position is a number - calculate based on data columns
+    if (!isNaN(parsedPosition)) {
+      var firstDataColumnIndex = columns.findIndex(function (col) {
+        return !isSystemColumn(col.id);
+      });
+      return Math.max(0, firstDataColumnIndex + parsedPosition);
+    }
+
+    // Position is a column name
+    if (typeof position === "string") {
+      var columnIndex = columns.findIndex(function (col) {
+        // Check direct match with id or accessorKey
+        if (col.id === position || col.accessorKey === position) {
+          return true;
+        }
+        // For nested paths like "name.location.url", TanStack converts dots to underscores in id
+        var normalizedPosition = position.replace(/\./g, "_");
+        return col.id === normalizedPosition;
+      });
+      // Return index + 1 to place AFTER the named column
+      return columnIndex >= 0 ? columnIndex + 1 : 0;
+    }
+    return 0;
+  }, [hasExpansion, rowExpansionConfig, columns]);
+};
+
+// Main component
+var TableBodyComponentBase = function TableBodyComponentBase(_ref4) {
+  var table = _ref4.table,
+    columns = _ref4.columns,
+    _ref4$rowClass = _ref4.rowClass,
+    rowClass = _ref4$rowClass === void 0 ? "" : _ref4$rowClass,
+    _ref4$formposition = _ref4.formposition,
+    formposition = _ref4$formposition === void 0 ? "bottom" : _ref4$formposition,
+    renderAddNewRow = _ref4.renderAddNewRow,
+    onRowClick = _ref4.onRowClick,
+    isRowActive = _ref4.isRowActive,
+    isRowSelected = _ref4.isRowSelected,
+    _ref4$nodatamessage = _ref4.nodatamessage,
+    nodatamessage = _ref4$nodatamessage === void 0 ? _utils.TABLE_MESSAGES.noDataMessage : _ref4$nodatamessage,
+    _ref4$loadingdatamsg = _ref4.loadingdatamsg,
+    loadingdatamsg = _ref4$loadingdatamsg === void 0 ? _utils.TABLE_MESSAGES.loadingMessage : _ref4$loadingdatamsg,
+    _ref4$isLoading = _ref4.isLoading,
+    isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+    rowExpansionConfig = _ref4.rowExpansionConfig,
+    _ref4$expandedRows = _ref4.expandedRows,
+    expandedRows = _ref4$expandedRows === void 0 ? new Set() : _ref4$expandedRows,
+    toggleRowExpansion = _ref4.toggleRowExpansion,
+    isRowExpanded = _ref4.isRowExpanded;
+  var hasExpansion = !!(rowExpansionConfig !== null && rowExpansionConfig !== void 0 && rowExpansionConfig.show && toggleRowExpansion && isRowExpanded);
+  var expansionInsertIndex = useExpansionPosition(hasExpansion, rowExpansionConfig || null, columns);
+  var totalColumns = columns.length + (hasExpansion ? 1 : 0);
+  var renderExpansionCell = (0, _react.useCallback)(function (rowId, rowData) {
+    if (!hasExpansion || !rowExpansionConfig) return null;
+    return __jsx(ExpansionCell, {
+      key: "expansion-".concat(rowId),
+      rowId: rowId,
+      rowData: rowData,
+      isExpanded: isRowExpanded(rowId),
+      onToggle: toggleRowExpansion,
+      config: rowExpansionConfig
+    });
+  }, [hasExpansion, rowExpansionConfig, isRowExpanded, toggleRowExpansion]);
+  var renderDataRow = (0, _react.useCallback)(function (row) {
+    var rowId = row.id;
+    var isSelected = isRowSelected(rowId);
+    var isActive = isRowActive(rowId, isSelected);
+    var rowIsExpanded = (isRowExpanded === null || isRowExpanded === void 0 ? void 0 : isRowExpanded(rowId)) || false;
+    return __jsx(_react.Fragment, {
+      key: rowId
+    }, __jsx(_material.TableRow, {
+      className: "".concat(_utils.TABLE_CSS_CLASSES.tableRow, " ").concat(isActive ? "active" : "", " ").concat(rowClass),
+      onClick: function onClick(event) {
+        return onRowClick(event, row.original, rowId);
+      },
+      style: {
+        cursor: "pointer"
+      }
+    }, row.getVisibleCells().map(function (cell, cellIndex) {
+      var _cell$column$columnDe, _cell$column$columnDe2, _cell$column$columnDe3;
+      return __jsx(_react.Fragment, {
+        key: "cell-".concat(cellIndex)
+      }, hasExpansion && cellIndex === expansionInsertIndex && renderExpansionCell(rowId, row.original), __jsx(_material.TableCell, {
+        key: cell.id,
+        title: row.getValue(cell.column.id) ? String(row.getValue(cell.column.id)) : "",
+        className: "".concat(_utils.TABLE_CSS_CLASSES.tableCell, " ").concat(((_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.className) || "").trim(),
+        style: _objectSpread({
+          width: cell.column.getSize(),
+          textAlign: (_cell$column$columnDe2 = cell.column.columnDef.meta) === null || _cell$column$columnDe2 === void 0 ? void 0 : _cell$column$columnDe2.textAlign,
+          backgroundColor: (_cell$column$columnDe3 = cell.column.columnDef.meta) === null || _cell$column$columnDe3 === void 0 ? void 0 : _cell$column$columnDe3.backgroundColor
+        }, function () {
+          var _ref5 = cell.column.columnDef.meta || {},
+            className = _ref5.className,
+            textAlign = _ref5.textAlign,
+            backgroundColor = _ref5.backgroundColor,
+            otherMeta = (0, _objectWithoutProperties2["default"])(_ref5, _excluded2);
+          return otherMeta;
+        }())
+      }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+    })), hasExpansion && rowIsExpanded && rowExpansionConfig && __jsx(ExpandedContent, {
+      rowId: rowId,
+      rowData: row.original,
+      config: rowExpansionConfig,
+      colSpan: totalColumns
+    }));
+  }, [isRowSelected, isRowActive, rowClass, onRowClick, hasExpansion, expansionInsertIndex, renderExpansionCell, isRowExpanded, rowExpansionConfig, totalColumns]);
+
+  // Render logic
+  var renderTableContent = function renderTableContent() {
+    var rows = table.getRowModel().rows;
+    if (rows.length === 0) {
+      return __jsx(EmptyRow, {
+        colSpan: totalColumns,
+        message: nodatamessage,
+        rowClass: rowClass
+      });
+    }
+    return rows.map(renderDataRow);
+  };
+  return __jsx(_material.TableBody, {
+    className: "app-grid-content ".concat(_utils.TABLE_CSS_CLASSES.gridBody)
+  }, formposition === "top" && renderAddNewRow(), renderTableContent(), formposition === "bottom" && renderAddNewRow());
+};
+var TableBodyComponent = exports.TableBodyComponent = /*#__PURE__*/(0, _react.memo)(TableBodyComponentBase, function (prevProps, nextProps) {
+  // Since table key forces rebuilds on pagination, we can use simpler memoization
+  // Just prevent re-renders from function reference changes
+
+  // Allow re-render for these critical changes
+  if (prevProps.isLoading !== nextProps.isLoading) return false;
+  if (prevProps.rowClass !== nextProps.rowClass) return false;
+  if (prevProps.formposition !== nextProps.formposition) return false;
+  if (prevProps.nodatamessage !== nextProps.nodatamessage) return false;
+
+  // Check expandedRows
+  if (prevProps.expandedRows !== nextProps.expandedRows) {
+    var _prevProps$expandedRo, _nextProps$expandedRo;
+    var prevSize = ((_prevProps$expandedRo = prevProps.expandedRows) === null || _prevProps$expandedRo === void 0 ? void 0 : _prevProps$expandedRo.size) || 0;
+    var nextSize = ((_nextProps$expandedRo = nextProps.expandedRows) === null || _nextProps$expandedRo === void 0 ? void 0 : _nextProps$expandedRo.size) || 0;
+    if (prevSize !== nextSize) return false;
+  }
+
+  // Block re-render only for function reference changes (prevents infinite loops)
+  // Table key handles pagination rebuilds, so we don't need complex row comparisons
+  return true; // Prevent re-render for function reference changes only
+});
+TableBodyComponent.displayName = "TableBodyComponent";

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

@@ -0,0 +1,325 @@
+"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("../../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;
+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;
+  // 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]);
+
+  // Filter out non-data columns for the dropdown using lodash
+  var actionColumnIds = ["actions", "row-operations", "multiSelect", "radioSelect", "row-index"];
+  var searchableColumns = (0, _lodashEs.filter)(columns || [], function (col) {
+    return (col === null || col === void 0 ? void 0 : col.accessorKey) && !(0, _lodashEs.includes)(actionColumnIds, col === null || col === void 0 ? void 0 : col.id);
+  });
+  var handleSearch = function handleSearch() {
+    // Always update the value when search is triggered
+    onChange(inputValue);
+
+    // Update column selection if it changed
+    if (localSelectedColumn !== selectedColumn) {
+      onColumnChange(localSelectedColumn);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      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: function onChange(e) {
+      return setInputValue(e.target.value);
+    },
+    onKeyDown: handleKeyDown,
+    size: "small"
+  })), __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: function onChange(e) {
+      return setLocalSelectedColumn(e.target.value);
+    }
+  }, __jsx("option", {
+    value: "",
+    className: "placeholder"
+  }, "Select Field"), (0, _lodashEs.map)(searchableColumns, function (column, index) {
+    return __jsx("option", {
+      key: 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"
+  })))));
+});
+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)("anywhereignorecase"),
+    selectedMatchMode = _useState5[0],
+    setSelectedMatchMode = _useState5[1];
+  var filterButtonRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    setLocalValue(value);
+  }, [value]);
+  var handleApplyFilter = function handleApplyFilter() {
+    // Only trigger onChange if the value has actually changed
+    if (localValue !== value) {
+      onChange(columnId, localValue, selectedMatchMode);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApplyFilter();
+    }
+    e.stopPropagation(); // Prevent table keyboard shortcuts
+  };
+  var handleFilterIconClick = function handleFilterIconClick(e) {
+    e.stopPropagation();
+    setAnchorEl(filterButtonRef.current);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    setAnchorEl(null);
+  };
+  var handleMatchModeSelect = function handleMatchModeSelect(matchMode) {
+    setSelectedMatchMode(matchMode);
+    if (onMatchModeChange) {
+      onMatchModeChange(columnId, matchMode);
+    }
+    // Apply the filter with new match mode if there's a value
+    if (localValue) {
+      onChange(columnId, localValue, matchMode);
+    }
+    handleClosePopover();
+  };
+
+  // Get the data type from widget type
+  var getDataTypeFromWidget = function getDataTypeFromWidget(widget) {
+    var editType = columnMeta.editinputtype;
+
+    // Check edit input type first
+    if (editType === "number") return "number";
+    if (editType === "date" || editType === "datetime-local" || editType === "time") return "date";
+
+    // Check widget type
+    switch (widget) {
+      case "number":
+      case "currency":
+      case "integer":
+        return "number";
+      case "date":
+      case "datetime":
+      case "time":
+      case "timestamp":
+        return "date";
+      case "text":
+      case "textarea":
+      case "string":
+      default:
+        return "string";
+    }
+  };
+
+  // Get available match modes for the column type
+  var getMatchModes = function getMatchModes() {
+    var dataType = getDataTypeFromWidget(widgetType);
+    var matchModeMap = (0, _utils.getMatchModeTypesMap)();
+    return matchModeMap[dataType] || matchModeMap["default"] || [];
+  };
+  var matchModes = getMatchModes();
+  var matchModeMessages = (0, _utils.getMatchModeMsgs)(listener === null || listener === void 0 ? void 0 : listener.appLocale);
+
+  // Get CSS class based on widget type
+  var getInputGroupClass = function getInputGroupClass() {
+    var dataType = getDataTypeFromWidget(widgetType);
+    switch (dataType) {
+      case "number":
+        return "input-group number input-group-sm";
+      case "date":
+        return "input-group date input-group-sm";
+      default:
+        return "input-group text input-group-sm";
+    }
+  };
+  return __jsx(_material.Box, {
+    component: "div",
+    "data-col-identifier": columnAccessorKey,
+    className: getInputGroupClass()
+  }, __jsx(_material.Box, {
+    onBlur: handleApplyFilter,
+    onKeyDown: handleKeyDown,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, renderFormWidget(columnId, widgetType, localValue, function (value) {
+    return setLocalValue(value);
+  }, {
+    placeholder: "",
+    sessionKey: "filter_".concat(columnId),
+    column: columnMeta
+  })), __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"
+  })), Boolean(anchorEl) && __jsx(_material.ClickAwayListener, {
+    onClickAway: handleClosePopover
+  }, __jsx(_material.Box, {
+    className: "dropdown open show",
+    style: {
+      position: "absolute",
+      top: "100%",
+      right: 0,
+      zIndex: 1000
+    }
+  }, __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",
+      onClick: function onClick() {
+        return handleMatchModeSelect(mode);
+      },
+      sx: {
+        cursor: "pointer",
+        textDecoration: "none"
+      }
+    }, matchModeMessages[mode] || mode));
+  }))))));
+});
+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 _columnFilters$column;
+    // Use accessorKey as the column ID if id is not present
+    var columnId = column.id || column.accessorKey;
+
+    // Skip filter for action columns or columns that are not filterable
+    var actionColumnIds = ["actions", "row-operations", "multiSelect", "radioSelect", "row-index"];
+    var isActionColumn = (0, _lodashEs.includes)(actionColumnIds, columnId) || column.isRowIndex;
+    if (isActionColumn || column.enableColumnFilter === false || !column.accessorKey) {
+      return __jsx("th", {
+        key: columnId
+      });
+    }
+
+    // Get the original column metadata if available
+    var columnMeta = column.meta || {};
+    var widgetType = columnMeta.editWidgetType || columnMeta.widgetType || "text";
+    return __jsx("th", {
+      key: columnId,
+      "data-col-id": index + 1
+    }, __jsx(ColumnFilterCell, {
+      columnId: columnId,
+      value: ((_columnFilters$column = columnFilters[columnId]) === null || _columnFilters$column === void 0 ? void 0 : _columnFilters$column.value) || "",
+      onChange: onColumnFilterChange,
+      widgetType: widgetType,
+      columnMeta: columnMeta,
+      columnAccessorKey: column.accessorKey,
+      renderFormWidget: renderFormWidget,
+      listener: listener
+    }));
+  }));
+});
+TableFilterRow.displayName = "TableFilterRow";