@mui/x-data-grid-premium 8.0.0-beta.3 → 8.0.0

package/components/pivotPanel/GridPivotPanelField.js

@@ -0,0 +1,338 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPivotPanelField = GridPivotPanelField;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _system = require("@mui/system");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridAggregationUtils = require("../../hooks/features/aggregation/gridAggregationUtils");
+var _GridPivotPanelFieldMenu = require("./GridPivotPanelFieldMenu");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    modelKey
+  } = ownerState;
+  const sorted = modelKey === 'columns' && ownerState.modelValue.sort;
+  const slots = {
+    root: ['pivotPanelField', sorted && 'pivotPanelField--sorted'],
+    name: ['pivotPanelFieldName'],
+    actionContainer: ['pivotPanelFieldActionContainer'],
+    dragIcon: ['pivotPanelFieldDragIcon'],
+    checkbox: ['pivotPanelFieldCheckbox']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const GridPivotPanelFieldRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelField',
+  overridesResolver: (props, styles) => [{
+    [`&.${_xDataGridPro.gridClasses['pivotPanelField--sorted']}`]: styles['pivotPanelField--sorted']
+  }, styles.pivotPanelField]
+})({
+  flexShrink: 0,
+  position: 'relative',
+  padding: _internals.vars.spacing(0, 1, 0, 2),
+  height: 32,
+  display: 'flex',
+  alignItems: 'center',
+  gap: _internals.vars.spacing(0.5),
+  borderWidth: 0,
+  borderTopWidth: 2,
+  borderBottomWidth: 2,
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  margin: '-1px 0',
+  // collapse vertical borders
+  cursor: 'grab',
+  variants: [{
+    props: {
+      dropPosition: 'top'
+    },
+    style: {
+      borderTopColor: _internals.vars.colors.interactive.selected
+    }
+  }, {
+    props: {
+      dropPosition: 'bottom'
+    },
+    style: {
+      borderBottomColor: _internals.vars.colors.interactive.selected
+    }
+  }, {
+    props: {
+      section: null
+    },
+    style: {
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent'
+    }
+  }],
+  '&:hover': {
+    backgroundColor: _internals.vars.colors.interactive.hover
+  }
+});
+const GridPivotPanelFieldName = (0, _system.styled)('span', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelFieldName'
+})({
+  flex: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const GridPivotPanelFieldActionContainer = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelFieldActionContainer'
+})({
+  display: 'flex',
+  alignItems: 'center'
+});
+const GridPivotPanelFieldDragIcon = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelFieldDragIcon'
+})({
+  position: 'absolute',
+  left: -1,
+  width: 16,
+  display: 'flex',
+  justifyContent: 'center',
+  color: _internals.vars.colors.foreground.base,
+  opacity: 0,
+  '[draggable="true"]:hover > &': {
+    opacity: 0.3
+  }
+});
+const GridPivotPanelFieldCheckbox = (0, _system.styled)(_internals.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelFieldCheckbox'
+})({
+  flex: 1,
+  position: 'relative',
+  margin: _internals.vars.spacing(0, 0, 0, -1),
+  cursor: 'grab'
+});
+function AggregationSelect({
+  aggFunc,
+  field
+}) {
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [aggregationMenuOpen, setAggregationMenuOpen] = React.useState(false);
+  const aggregationMenuTriggerRef = React.useRef(null);
+  const aggregationMenuTriggerId = (0, _useId.default)();
+  const aggregationMenuId = (0, _useId.default)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const initialColumns = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotInitialColumnsSelector);
+  const colDef = initialColumns.get(field);
+  const availableAggregationFunctions = React.useMemo(() => (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
+    aggregationFunctions: rootProps.aggregationFunctions,
+    colDef,
+    isDataSource: false
+  }), [colDef, rootProps.aggregationFunctions]);
+  const handleClick = func => {
+    apiRef.current.setPivotModel(prev => {
+      return (0, _extends2.default)({}, prev, {
+        values: prev.values.map(col => {
+          if (col.field === field) {
+            return (0, _extends2.default)({}, col, {
+              aggFunc: func
+            });
+          }
+          return col;
+        })
+      });
+    });
+    setAggregationMenuOpen(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, {
+      label: aggFunc,
+      size: "small",
+      variant: "outlined",
+      ref: aggregationMenuTriggerRef,
+      id: aggregationMenuTriggerId,
+      "aria-haspopup": "true",
+      "aria-controls": aggregationMenuOpen ? aggregationMenuId : undefined,
+      "aria-expanded": aggregationMenuOpen ? 'true' : undefined,
+      onClick: () => setAggregationMenuOpen(!aggregationMenuOpen)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridMenu, {
+      open: aggregationMenuOpen,
+      onClose: () => setAggregationMenuOpen(false),
+      target: aggregationMenuTriggerRef.current,
+      position: "bottom-start",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, (0, _extends2.default)({
+        id: aggregationMenuId,
+        "aria-labelledby": aggregationMenuTriggerId,
+        autoFocusItem: true
+      }, rootProps.slotProps?.baseMenuList, {
+        children: availableAggregationFunctions.map(func => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
+          selected: aggFunc === func,
+          onClick: () => handleClick(func)
+        }, rootProps.slotProps?.baseMenuItem, {
+          children: func
+        }), func))
+      }))
+    })]
+  });
+}
+function GridPivotPanelField(props) {
+  const {
+    children,
+    field,
+    onDragStart,
+    onDragEnd
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [dropPosition, setDropPosition] = React.useState(null);
+  const section = props.modelKey;
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes,
+    dropPosition,
+    section
+  });
+  const classes = useUtilityClasses(ownerState);
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const handleDragStart = React.useCallback(event => {
+    const data = {
+      field,
+      modelKey: section
+    };
+    event.dataTransfer.setData('text/plain', JSON.stringify(data));
+    event.dataTransfer.dropEffect = 'move';
+    onDragStart(section);
+  }, [field, onDragStart, section]);
+  const getDropPosition = React.useCallback(event => {
+    const rect = event.target.getBoundingClientRect();
+    const y = event.clientY - rect.top;
+    if (y < rect.height / 2) {
+      return 'top';
+    }
+    return 'bottom';
+  }, []);
+  const handleDragOver = React.useCallback(event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setDropPosition(getDropPosition(event));
+    }
+  }, [getDropPosition]);
+  const handleDragLeave = React.useCallback(event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setDropPosition(null);
+    }
+  }, []);
+  const handleDrop = React.useCallback(event => {
+    setDropPosition(null);
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      event.preventDefault();
+      const position = getDropPosition(event);
+      const {
+        field: droppedField,
+        modelKey: originSection
+      } = JSON.parse(event.dataTransfer.getData('text/plain'));
+      apiRef.current.updatePivotModel({
+        field: droppedField,
+        targetField: field,
+        targetFieldPosition: position,
+        originSection,
+        targetSection: section
+      });
+    }
+  }, [getDropPosition, apiRef, field, section]);
+  const handleSort = () => {
+    const currentSort = section === 'columns' ? props.modelValue.sort : null;
+    let newValue;
+    if (currentSort === 'asc') {
+      newValue = 'desc';
+    } else if (currentSort === 'desc') {
+      newValue = undefined;
+    } else {
+      newValue = 'asc';
+    }
+    apiRef.current.setPivotModel(prev => {
+      return (0, _extends2.default)({}, prev, {
+        columns: prev.columns.map(col => {
+          if (col.field === field) {
+            return (0, _extends2.default)({}, col, {
+              sort: newValue
+            });
+          }
+          return col;
+        })
+      });
+    });
+  };
+  const handleVisibilityChange = event => {
+    if (section) {
+      apiRef.current.setPivotModel(prev => {
+        return (0, _extends2.default)({}, prev, {
+          [section]: prev[section].map(col => {
+            if (col.field === field) {
+              return (0, _extends2.default)({}, col, {
+                hidden: !event.target.checked
+              });
+            }
+            return col;
+          })
+        });
+      });
+    }
+  };
+  const hideable = section !== null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelFieldRoot, {
+    ownerState: ownerState,
+    className: classes.root,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+    onDragStart: handleDragStart,
+    onDragEnd: onDragEnd,
+    draggable: "true",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldDragIcon, {
+      ownerState: ownerState,
+      className: classes.dragIcon,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnReorderIcon, {
+        fontSize: "small"
+      })
+    }), hideable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldCheckbox, (0, _extends2.default)({
+      ownerState: ownerState,
+      className: classes.checkbox,
+      as: rootProps.slots.baseCheckbox,
+      size: "small",
+      density: "compact"
+    }, rootProps.slotProps?.baseCheckbox, {
+      checked: !props.modelValue.hidden || false,
+      onChange: handleVisibilityChange,
+      label: children
+    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldName, {
+      ownerState: ownerState,
+      className: classes.name,
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelFieldActionContainer, {
+      ownerState: ownerState,
+      className: classes.actionContainer,
+      children: [section === 'columns' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridColumnSortButton, {
+        field: field,
+        direction: props.modelValue.sort,
+        sortingOrder: rootProps.sortingOrder,
+        onClick: handleSort
+      }), section === 'values' && /*#__PURE__*/(0, _jsxRuntime.jsx)(AggregationSelect, {
+        aggFunc: props.modelValue.aggFunc,
+        field: field
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelFieldMenu.GridPivotPanelFieldMenu, {
+        field: field,
+        modelKey: section
+      })]
+    })]
+  });
+}

package/components/pivotPanel/GridPivotPanelFieldMenu.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { FieldTransferObject } from './GridPivotPanelBody';
+interface GridPivotPanelFieldMenuProps {
+  field: string;
+  modelKey: FieldTransferObject['modelKey'];
+}
+declare function GridPivotPanelFieldMenu(props: GridPivotPanelFieldMenuProps): React.JSX.Element;
+export { GridPivotPanelFieldMenu };

package/components/pivotPanel/GridPivotPanelFieldMenu.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPivotPanelFieldMenu = GridPivotPanelFieldMenu;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridPivotPanelFieldMenu(props) {
+  const {
+    field,
+    modelKey
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [open, setOpen] = React.useState(false);
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const isAvailableField = modelKey === null;
+  const pivotModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotModelSelector);
+  const fieldIndexInModel = !isAvailableField ? pivotModel[modelKey].findIndex(item => item.field === field) : -1;
+  const modelLength = !isAvailableField ? pivotModel[modelKey].length : 0;
+  const canMoveUp = fieldIndexInModel > 0;
+  const canMoveDown = !isAvailableField && fieldIndexInModel < modelLength - 1;
+  const menuId = (0, _useId.default)();
+  const triggerId = (0, _useId.default)();
+  const triggerRef = React.useRef(null);
+  const getMenuItems = React.useCallback(() => {
+    if (isAvailableField) {
+      return [{
+        key: 'rows',
+        label: apiRef.current.getLocaleText('pivotMenuAddToRows')
+      }, {
+        key: 'columns',
+        label: apiRef.current.getLocaleText('pivotMenuAddToColumns')
+      }, {
+        key: 'values',
+        label: apiRef.current.getLocaleText('pivotMenuAddToValues')
+      }];
+    }
+    return [{
+      key: 'up',
+      label: apiRef.current.getLocaleText('pivotMenuMoveUp'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuMoveUpIcon, {}),
+      disabled: !canMoveUp
+    }, {
+      key: 'down',
+      label: apiRef.current.getLocaleText('pivotMenuMoveDown'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuMoveDownIcon, {}),
+      disabled: !canMoveDown
+    }, {
+      divider: true
+    }, {
+      key: 'top',
+      label: apiRef.current.getLocaleText('pivotMenuMoveToTop'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuMoveToTopIcon, {}),
+      disabled: !canMoveUp
+    }, {
+      key: 'bottom',
+      label: apiRef.current.getLocaleText('pivotMenuMoveToBottom'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuMoveToBottomIcon, {}),
+      disabled: !canMoveDown
+    }, {
+      divider: true
+    }, {
+      key: 'rows',
+      label: apiRef.current.getLocaleText('pivotMenuRows'),
+      icon: modelKey === 'rows' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuCheckIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
+    }, {
+      key: 'columns',
+      label: apiRef.current.getLocaleText('pivotMenuColumns'),
+      icon: modelKey === 'columns' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuCheckIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
+    }, {
+      key: 'values',
+      label: apiRef.current.getLocaleText('pivotMenuValues'),
+      icon: modelKey === 'values' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuCheckIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
+    }, {
+      divider: true
+    }, {
+      key: null,
+      label: apiRef.current.getLocaleText('pivotMenuRemove'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuRemoveIcon, {})
+    }];
+  }, [isAvailableField, apiRef, rootProps, canMoveUp, canMoveDown, modelKey]);
+  const handleClick = () => {
+    setOpen(!open);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleMove = to => {
+    handleClose();
+
+    // Do nothing if the field is already in the target section
+    if (to === modelKey) {
+      return;
+    }
+    let targetField;
+    let targetFieldPosition = null;
+    let targetSection = modelKey;
+    switch (to) {
+      case 'up':
+        targetField = pivotModel[modelKey][fieldIndexInModel - 1].field;
+        targetFieldPosition = 'top';
+        break;
+      case 'down':
+        targetField = pivotModel[modelKey][fieldIndexInModel + 1].field;
+        targetFieldPosition = 'bottom';
+        break;
+      case 'top':
+        targetField = pivotModel[modelKey][0].field;
+        targetFieldPosition = 'top';
+        break;
+      case 'bottom':
+        targetField = pivotModel[modelKey][modelLength - 1].field;
+        targetFieldPosition = 'bottom';
+        break;
+      case 'rows':
+      case 'columns':
+      case 'values':
+      case null:
+        targetSection = to;
+        break;
+      default:
+        break;
+    }
+    apiRef.current.updatePivotModel({
+      field,
+      targetField,
+      targetFieldPosition,
+      targetSection,
+      originSection: modelKey
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+      size: "small"
+    }, rootProps.slotProps?.baseIconButton, {
+      id: triggerId,
+      "aria-haspopup": "true",
+      "aria-controls": open ? menuId : undefined,
+      "aria-expanded": open ? 'true' : undefined,
+      "aria-label": apiRef.current.getLocaleText('pivotMenuOptions'),
+      onClick: handleClick,
+      ref: triggerRef,
+      children: isAvailableField ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuAddIcon, {
+        fontSize: "small"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuIcon, {
+        fontSize: "small"
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridMenu, {
+      target: triggerRef.current,
+      open: open,
+      onClose: handleClose,
+      position: "bottom-start",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, (0, _extends2.default)({
+        id: menuId,
+        "aria-labelledby": triggerId,
+        autoFocusItem: true
+      }, rootProps.slotProps?.baseMenuList, {
+        children: getMenuItems().map((item, index) => 'divider' in item ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseDivider, {}, `divider-${index}`) : /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
+          disabled: item.disabled,
+          onClick: () => handleMove(item.key),
+          iconStart: item.icon
+        }, rootProps.slotProps?.baseMenuItem, {
+          children: item.label
+        }), item.key))
+      }))
+    })]
+  });
+}

package/components/pivotPanel/GridPivotPanelHeader.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface GridPivotPanelHeaderProps {
+  searchValue: string;
+  onSearchValueChange: (value: string) => void;
+}
+declare function GridPivotPanelHeader(props: GridPivotPanelHeaderProps): React.JSX.Element;
+export { GridPivotPanelHeader };

package/components/pivotPanel/GridPivotPanelHeader.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPivotPanelHeader = GridPivotPanelHeader;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _system = require("@mui/system");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _utils = require("@mui/utils");
+var _sidebar = require("../sidebar");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
+var _GridPivotPanelSearch = require("./GridPivotPanelSearch");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['pivotPanelHeader'],
+    switch: ['pivotPanelSwitch'],
+    label: ['pivotPanelSwitchLabel']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const GridPivotPanelHeaderRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelHeader'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: _internals.vars.spacing(1),
+  padding: _internals.vars.spacing(0, 0.75, 0, 1),
+  boxSizing: 'border-box',
+  height: 52
+});
+const GridPivotPanelSwitch = (0, _system.styled)(_internals.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelSwitch'
+})({
+  marginRight: 'auto'
+});
+const GridPivotPanelSwitchLabel = (0, _system.styled)('span', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelSwitchLabel'
+})({
+  fontWeight: _internals.vars.typography.fontWeight.medium
+});
+function GridPivotPanelHeader(props) {
+  const {
+    searchValue,
+    onSearchValueChange
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const pivotActive = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotActiveSelector);
+  const classes = useUtilityClasses(rootProps);
+  const rows = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridRowCountSelector);
+  const isEmptyPivot = pivotActive && rows === 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sidebar.SidebarHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelHeaderRoot, {
+      ownerState: rootProps,
+      className: classes.root,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelSwitch, (0, _extends2.default)({
+        as: rootProps.slots.baseSwitch,
+        ownerState: rootProps,
+        className: classes.switch,
+        checked: pivotActive,
+        onChange: event => apiRef.current.setPivotActive(event.target.checked),
+        size: "small",
+        label: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelSwitchLabel, {
+          ownerState: rootProps,
+          className: classes.label,
+          children: apiRef.current.getLocaleText('pivotToggleLabel')
+        })
+      }, rootProps.slotProps?.baseSwitch)), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+        onClick: () => {
+          apiRef.current.setPivotPanelOpen(false);
+          if (isEmptyPivot) {
+            apiRef.current.setPivotActive(false);
+          }
+        },
+        "aria-label": apiRef.current.getLocaleText('pivotCloseButton')
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.sidebarCloseIcon, {
+          fontSize: "small"
+        })
+      }))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelSearch.GridPivotPanelSearch, {
+      value: searchValue,
+      onClear: () => onSearchValueChange(''),
+      onChange: event => onSearchValueChange(event.target.value)
+    })]
+  });
+}

package/components/pivotPanel/GridPivotPanelSearch.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { GridSlotProps } from '@mui/x-data-grid-pro';
+export type GridPivotPanelSearchProps = Pick<GridSlotProps['baseTextField'], 'value' | 'onChange'> & {
+  onClear: () => void;
+};
+declare function GridPivotPanelSearch(props: GridPivotPanelSearchProps): React.JSX.Element;
+export { GridPivotPanelSearch };