@mui/x-data-grid-pro/modern/components/headerFiltering/GridHeaderFilterMenu.js

The Pro plan edition of the Data Grid components (MUI X).

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import { unstable_capitalize as capitalize, HTMLElementType } from '@mui/utils';
import { useGridApiContext, GridMenu } from '@mui/x-data-grid';
import { jsx as _jsx } from "react/jsx-runtime";
function GridHeaderFilterMenu({
  open,
  field,
  target,
  applyFilterChanges,
  operators,
  item,
  id,
  labelledBy
}) {
  const apiRef = useGridApiContext();
  const hideMenu = React.useCallback(() => {
    apiRef.current.hideHeaderFilterMenu();
  }, [apiRef]);
  const handleListKeyDown = React.useCallback(event => {
    if (event.key === 'Tab') {
      event.preventDefault();
    }
    if (event.key === 'Escape' || event.key === 'Tab') {
      hideMenu();
    }
  }, [hideMenu]);
  if (!target) {
    return null;
  }
  return /*#__PURE__*/_jsx(GridMenu, {
    placement: "bottom-end",
    open: open,
    target: target,
    onClose: hideMenu,
    children: /*#__PURE__*/_jsx(MenuList, {
      "aria-labelledby": labelledBy,
      id: id,
      onKeyDown: handleListKeyDown,
      children: operators.map((op, i) => {
        const label = op?.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(op.value)}`);
        return /*#__PURE__*/_jsx(MenuItem, {
          onClick: () => {
            applyFilterChanges(_extends({}, item, {
              operator: op.value
            }));
            hideMenu();
          },
          autoFocus: i === 0 ? open : false,
          selected: op.value === item.operator,
          children: label
        }, `${field}-${op.value}`);
      })
    })
  });
}
process.env.NODE_ENV !== "production" ? GridHeaderFilterMenu.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  applyFilterChanges: PropTypes.func.isRequired,
  field: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  item: PropTypes.shape({
    field: PropTypes.string.isRequired,
    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    operator: PropTypes.string.isRequired,
    value: PropTypes.any
  }).isRequired,
  labelledBy: PropTypes.string.isRequired,
  open: PropTypes.bool.isRequired,
  operators: PropTypes.arrayOf(PropTypes.shape({
    getApplyFilterFn: PropTypes.func.isRequired,
    getValueAsString: PropTypes.func,
    headerLabel: PropTypes.string,
    InputComponent: PropTypes.elementType,
    InputComponentProps: PropTypes.object,
    label: PropTypes.string,
    requiresFilterValue: PropTypes.bool,
    value: PropTypes.string.isRequired
  })).isRequired,
  target: HTMLElementType
} : void 0;
export { GridHeaderFilterMenu };