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

package/modern/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/modern/components/GridGroupingColumnLeafCell.js

@@ -0,0 +1,20 @@
+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 => {
+  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.value
+  });
+};
+
+export { GridGroupingColumnLeafCell };

package/modern/components/GridGroupingCriteriaCell.js

@@ -0,0 +1,148 @@
+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 => {
+  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 = filteredDescendantCountLookup[rowNode.id] ?? 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/modern/components/GridRowGroupableColumnMenuItems.js

@@ -0,0 +1,61 @@
+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 => {
+  const {
+    column,
+    onClick
+  } = props;
+  const apiRef = useGridApiContext();
+  const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
+  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
+
+  if (!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.field].headerName ?? 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/modern/components/GridRowGroupingColumnMenuItems.js

@@ -0,0 +1,56 @@
+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 => {
+    const ungroupColumn = event => {
+      apiRef.current.removeRowGroupingCriteria(field);
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const name = columnsLookup[field].headerName ?? 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/modern/components/GridTreeDataGroupingCell.js

@@ -0,0 +1,157 @@
+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 { isNavigationKey } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+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: ['treeDataGroupingCell'],
+    toggle: ['treeDataGroupingCellToggle']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridTreeDataGroupingCell = props => {
+  const {
+    id,
+    field,
+    formattedValue,
+    rowNode,
+    hideDescendantCount
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
+  const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
+  const Icon = rowNode.childrenExpanded ? rootProps.components.TreeDataCollapseIcon : rootProps.components.TreeDataExpandIcon;
+
+  const handleKeyDown = event => {
+    if (event.key === ' ') {
+      event.stopPropagation();
+    }
+
+    if (isNavigationKey(event.key) && !event.shiftKey) {
+      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, props, event);
+    }
+  };
+
+  const handleClick = event => {
+    apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+    apiRef.current.setCellFocus(id, field);
+    event.stopPropagation(); // TODO remove event.stopPropagation
+  };
+
+  return /*#__PURE__*/_jsxs(Box, {
+    className: classes.root,
+    sx: {
+      ml: rowNode.depth * 2
+    },
+    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" ? GridTreeDataGroupingCell.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,
+  hideDescendantCount: PropTypes.bool,
+
+  /**
+   * 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 { GridTreeDataGroupingCell };

package/modern/components/Watermark.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { useLicenseVerifier, LicenseStatus } from '@mui/x-license-pro';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function getLicenseErrorMessage(licenseStatus) {
+  switch (licenseStatus) {
+    case LicenseStatus.Expired:
+      return 'MUI X: License key expired';
+
+    case LicenseStatus.Invalid:
+      return 'MUI X: Invalid license key';
+
+    case LicenseStatus.NotFound:
+      return 'MUI X: Missing license key';
+
+    default:
+      throw new Error('MUI: Unhandled MUI X license status.');
+  }
+}
+
+export function Watermark() {
+  const licenseStatus = useLicenseVerifier();
+
+  if (licenseStatus === LicenseStatus.Valid) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      position: 'absolute',
+      pointerEvents: 'none',
+      color: '#8282829e',
+      zIndex: 100000,
+      width: '100%',
+      textAlign: 'center',
+      bottom: '50%',
+      right: 0,
+      letterSpacing: 5,
+      fontSize: 24
+    },
+    children: getLicenseErrorMessage(licenseStatus)
+  });
+}

package/modern/components/index.js

@@ -0,0 +1,3 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
+export * from './GridTreeDataGroupingCell';
+export * from './GridColumnPinningMenuItems';

package/modern/hooks/features/columnPinning/gridColumnPinningInterface.js

@@ -0,0 +1,11 @@
+var GridPinnedPosition;
+/**
+ * The column pinning API interface that is available in the grid [[apiRef]].
+ */
+
+(function (GridPinnedPosition) {
+  GridPinnedPosition["left"] = "left";
+  GridPinnedPosition["right"] = "right";
+})(GridPinnedPosition || (GridPinnedPosition = {}));
+
+export { GridPinnedPosition };

package/modern/hooks/features/columnPinning/gridColumnPinningSelector.js

@@ -0,0 +1 @@
+export const gridPinnedColumnsSelector = state => state.pinnedColumns;

package/modern/hooks/features/columnPinning/index.js

@@ -0,0 +1,2 @@
+export * from './gridColumnPinningSelector';
+export * from './gridColumnPinningInterface';