Feature/grid filter continued

package.json

@@ -1,6 +1,6 @@
 {
     "name": "openstack-uicore-foundation",
-    "version": "5.0.36",
+    "version": "5.0.37-beta.0",
     "description": "ui reactjs components for openstack marketing site",
     "main": "lib/openstack-uicore-foundation.js",
     "scripts": {

src/components/index.js

@@ -78,6 +78,8 @@ export {useSnackbarMessage} from './mui/SnackbarNotification/Context'
 export {default as MuiInfiniteTable} from './mui/infinite-table'
 export {default as MuiEditableTable} from './mui/editable-table/mui-table-editable'
 export {default as MuiTable} from './mui/table/mui-table'
+export {default as MuiCustomTablePagination} from './mui/table/CustomTablePagination'
+export {default as MuiBulkEditTable} from './mui/BulkEditTable'
 export {default as MuiSponsorOrderGrid} from './mui/SponsorOrderGrid'
 export {TotalRow as MuiTotalRow, NotesRow as MuiNotesRow, FeeRow as MuiFeeRow, PaymentRow as MuiPaymentRow, RefundRow as MuiRefundRow, DiscountRow as MuiDiscountRow} from './mui/table/extra-rows'
 export {default as MuiFormikAsyncSelect} from './mui/formik-inputs/mui-formik-async-select'

src/components/mui/AsyncSelectInput.jsx

@@ -0,0 +1,163 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import T from "i18n-react/dist/i18n-react";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import CircularProgress from "@mui/material/CircularProgress";
+import { DEBOUNCE_WAIT_250 } from "../../utils/constants";
+
+const defaultFormatOption = (item) => ({
+  value: item.id,
+  label: item.name
+});
+
+const optionShape = PropTypes.shape({
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  label: PropTypes.string,
+  raw: PropTypes.object
+});
+
+const AsyncSelectInput = ({
+  id,
+  value,
+  label,
+  placeholder,
+  disabled,
+  multiple,
+  queryFunction,
+  formatOption,
+  debounceWait,
+  minSearchLength,
+  onChange,
+  ...rest
+}) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const debounceRef = useRef(null);
+  const mountedRef = useRef(false);
+  const requestIdRef = useRef(0);
+
+  // Filter.jsx passes `options` generically to every ValueInput type (meant
+  // for the sync `select` type); this type fetches its own, so it's stripped
+  // out here rather than spread onto the Autocomplete below.
+  const { options: _staleOptions, ...autocompleteProps } = rest;
+
+  const fetchOptions = (searchTerm) => {
+    if (minSearchLength > 0 && (!searchTerm || searchTerm.length < minSearchLength)) {
+      setOptions([]);
+      return;
+    }
+    // Capture the ID for this request so the callback can discard stale ones.
+    requestIdRef.current += 1;
+    const thisRequestId = requestIdRef.current;
+    setLoading(true);
+    queryFunction(searchTerm, (rawResults) => {
+      if (!mountedRef.current || thisRequestId !== requestIdRef.current) return;
+      setOptions((rawResults || []).map((item) => ({ ...formatOption(item), raw: item })));
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    mountedRef.current = true;
+    fetchOptions("");
+    return () => {
+      mountedRef.current = false;
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleInputChange = (event, newInputValue, reason) => {
+    if (reason !== "input") return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => fetchOptions(newInputValue), debounceWait);
+  };
+
+  const handleChange = (event, selected) => {
+    onChange({ target: { value: multiple ? selected || [] : selected || null } });
+  };
+
+  // Filter.jsx's single-value default is "" (not null); treat it as empty.
+  const normalizedValue = multiple ? value || [] : value || null;
+  const finalPlaceholder =
+    placeholder || T.translate("placeholders.async");
+
+  return (
+    <Autocomplete
+      id={id}
+      options={options}
+      value={normalizedValue}
+      onChange={handleChange}
+      onInputChange={handleInputChange}
+      loading={loading}
+      multiple={multiple}
+      disabled={disabled}
+      fullWidth
+      size="small"
+      getOptionLabel={(option) => option?.label || ""}
+      isOptionEqualToValue={(option, val) => option.value === val.value}
+      renderInput={(params) => (
+        <TextField
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...params}
+          label={label}
+          placeholder={finalPlaceholder}
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading && <CircularProgress color="inherit" size={16} />}
+                  {params.InputProps?.endAdornment}
+                </>
+              )
+            }
+          }}
+        />
+      )}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...autocompleteProps}
+    />
+  );
+};
+
+AsyncSelectInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([optionShape, PropTypes.arrayOf(optionShape), PropTypes.string]),
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  multiple: PropTypes.bool,
+  queryFunction: PropTypes.func.isRequired,
+  formatOption: PropTypes.func,
+  debounceWait: PropTypes.number,
+  minSearchLength: PropTypes.number,
+  onChange: PropTypes.func.isRequired
+};
+
+AsyncSelectInput.defaultProps = {
+  value: null,
+  label: "",
+  placeholder: "",
+  disabled: false,
+  multiple: false,
+  formatOption: defaultFormatOption,
+  debounceWait: DEBOUNCE_WAIT_250,
+  minSearchLength: 0
+};
+
+export default AsyncSelectInput;

src/components/mui/BulkEditTable/BulkEditTable.js

@@ -0,0 +1,179 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Checkbox from "@mui/material/Checkbox";
+import Toolbar from "./components/Toolbar";
+import Heading from "./components/Heading";
+import Row from "./components/Row";
+import useRowSelection from "./hooks/useRowSelection";
+import styles from "./BulkEditTable.module.less";
+import CustomTablePagination from "../table/CustomTablePagination";
+
+const BulkEditTable = ({ options, columns, data, onSort, onUpdate, totalRows, perPage, currentPage, onPageChange, onPerPageChange, idKey }) => {
+  const {
+    selectedRows,
+    isSelected,
+    toggleRow,
+    isAllSelected,
+    toggleAll,
+    editField,
+    editEnabled,
+    enterEditMode,
+    cancel,
+    reset
+  } = useRowSelection(idKey);
+
+  const dataIds = data.map((row) => row[idKey]).join(",");
+
+  // reset selection/edit state whenever the set of rows shown changes
+  // (pagination, filtering, sorting, search, etc.)
+  useEffect(() => {
+    reset();
+  }, [dataIds]);
+
+  const getSortDir = (columnKey) =>
+    columnKey === options.sortCol ? options.sortDir : null;
+
+  const handleUpdateEvents = (evt) => {
+    evt.stopPropagation();
+    evt.preventDefault();
+    Promise.resolve(onUpdate(selectedRows))
+      .then(() => reset())
+      .catch((error) => {
+        console.error("Error updating events:", error);
+      });
+  };
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Toolbar
+        editEnabled={editEnabled}
+        hasSelection={selectedRows.length > 0}
+        onEdit={enterEditMode}
+        onApply={handleUpdateEvents}
+        onCancel={cancel}
+      />
+      <Paper elevation={0} sx={{ width: "100%", mb: 2 }}>
+        <TableContainer
+          component={Paper}
+          className={styles.tableWrapper}
+          sx={{ borderRadius: 0, boxShadow: "none" }}
+        >
+          <Table>
+            <TableHead sx={{ backgroundColor: "#EAEDF4" }}>
+              <TableRow>
+                <TableCell
+                  align="center"
+                  className={styles.checkColumn}
+                  sx={{ backgroundColor: "#EAEDF4" }}
+                >
+                  <Checkbox
+                    checked={isAllSelected(data)}
+                    onChange={() => toggleAll(data)}
+                    slotProps={{ input: { "aria-label": "select all" } }}
+                  />
+                </TableCell>
+                {columns.map((col, i) => {
+                  const sortable = !!col.sortable;
+                  const colWidth = col.width ?? "";
+
+                  return (
+                    <Heading
+                      editEnabled={editEnabled}
+                      onSort={onSort}
+                      sortDir={getSortDir(col.columnKey)}
+                      sortable={sortable}
+                      columnIndex={i}
+                      columnKey={col.columnKey}
+                      width={colWidth}
+                      key={`heading_${col.columnKey}`}
+                    >
+                      {col.header ?? col.label ?? col.value}
+                    </Heading>
+                  );
+                })}
+                {(options.actions?.edit || options.actions?.delete) && (
+                  <TableCell
+                    align="center"
+                    className={styles.actionColumn}
+                    sx={{ backgroundColor: "#EAEDF4" }}
+                  >
+                    {options.actionsHeader || " "}
+                  </TableCell>
+                )}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {columns.length > 0 &&
+                data.map((row) => (
+                  <Row
+                    key={`row_${row[idKey]}`}
+                    row={row}
+                    idKey={idKey}
+                    editEnabled={editEnabled}
+                    isSelected={isSelected(row[idKey])}
+                    editRow={selectedRows.find((r) => r[idKey] === row[idKey]) || row}
+                    onToggle={() => toggleRow(row)}
+                    onFieldChange={(key, value) =>
+                      editField(row[idKey], key, value)
+                    }
+                    columns={columns}
+                    actions={options.actions}
+                  />
+                ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        {perPage && currentPage && onPageChange && (
+          <CustomTablePagination
+            totalRows={totalRows}
+            perPage={perPage}
+            currentPage={currentPage}
+            onPageChange={onPageChange}
+            onPerPageChange={onPerPageChange}
+          />
+        )}
+      </Paper>
+    </Box>
+  );
+};
+
+BulkEditTable.propTypes = {
+  options: PropTypes.object.isRequired,
+  columns: PropTypes.array.isRequired,
+  data: PropTypes.array.isRequired,
+  onSort: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  idKey: PropTypes.string,
+  totalRows: PropTypes.number,
+  perPage: PropTypes.number,
+  currentPage: PropTypes.number,
+  onPageChange: PropTypes.func,
+  onPerPageChange: PropTypes.func
+};
+
+BulkEditTable.defaultProps = {
+  idKey: "id"
+};
+
+export default BulkEditTable;