@mui/x-data-grid-premium/esm/components/columnMenu/menuItems/GridColumnMenuAggregationItem.js

The Premium plan edition of the MUI X Data Grid Components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["native"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { useGridSelector } from '@mui/x-data-grid-pro';
import useId from '@mui/utils/useId';
import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
import { canColumnHaveAggregationFunction, getAggregationFunctionLabel, getAvailableAggregationFunctions } from "../../../hooks/features/aggregation/gridAggregationUtils.js";
import { gridAggregationModelSelector } from "../../../hooks/features/aggregation/gridAggregationSelectors.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createElement as _createElement } from "react";
function GridColumnMenuAggregationItem(props) {
  const {
    colDef
  } = props;
  const apiRef = useGridApiContext();
  const inputRef = React.useRef(null);
  const rootProps = useGridRootProps();
  const id = useId();
  const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
  const availableAggregationFunctions = React.useMemo(() => getAvailableAggregationFunctions({
    aggregationFunctions: rootProps.aggregationFunctions,
    colDef,
    isDataSource: !!rootProps.dataSource
  }), [colDef, rootProps.aggregationFunctions, rootProps.dataSource]);
  const _ref = rootProps.slotProps?.baseSelect || {},
    {
      native: isBaseSelectNative = false
    } = _ref,
    baseSelectProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
  const selectedAggregationRule = React.useMemo(() => {
    if (!colDef || !aggregationModel[colDef.field]) {
      return '';
    }
    const aggregationFunctionName = aggregationModel[colDef.field];
    if (canColumnHaveAggregationFunction({
      colDef,
      aggregationFunctionName,
      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName],
      isDataSource: !!rootProps.dataSource
    })) {
      return aggregationFunctionName;
    }
    return '';
  }, [rootProps.aggregationFunctions, rootProps.dataSource, aggregationModel, colDef]);
  const handleAggregationItemChange = event => {
    const newAggregationItem = event.target?.value || undefined;
    const currentModel = gridAggregationModelSelector(apiRef);
    const _colDef$field = colDef.field,
      otherColumnItems = _objectWithoutPropertiesLoose(currentModel, [_colDef$field].map(_toPropertyKey));
    const newModel = newAggregationItem == null ? otherColumnItems : _extends({}, otherColumnItems, {
      [colDef?.field]: newAggregationItem
    });
    apiRef.current.setAggregationModel(newModel);
    apiRef.current.hideColumnMenu();
  };
  const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
  const handleMenuItemKeyDown = React.useCallback(event => {
    if (event.key === 'Enter' || event.key === ' ') {
      inputRef.current.focus();
    }
  }, []);
  const handleSelectKeyDown = React.useCallback(event => {
    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === ' ') {
      event.stopPropagation();
    }
  }, []);
  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
    inert: true,
    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
      fontSize: "small"
    }),
    onKeyDown: handleMenuItemKeyDown,
    children: /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
      labelId: `${id}-label`,
      id: `${id}-input`,
      value: selectedAggregationRule,
      label: label,
      onChange: handleAggregationItemChange,
      onKeyDown: handleSelectKeyDown,
      onBlur: event => event.stopPropagation(),
      native: isBaseSelectNative,
      fullWidth: true,
      size: "small",
      style: {
        minWidth: 150
      },
      slotProps: {
        htmlInput: {
          ref: inputRef
        }
      }
    }, baseSelectProps, {
      children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
        native: isBaseSelectNative,
        value: "",
        children: "..."
      })), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
        key: aggFunc,
        value: aggFunc,
        native: isBaseSelectNative
      }), getAggregationFunctionLabel({
        apiRef,
        aggregationRule: {
          aggregationFunctionName: aggFunc,
          aggregationFunction: rootProps.aggregationFunctions[aggFunc]
        }
      })))]
    }))
  });
}
process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  colDef: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired
} : void 0;
export { GridColumnMenuAggregationItem };