@mui/x-data-grid-pro 5.5.1 → 5.6.0

package/components/GridColumnPinningMenuItems.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import { GridPinnedPosition } from '../hooks/features/columnPinning';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const GridColumnPinningMenuItems = props => {
+  const {
+    column,
+    onClick
+  } = props;
+  const apiRef = useGridApiContext();
+
+  const pinColumn = side => event => {
+    apiRef.current.pinColumn(column.field, side);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const unpinColumn = event => {
+    apiRef.current.unpinColumn(column.field);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  if (!column) {
+    return null;
+  }
+
+  const side = apiRef.current.isColumnPinned(column.field);
+
+  if (side) {
+    const otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
+    const label = otherSide === GridPinnedPosition.right ? 'pinToRight' : 'pinToLeft';
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(MenuItem, {
+        onClick: pinColumn(otherSide),
+        children: apiRef.current.getLocaleText(label)
+      }), /*#__PURE__*/_jsx(MenuItem, {
+        onClick: unpinColumn,
+        children: apiRef.current.getLocaleText('unpin')
+      })]
+    });
+  }
+
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(MenuItem, {
+      onClick: pinColumn(GridPinnedPosition.left),
+      children: apiRef.current.getLocaleText('pinToLeft')
+    }), /*#__PURE__*/_jsx(MenuItem, {
+      onClick: pinColumn(GridPinnedPosition.right),
+      children: apiRef.current.getLocaleText('pinToRight')
+    })]
+  });
+};
+
+process.env.NODE_ENV !== "production" ? GridColumnPinningMenuItems.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  column: PropTypes.object,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnPinningMenuItems };

package/components/GridDetailPanelToggleCell.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GridRenderCellParams } from '@mui/x-data-grid';
+declare const GridDetailPanelToggleCell: {
+    (props: GridRenderCellParams): JSX.Element;
+    propTypes: any;
+};
+export { GridDetailPanelToggleCell };

package/components/GridDetailPanelToggleCell.js

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { gridDetailPanelExpandedRowsContentCacheSelector } from '../hooks/features/detailPanel/gridDetailPanelSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    isExpanded
+  } = ownerState;
+  const slots = {
+    root: ['detailPanelToggleCell', isExpanded && 'detailPanelToggleCell--expanded']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridDetailPanelToggleCell = props => {
+  const {
+    id,
+    value: isExpanded
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const ownerState = {
+    classes: rootProps.classes,
+    isExpanded
+  };
+  const classes = useUtilityClasses(ownerState);
+  const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
+  const hasContent = /*#__PURE__*/React.isValidElement(contentCache[id]);
+  const Icon = isExpanded ? rootProps.components.DetailPanelCollapseIcon : rootProps.components.DetailPanelExpandIcon;
+  return /*#__PURE__*/_jsx(IconButton, {
+    size: "small",
+    tabIndex: -1,
+    disabled: !hasContent,
+    className: classes.root,
+    "aria-label": isExpanded ? apiRef.current.getLocaleText('collapseDetailPanel') : apiRef.current.getLocaleText('expandDetailPanel'),
+    children: /*#__PURE__*/_jsx(Icon, {
+      fontSize: "inherit"
+    })
+  });
+};
+
+process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any.isRequired,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {GridCellValue} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any.isRequired
+} : void 0;
+export { GridDetailPanelToggleCell };

package/components/GridGroupingColumnLeafCell.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { GridRenderCellParams } from '@mui/x-data-grid';
+declare const GridGroupingColumnLeafCell: (props: GridRenderCellParams) => JSX.Element;
+export { GridGroupingColumnLeafCell };

package/components/GridGroupingColumnLeafCell.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GridGroupingColumnLeafCell = props => {
+  var _props$formattedValue;
+
+  const {
+    rowNode
+  } = props;
+  const rootProps = useGridRootProps();
+  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 1 : rowNode.depth * 2;
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      ml: marginLeft
+    },
+    children: (_props$formattedValue = props.formattedValue) != null ? _props$formattedValue : props.value
+  });
+};
+
+export { GridGroupingColumnLeafCell };

package/components/GridGroupingCriteriaCell.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { GridRenderCellParams } from '@mui/x-data-grid';
+interface GridGroupingCriteriaCellProps extends GridRenderCellParams {
+    hideDescendantCount?: boolean;
+}
+declare const GridGroupingCriteriaCell: {
+    (props: GridGroupingCriteriaCellProps): JSX.Element;
+    propTypes: any;
+};
+export { GridGroupingCriteriaCell };

package/components/GridGroupingCriteriaCell.js

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass, GridEvents } from '@mui/x-data-grid';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['groupingCriteriaCell'],
+    toggle: ['groupingCriteriaCellToggle']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridGroupingCriteriaCell = props => {
+  var _filteredDescendantCo;
+
+  const {
+    id,
+    field,
+    rowNode,
+    hideDescendantCount,
+    formattedValue
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
+  const filteredDescendantCount = (_filteredDescendantCo = filteredDescendantCountLookup[rowNode.id]) != null ? _filteredDescendantCo : 0;
+  const Icon = rowNode.childrenExpanded ? rootProps.components.GroupingCriteriaCollapseIcon : rootProps.components.GroupingCriteriaExpandIcon;
+
+  const handleKeyDown = event => {
+    if (event.key === ' ') {
+      event.stopPropagation();
+    }
+
+    apiRef.current.publishEvent(GridEvents.cellKeyDown, props, event);
+  };
+
+  const handleClick = event => {
+    apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+    apiRef.current.setCellFocus(id, field);
+    event.stopPropagation();
+  };
+
+  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 0 : rowNode.depth * 2;
+  return /*#__PURE__*/_jsxs(Box, {
+    className: classes.root,
+    sx: {
+      ml: marginLeft
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.toggle,
+      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand'),
+        children: /*#__PURE__*/_jsx(Icon, {
+          fontSize: "inherit"
+        })
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : '']
+    })]
+  });
+};
+
+process.env.NODE_ENV !== "production" ? GridGroupingCriteriaCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {GridCellValue} The cell value.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool])
+} : void 0;
+export { GridGroupingCriteriaCell };

package/components/GridRowGroupableColumnMenuItems.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GridColDef } from '@mui/x-data-grid';
+interface GridRowGroupableColumnMenuItemsProps {
+    column?: GridColDef;
+    onClick?: (event: React.MouseEvent<any>) => void;
+}
+declare const GridRowGroupableColumnMenuItems: {
+    (props: GridRowGroupableColumnMenuItemsProps): JSX.Element | null;
+    propTypes: any;
+};
+export { GridRowGroupableColumnMenuItems };

package/components/GridRowGroupableColumnMenuItems.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import { gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GridRowGroupableColumnMenuItems = props => {
+  var _columnsLookup$column;
+
+  const {
+    column,
+    onClick
+  } = props;
+  const apiRef = useGridApiContext();
+  const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
+  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
+
+  if (!(column != null && column.groupable)) {
+    return null;
+  }
+
+  const ungroupColumn = event => {
+    apiRef.current.removeRowGroupingCriteria(column.field);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const groupColumn = event => {
+    apiRef.current.addRowGroupingCriteria(column.field);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const name = (_columnsLookup$column = columnsLookup[column.field].headerName) != null ? _columnsLookup$column : column.field;
+
+  if (rowGroupingModel.includes(column.field)) {
+    return /*#__PURE__*/_jsx(MenuItem, {
+      onClick: ungroupColumn,
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
+    });
+  }
+
+  return /*#__PURE__*/_jsx(MenuItem, {
+    onClick: groupColumn,
+    children: apiRef.current.getLocaleText('groupColumn')(name)
+  });
+};
+
+process.env.NODE_ENV !== "production" ? GridRowGroupableColumnMenuItems.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  column: PropTypes.object,
+  onClick: PropTypes.func
+} : void 0;
+export { GridRowGroupableColumnMenuItems };

package/components/GridRowGroupingColumnMenuItems.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GridColDef } from '@mui/x-data-grid';
+interface GridRowGroupingColumnMenuItemsProps {
+    column?: GridColDef;
+    onClick?: (event: React.MouseEvent<any>) => void;
+}
+declare const GridRowGroupingColumnMenuItems: {
+    (props: GridRowGroupingColumnMenuItemsProps): JSX.Element | null;
+    propTypes: any;
+};
+export { GridRowGroupingColumnMenuItems };

package/components/GridRowGroupingColumnMenuItems.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import { useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector';
+import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from '../hooks/features/rowGrouping/gridRowGroupingUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GridRowGroupingColumnMenuItems = props => {
+  const {
+    column,
+    onClick
+  } = props;
+  const apiRef = useGridApiContext();
+  const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
+  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
+
+  const renderUnGroupingMenuItem = field => {
+    var _columnsLookup$field$;
+
+    const ungroupColumn = event => {
+      apiRef.current.removeRowGroupingCriteria(field);
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const name = (_columnsLookup$field$ = columnsLookup[field].headerName) != null ? _columnsLookup$field$ : field;
+    return /*#__PURE__*/_jsx(MenuItem, {
+      onClick: ungroupColumn,
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
+    }, field);
+  };
+
+  if (!column || !isGroupingColumn(column.field)) {
+    return null;
+  }
+
+  if (column.field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
+    return /*#__PURE__*/_jsx(React.Fragment, {
+      children: rowGroupingModel.map(renderUnGroupingMenuItem)
+    });
+  }
+
+  return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field));
+};
+
+process.env.NODE_ENV !== "production" ? GridRowGroupingColumnMenuItems.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  column: PropTypes.object,
+  onClick: PropTypes.func
+} : void 0;
+export { GridRowGroupingColumnMenuItems };

package/components/GridTreeDataGroupingCell.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { GridRenderCellParams } from '@mui/x-data-grid';
+interface GridTreeDataGroupingCellProps extends GridRenderCellParams {
+    hideDescendantCount?: boolean;
+}
+declare const GridTreeDataGroupingCell: {
+    (props: GridTreeDataGroupingCellProps): JSX.Element;
+    propTypes: any;
+};
+export { GridTreeDataGroupingCell };