@mui/x-data-grid 5.4.0 → 5.6.0

package/colDef/gridSingleSelectOperators.js

@@ -0,0 +1,49 @@
+import { GridFilterInputSingleSelect } from '../components/panel/filterPanel/GridFilterInputSingleSelect';
+import { GridFilterInputMultipleSingleSelect } from '../components/panel/filterPanel/GridFilterInputMultipleSingleSelect';
+
+const parseObjectValue = value => {
+  if (value == null || typeof value !== 'object') {
+    return value;
+  }
+
+  return value.value;
+};
+
+export const getGridSingleSelectOperators = () => [{
+  value: 'is',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || filterItem.value === '') {
+      return null;
+    }
+
+    return ({
+      value
+    }) => parseObjectValue(value) === parseObjectValue(filterItem.value);
+  },
+  InputComponent: GridFilterInputSingleSelect
+}, {
+  value: 'not',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || filterItem.value === '') {
+      return null;
+    }
+
+    return ({
+      value
+    }) => parseObjectValue(value) !== parseObjectValue(filterItem.value);
+  },
+  InputComponent: GridFilterInputSingleSelect
+}, {
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+      return null;
+    }
+
+    const filterItemValues = filterItem.value.map(parseObjectValue);
+    return ({
+      value
+    }) => filterItemValues.includes(parseObjectValue(value));
+  },
+  InputComponent: GridFilterInputMultipleSingleSelect
+}];

package/colDef/gridStringColDef.d.ts

@@ -0,0 +1,2 @@
+import { GridColTypeDef } from '../models/colDef/gridColDef';
+export declare const GRID_STRING_COL_DEF: GridColTypeDef;

package/colDef/gridStringColDef.js

@@ -0,0 +1,21 @@
+import { renderEditInputCell } from '../components/cell/GridEditInputCell';
+import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
+import { getGridStringOperators } from './gridStringOperators';
+export const GRID_STRING_COL_DEF = {
+  width: 100,
+  minWidth: 50,
+  maxWidth: Infinity,
+  hide: false,
+  hideable: true,
+  sortable: true,
+  resizable: true,
+  filterable: true,
+  groupable: true,
+  pinnable: true,
+  editable: false,
+  sortComparator: gridStringOrNumberComparator,
+  type: 'string',
+  align: 'left',
+  filterOperators: getGridStringOperators(),
+  renderEditCell: renderEditInputCell
+};

package/colDef/gridStringOperators.d.ts

@@ -0,0 +1,2 @@
+import { GridFilterOperator } from '../models/gridFilterOperator';
+export declare const getGridStringOperators: () => GridFilterOperator[];

package/colDef/gridStringOperators.js

@@ -0,0 +1,103 @@
+import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
+import { escapeRegExp } from '../utils/utils';
+import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+export const getGridStringOperators = () => [{
+  value: 'contains',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.value) {
+      return null;
+    }
+
+    const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
+    return ({
+      value
+    }) => {
+      return value != null ? filterRegex.test(value.toString()) : false;
+    };
+  },
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'equals',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.value) {
+      return null;
+    }
+
+    const collator = new Intl.Collator(undefined, {
+      sensitivity: 'base',
+      usage: 'search'
+    });
+    return ({
+      value
+    }) => {
+      return value != null ? collator.compare(filterItem.value, value.toString()) === 0 : false;
+    };
+  },
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'startsWith',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.value) {
+      return null;
+    }
+
+    const filterRegex = new RegExp(`^${escapeRegExp(filterItem.value)}.*$`, 'i');
+    return ({
+      value
+    }) => {
+      return value != null ? filterRegex.test(value.toString()) : false;
+    };
+  },
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'endsWith',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.value) {
+      return null;
+    }
+
+    const filterRegex = new RegExp(`.*${escapeRegExp(filterItem.value)}$`, 'i');
+    return ({
+      value
+    }) => {
+      return value != null ? filterRegex.test(value.toString()) : false;
+    };
+  },
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'isEmpty',
+  getApplyFilterFn: () => {
+    return ({
+      value
+    }) => {
+      return value === '' || value == null;
+    };
+  }
+}, {
+  value: 'isNotEmpty',
+  getApplyFilterFn: () => {
+    return ({
+      value
+    }) => {
+      return value !== '' && value != null;
+    };
+  }
+}, {
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+      return null;
+    }
+
+    const collator = new Intl.Collator(undefined, {
+      sensitivity: 'base',
+      usage: 'search'
+    });
+    return ({
+      value
+    }) => value != null ? filterItem.value.some(filterValue => {
+      return collator.compare(filterValue, value.toString() || '') === 0;
+    }) : false;
+  },
+  InputComponent: GridFilterInputMultipleValue
+}];

package/colDef/index.d.ts

@@ -0,0 +1,12 @@
+export * from './gridActionsColDef';
+export * from './gridBooleanColDef';
+export * from './gridCheckboxSelectionColDef';
+export * from './gridDateColDef';
+export * from './gridNumericColDef';
+export * from './gridSingleSelectColDef';
+export * from './gridStringColDef';
+export * from './gridBooleanOperators';
+export * from './gridDateOperators';
+export * from './gridNumericOperators';
+export * from './gridSingleSelectOperators';
+export * from './gridStringOperators';

package/colDef/index.js

@@ -0,0 +1,12 @@
+export * from './gridActionsColDef';
+export * from './gridBooleanColDef';
+export * from './gridCheckboxSelectionColDef';
+export * from './gridDateColDef';
+export * from './gridNumericColDef';
+export * from './gridSingleSelectColDef';
+export * from './gridStringColDef';
+export * from './gridBooleanOperators';
+export * from './gridDateOperators';
+export * from './gridNumericOperators';
+export * from './gridSingleSelectOperators';
+export * from './gridStringOperators';

package/colDef/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/colDef/index.js",
+  "types": "./index.d.ts"
+}

package/components/DataGridColumnHeaders.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface DataGridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
+    innerRef?: React.Ref<HTMLDivElement>;
+}
+export declare const DataGridColumnHeaders: React.ForwardRefExoticComponent<DataGridColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/DataGridColumnHeaders.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["innerRef", "className"];
+import * as React from 'react';
+import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+import { GridScrollArea } from './GridScrollArea';
+import { GridColumnHeaders } from './columnHeaders/GridColumnHeaders';
+import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const DataGridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeader(props, ref) {
+  const {
+    innerRef
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const {
+    isDragging,
+    getRootProps,
+    getInnerProps,
+    getColumns
+  } = useGridColumnHeaders({
+    innerRef
+  });
+  return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
+    ref: ref
+  }, getRootProps(other), {
+    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: getColumns()
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "right"
+    })]
+  }));
+});

package/components/DataGridVirtualScroller.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface DataGridVirtualScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
+    disableVirtualization?: boolean;
+}
+declare const DataGridVirtualScroller: React.ForwardRefExoticComponent<DataGridVirtualScrollerProps & React.RefAttributes<HTMLDivElement>>;
+export { DataGridVirtualScroller };

package/components/DataGridVirtualScroller.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "disableVirtualization"];
+import * as React from 'react';
+import { GridVirtualScroller } from './virtualization/GridVirtualScroller';
+import { GridVirtualScrollerContent } from './virtualization/GridVirtualScrollerContent';
+import { GridVirtualScrollerRenderZone } from './virtualization/GridVirtualScrollerRenderZone';
+import { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridVirtualScroller(props, ref) {
+  const {
+    className,
+    disableVirtualization
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const {
+    getRootProps,
+    getContentProps,
+    getRenderZoneProps,
+    getRows
+  } = useGridVirtualScroller({
+    ref,
+    disableVirtualization
+  });
+  return /*#__PURE__*/_jsx(GridVirtualScroller, _extends({
+    className: className
+  }, getRootProps(other), {
+    children: /*#__PURE__*/_jsx(GridVirtualScrollerContent, _extends({}, getContentProps(), {
+      children: /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows()
+      }))
+    }))
+  }));
+});
+export { DataGridVirtualScroller };

package/components/ErrorBoundary.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ErrorInfo } from 'react';
+import { GridApiCommunity } from '../models/api/gridApiCommunity';
+import { Logger } from '../models/logger';
+export interface ErrorBoundaryProps {
+    logger: Logger;
+    render: ({ error }: any) => React.ReactNode;
+    api: React.MutableRefObject<GridApiCommunity>;
+    hasError: boolean;
+    componentProps?: any[];
+}
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, any> {
+    static getDerivedStateFromError(error: any): {
+        hasError: boolean;
+        error: any;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    logError(error: Error, errorInfo?: ErrorInfo): void;
+    render(): React.ReactNode;
+}

package/components/ErrorBoundary.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export class ErrorBoundary extends React.Component {
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true,
+      error
+    };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    if (this.props.api.current) {
+      this.logError(error); // Allows to trigger the Error event and all listener can run on Error
+
+      this.props.api.current.showError({
+        error,
+        errorInfo
+      });
+    }
+  }
+
+  logError(error, errorInfo) {
+    this.props.logger.error(`An unexpected error occurred. Error: ${error && error.message}. `, error, errorInfo);
+  }
+
+  render() {
+    var _this$state;
+
+    if (this.props.hasError || (_this$state = this.state) != null && _this$state.hasError) {
+      // You can render any custom fallback UI
+      return this.props.render(this.props.componentProps || this.state);
+    }
+
+    return this.props.children;
+  }
+
+}

package/components/ErrorOverlay.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GridOverlayProps } from './containers/GridOverlay';
+export interface ErrorOverlayProps extends GridOverlayProps {
+    message?: string;
+    hasError: boolean;
+    errorInfo: any;
+}
+export declare const ErrorOverlay: React.ForwardRefExoticComponent<ErrorOverlayProps & React.RefAttributes<HTMLDivElement>>;

package/components/ErrorOverlay.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["message", "hasError", "errorInfo"];
+import * as React from 'react';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+// TODO v6: rename to GridErrorOverlay
+export const ErrorOverlay = /*#__PURE__*/React.forwardRef(function ErrorOverlay(props, ref) {
+  const {
+    message
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const defaultLabel = apiRef.current.getLocaleText('errorOverlayDefaultLabel');
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, other, {
+    children: message || defaultLabel
+  }));
+});

package/components/GridApiContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridApiContext: React.Context<unknown>;

package/components/GridApiContext.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export const GridApiContext = /*#__PURE__*/React.createContext(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  GridApiContext.displayName = 'GridApiContext';
+}

package/components/GridAutoSizer.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+export interface AutoSizerSize {
+    height: number;
+    width: number;
+}
+export interface AutoSizerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Function responsible for rendering children.
+     * @param {AutoSizerSize} size The grid's size.
+     * @returns {React.ReactNode} The children to render.
+     */
+    children: (size: AutoSizerSize) => React.ReactNode;
+    /**
+     * Default height to use for initial render; useful for SSR.
+     * @default null
+     */
+    defaultHeight?: number;
+    /**
+     * Default width to use for initial render; useful for SSR.
+     * @default null
+     */
+    defaultWidth?: number;
+    /**
+     * If `true`, disable dynamic :height property.
+     * @default false
+     */
+    disableHeight?: boolean;
+    /**
+     * If `true`, disable dynamic :width property.
+     * @default false
+     */
+    disableWidth?: boolean;
+    /**
+     * Nonce of the inlined stylesheet for Content Security Policy.
+     */
+    nonce?: string;
+    /**
+     * Callback to be invoked on-resize.
+     * @param {AutoSizerSize} size The grid's size.
+     */
+    onResize?: (size: AutoSizerSize) => void;
+}
+declare const GridAutoSizer: React.ForwardRefExoticComponent<AutoSizerProps & React.RefAttributes<HTMLDivElement>>;
+export { GridAutoSizer };

package/components/GridAutoSizer.js

@@ -0,0 +1,144 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "defaultHeight", "defaultWidth", "disableHeight", "disableWidth", "nonce", "onResize", "style"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useForkRef, ownerWindow, useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import createDetectElementResize from '../lib/createDetectElementResize'; // TODO replace with https://caniuse.com/resizeobserver.
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {
+  const {
+    children,
+    defaultHeight = null,
+    defaultWidth = null,
+    disableHeight = false,
+    disableWidth = false,
+    nonce,
+    onResize,
+    style
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const [state, setState] = React.useState({
+    height: defaultHeight,
+    width: defaultWidth
+  });
+  const rootRef = React.useRef(null);
+  const parentElement = React.useRef(null);
+  const handleResize = useEventCallback(() => {
+    // Guard against AutoSizer component being removed from the DOM immediately after being added.
+    // This can result in invalid style values which can result in NaN values if we don't handle them.
+    // See issue #150 for more context.
+    if (parentElement.current) {
+      const height = parentElement.current.offsetHeight || 0;
+      const width = parentElement.current.offsetWidth || 0;
+      const win = ownerWindow(parentElement.current);
+      const computedStyle = win.getComputedStyle(parentElement.current);
+      const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
+      const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
+      const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
+      const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
+      const newHeight = height - paddingTop - paddingBottom;
+      const newWidth = width - paddingLeft - paddingRight;
+
+      if (!disableHeight && state.height !== newHeight || !disableWidth && state.width !== newWidth) {
+        setState({
+          height: newHeight,
+          width: newWidth
+        });
+
+        if (onResize) {
+          onResize({
+            height: newHeight,
+            width: newWidth
+          });
+        }
+      }
+    }
+  });
+  useEnhancedEffect(() => {
+    var _parentElement$curren;
+
+    parentElement.current = rootRef.current.parentElement;
+
+    if (!parentElement) {
+      return undefined;
+    }
+
+    const win = ownerWindow((_parentElement$curren = parentElement.current) != null ? _parentElement$curren : undefined);
+    const detectElementResize = createDetectElementResize(nonce, win);
+    detectElementResize.addResizeListener(parentElement.current, handleResize);
+    handleResize();
+    return () => {
+      detectElementResize.removeResizeListener(parentElement.current, handleResize);
+    };
+  }, [nonce, handleResize]); // Outer div should not force width/height since that may prevent containers from shrinking.
+  // Inner component should overflow and use calculated width/height.
+  // See issue #68 for more information.
+
+  const outerStyle = {
+    overflow: 'visible'
+  };
+  const childParams = {};
+
+  if (!disableHeight) {
+    outerStyle.height = 0;
+    childParams.height = state.height;
+  }
+
+  if (!disableWidth) {
+    outerStyle.width = 0;
+    childParams.width = state.width;
+  }
+
+  const handleRef = useForkRef(rootRef, ref);
+  return /*#__PURE__*/_jsx("div", _extends({
+    ref: handleRef,
+    style: _extends({}, outerStyle, style)
+  }, other, {
+    children: state.height === null && state.width === null ? null : children(childParams)
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Default height to use for initial render; useful for SSR.
+   * @default null
+   */
+  defaultHeight: PropTypes.number,
+
+  /**
+   * Default width to use for initial render; useful for SSR.
+   * @default null
+   */
+  defaultWidth: PropTypes.number,
+
+  /**
+   * If `true`, disable dynamic :height property.
+   * @default false
+   */
+  disableHeight: PropTypes.bool,
+
+  /**
+   * If `true`, disable dynamic :width property.
+   * @default false
+   */
+  disableWidth: PropTypes.bool,
+
+  /**
+   * Nonce of the inlined stylesheet for Content Security Policy.
+   */
+  nonce: PropTypes.string,
+
+  /**
+   * Callback to be invoked on-resize.
+   * @param {AutoSizerSize} size The grid's size.
+   */
+  onResize: PropTypes.func
+} : void 0;
+export { GridAutoSizer };

package/components/GridFooter.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridFooterContainerProps } from './containers/GridFooterContainer';
+export declare const GridFooter: React.ForwardRefExoticComponent<GridFooterContainerProps & React.RefAttributes<HTMLDivElement>>;

package/components/GridFooter.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
+import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
+import { gridVisibleTopLevelRowCountSelector } from '../hooks/features/filter/gridFilterSelector';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridRowCount } from './GridRowCount';
+import { GridSelectedRowCount } from './GridSelectedRowCount';
+import { GridFooterContainer } from './containers/GridFooterContainer';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+  var _rootProps$components;
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
+  const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector);
+  const visibleTopLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
+  const selectedRowCountElement = !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? /*#__PURE__*/_jsx(GridSelectedRowCount, {
+    selectedRowCount: selectedRowCount
+  }) : /*#__PURE__*/_jsx("div", {});
+  const rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/_jsx(GridRowCount, {
+    rowCount: totalTopLevelRowCount,
+    visibleRowCount: visibleTopLevelRowCount
+  }) : null;
+
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.components.Pagination && /*#__PURE__*/_jsx(rootProps.components.Pagination, _extends({}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.pagination));
+
+  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
+    ref: ref
+  }, props, {
+    children: [selectedRowCountElement, rowCountElement, paginationElement]
+  }));
+});

package/components/GridHeader.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/components/GridHeader.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const GridHeader = /*#__PURE__*/React.forwardRef(function GridHeader(props, ref) {
+  var _rootProps$components, _rootProps$components2;
+
+  const rootProps = useGridRootProps();
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: ref
+  }, props, {
+    children: [/*#__PURE__*/_jsx(rootProps.components.PreferencesPanel, _extends({}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.preferencesPanel)), rootProps.components.Toolbar && /*#__PURE__*/_jsx(rootProps.components.Toolbar, _extends({}, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.toolbar))]
+  }));
+});