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

package/esm/components/pivotPanel/GridPivotPanelField.js

@@ -0,0 +1,331 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass, gridClasses, GridMenu, useGridSelector } from '@mui/x-data-grid-pro';
+import composeClasses from '@mui/utils/composeClasses';
+import { GridColumnSortButton, NotRendered, vars } from '@mui/x-data-grid-pro/internals';
+import useId from '@mui/utils/useId';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getAvailableAggregationFunctions } from "../../hooks/features/aggregation/gridAggregationUtils.js";
+import { GridPivotPanelFieldMenu } from "./GridPivotPanelFieldMenu.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { gridPivotInitialColumnsSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "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 composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridPivotPanelFieldRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelField',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses['pivotPanelField--sorted']}`]: styles['pivotPanelField--sorted']
+  }, styles.pivotPanelField]
+})({
+  flexShrink: 0,
+  position: 'relative',
+  padding: vars.spacing(0, 1, 0, 2),
+  height: 32,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 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: vars.colors.interactive.selected
+    }
+  }, {
+    props: {
+      dropPosition: 'bottom'
+    },
+    style: {
+      borderBottomColor: vars.colors.interactive.selected
+    }
+  }, {
+    props: {
+      section: null
+    },
+    style: {
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent'
+    }
+  }],
+  '&:hover': {
+    backgroundColor: vars.colors.interactive.hover
+  }
+});
+const GridPivotPanelFieldName = styled('span', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelFieldName'
+})({
+  flex: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const GridPivotPanelFieldActionContainer = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelFieldActionContainer'
+})({
+  display: 'flex',
+  alignItems: 'center'
+});
+const GridPivotPanelFieldDragIcon = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelFieldDragIcon'
+})({
+  position: 'absolute',
+  left: -1,
+  width: 16,
+  display: 'flex',
+  justifyContent: 'center',
+  color: vars.colors.foreground.base,
+  opacity: 0,
+  '[draggable="true"]:hover > &': {
+    opacity: 0.3
+  }
+});
+const GridPivotPanelFieldCheckbox = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelFieldCheckbox'
+})({
+  flex: 1,
+  position: 'relative',
+  margin: vars.spacing(0, 0, 0, -1),
+  cursor: 'grab'
+});
+function AggregationSelect({
+  aggFunc,
+  field
+}) {
+  const rootProps = useGridRootProps();
+  const [aggregationMenuOpen, setAggregationMenuOpen] = React.useState(false);
+  const aggregationMenuTriggerRef = React.useRef(null);
+  const aggregationMenuTriggerId = useId();
+  const aggregationMenuId = useId();
+  const apiRef = useGridApiContext();
+  const initialColumns = useGridSelector(apiRef, gridPivotInitialColumnsSelector);
+  const colDef = initialColumns.get(field);
+  const availableAggregationFunctions = React.useMemo(() => getAvailableAggregationFunctions({
+    aggregationFunctions: rootProps.aggregationFunctions,
+    colDef,
+    isDataSource: false
+  }), [colDef, rootProps.aggregationFunctions]);
+  const handleClick = func => {
+    apiRef.current.setPivotModel(prev => {
+      return _extends({}, prev, {
+        values: prev.values.map(col => {
+          if (col.field === field) {
+            return _extends({}, col, {
+              aggFunc: func
+            });
+          }
+          return col;
+        })
+      });
+    });
+    setAggregationMenuOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_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__*/_jsx(GridMenu, {
+      open: aggregationMenuOpen,
+      onClose: () => setAggregationMenuOpen(false),
+      target: aggregationMenuTriggerRef.current,
+      position: "bottom-start",
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, _extends({
+        id: aggregationMenuId,
+        "aria-labelledby": aggregationMenuTriggerId,
+        autoFocusItem: true
+      }, rootProps.slotProps?.baseMenuList, {
+        children: availableAggregationFunctions.map(func => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
+          selected: aggFunc === func,
+          onClick: () => handleClick(func)
+        }, rootProps.slotProps?.baseMenuItem, {
+          children: func
+        }), func))
+      }))
+    })]
+  });
+}
+function GridPivotPanelField(props) {
+  const {
+    children,
+    field,
+    onDragStart,
+    onDragEnd
+  } = props;
+  const rootProps = useGridRootProps();
+  const [dropPosition, setDropPosition] = React.useState(null);
+  const section = props.modelKey;
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    dropPosition,
+    section
+  });
+  const classes = useUtilityClasses(ownerState);
+  const apiRef = 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 _extends({}, prev, {
+        columns: prev.columns.map(col => {
+          if (col.field === field) {
+            return _extends({}, col, {
+              sort: newValue
+            });
+          }
+          return col;
+        })
+      });
+    });
+  };
+  const handleVisibilityChange = event => {
+    if (section) {
+      apiRef.current.setPivotModel(prev => {
+        return _extends({}, prev, {
+          [section]: prev[section].map(col => {
+            if (col.field === field) {
+              return _extends({}, col, {
+                hidden: !event.target.checked
+              });
+            }
+            return col;
+          })
+        });
+      });
+    }
+  };
+  const hideable = section !== null;
+  return /*#__PURE__*/_jsxs(GridPivotPanelFieldRoot, {
+    ownerState: ownerState,
+    className: classes.root,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+    onDragStart: handleDragStart,
+    onDragEnd: onDragEnd,
+    draggable: "true",
+    children: [/*#__PURE__*/_jsx(GridPivotPanelFieldDragIcon, {
+      ownerState: ownerState,
+      className: classes.dragIcon,
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnReorderIcon, {
+        fontSize: "small"
+      })
+    }), hideable ? /*#__PURE__*/_jsx(GridPivotPanelFieldCheckbox, _extends({
+      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__*/_jsx(GridPivotPanelFieldName, {
+      ownerState: ownerState,
+      className: classes.name,
+      children: children
+    }), /*#__PURE__*/_jsxs(GridPivotPanelFieldActionContainer, {
+      ownerState: ownerState,
+      className: classes.actionContainer,
+      children: [section === 'columns' && /*#__PURE__*/_jsx(GridColumnSortButton, {
+        field: field,
+        direction: props.modelValue.sort,
+        sortingOrder: rootProps.sortingOrder,
+        onClick: handleSort
+      }), section === 'values' && /*#__PURE__*/_jsx(AggregationSelect, {
+        aggFunc: props.modelValue.aggFunc,
+        field: field
+      }), /*#__PURE__*/_jsx(GridPivotPanelFieldMenu, {
+        field: field,
+        modelKey: section
+      })]
+    })]
+  });
+}
+export { GridPivotPanelField };

package/esm/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/esm/components/pivotPanel/GridPivotPanelFieldMenu.js

@@ -0,0 +1,170 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridMenu, useGridSelector } from '@mui/x-data-grid-pro';
+import useId from '@mui/utils/useId';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { gridPivotModelSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function GridPivotPanelFieldMenu(props) {
+  const {
+    field,
+    modelKey
+  } = props;
+  const rootProps = useGridRootProps();
+  const [open, setOpen] = React.useState(false);
+  const apiRef = useGridPrivateApiContext();
+  const isAvailableField = modelKey === null;
+  const pivotModel = useGridSelector(apiRef, 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 = useId();
+  const triggerId = useId();
+  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__*/_jsx(rootProps.slots.pivotMenuMoveUpIcon, {}),
+      disabled: !canMoveUp
+    }, {
+      key: 'down',
+      label: apiRef.current.getLocaleText('pivotMenuMoveDown'),
+      icon: /*#__PURE__*/_jsx(rootProps.slots.pivotMenuMoveDownIcon, {}),
+      disabled: !canMoveDown
+    }, {
+      divider: true
+    }, {
+      key: 'top',
+      label: apiRef.current.getLocaleText('pivotMenuMoveToTop'),
+      icon: /*#__PURE__*/_jsx(rootProps.slots.pivotMenuMoveToTopIcon, {}),
+      disabled: !canMoveUp
+    }, {
+      key: 'bottom',
+      label: apiRef.current.getLocaleText('pivotMenuMoveToBottom'),
+      icon: /*#__PURE__*/_jsx(rootProps.slots.pivotMenuMoveToBottomIcon, {}),
+      disabled: !canMoveDown
+    }, {
+      divider: true
+    }, {
+      key: 'rows',
+      label: apiRef.current.getLocaleText('pivotMenuRows'),
+      icon: modelKey === 'rows' ? /*#__PURE__*/_jsx(rootProps.slots.pivotMenuCheckIcon, {}) : /*#__PURE__*/_jsx("span", {})
+    }, {
+      key: 'columns',
+      label: apiRef.current.getLocaleText('pivotMenuColumns'),
+      icon: modelKey === 'columns' ? /*#__PURE__*/_jsx(rootProps.slots.pivotMenuCheckIcon, {}) : /*#__PURE__*/_jsx("span", {})
+    }, {
+      key: 'values',
+      label: apiRef.current.getLocaleText('pivotMenuValues'),
+      icon: modelKey === 'values' ? /*#__PURE__*/_jsx(rootProps.slots.pivotMenuCheckIcon, {}) : /*#__PURE__*/_jsx("span", {})
+    }, {
+      divider: true
+    }, {
+      key: null,
+      label: apiRef.current.getLocaleText('pivotMenuRemove'),
+      icon: /*#__PURE__*/_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__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      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__*/_jsx(rootProps.slots.pivotMenuAddIcon, {
+        fontSize: "small"
+      }) : /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
+        fontSize: "small"
+      })
+    })), /*#__PURE__*/_jsx(GridMenu, {
+      target: triggerRef.current,
+      open: open,
+      onClose: handleClose,
+      position: "bottom-start",
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, _extends({
+        id: menuId,
+        "aria-labelledby": triggerId,
+        autoFocusItem: true
+      }, rootProps.slotProps?.baseMenuList, {
+        children: getMenuItems().map((item, index) => 'divider' in item ? /*#__PURE__*/_jsx(rootProps.slots.baseDivider, {}, `divider-${index}`) : /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
+          disabled: item.disabled,
+          onClick: () => handleMove(item.key),
+          iconStart: item.icon
+        }, rootProps.slotProps?.baseMenuItem, {
+          children: item.label
+        }), item.key))
+      }))
+    })]
+  });
+}
+export { GridPivotPanelFieldMenu };

package/esm/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/esm/components/pivotPanel/GridPivotPanelHeader.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { useGridSelector, getDataGridUtilityClass, gridRowCountSelector } from '@mui/x-data-grid-pro';
+import { vars, NotRendered } from '@mui/x-data-grid-pro/internals';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { SidebarHeader } from "../sidebar/index.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridPivotActiveSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.js";
+import { GridPivotPanelSearch } from "./GridPivotPanelSearch.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['pivotPanelHeader'],
+    switch: ['pivotPanelSwitch'],
+    label: ['pivotPanelSwitchLabel']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridPivotPanelHeaderRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelHeader'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing(1),
+  padding: vars.spacing(0, 0.75, 0, 1),
+  boxSizing: 'border-box',
+  height: 52
+});
+const GridPivotPanelSwitch = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelSwitch'
+})({
+  marginRight: 'auto'
+});
+const GridPivotPanelSwitchLabel = styled('span', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelSwitchLabel'
+})({
+  fontWeight: vars.typography.fontWeight.medium
+});
+function GridPivotPanelHeader(props) {
+  const {
+    searchValue,
+    onSearchValueChange
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const classes = useUtilityClasses(rootProps);
+  const rows = useGridSelector(apiRef, gridRowCountSelector);
+  const isEmptyPivot = pivotActive && rows === 0;
+  return /*#__PURE__*/_jsxs(SidebarHeader, {
+    children: [/*#__PURE__*/_jsxs(GridPivotPanelHeaderRoot, {
+      ownerState: rootProps,
+      className: classes.root,
+      children: [/*#__PURE__*/_jsx(GridPivotPanelSwitch, _extends({
+        as: rootProps.slots.baseSwitch,
+        ownerState: rootProps,
+        className: classes.switch,
+        checked: pivotActive,
+        onChange: event => apiRef.current.setPivotActive(event.target.checked),
+        size: "small",
+        label: /*#__PURE__*/_jsx(GridPivotPanelSwitchLabel, {
+          ownerState: rootProps,
+          className: classes.label,
+          children: apiRef.current.getLocaleText('pivotToggleLabel')
+        })
+      }, rootProps.slotProps?.baseSwitch)), /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        onClick: () => {
+          apiRef.current.setPivotPanelOpen(false);
+          if (isEmptyPivot) {
+            apiRef.current.setPivotActive(false);
+          }
+        },
+        "aria-label": apiRef.current.getLocaleText('pivotCloseButton')
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.sidebarCloseIcon, {
+          fontSize: "small"
+        })
+      }))]
+    }), /*#__PURE__*/_jsx(GridPivotPanelSearch, {
+      value: searchValue,
+      onClear: () => onSearchValueChange(''),
+      onChange: event => onSearchValueChange(event.target.value)
+    })]
+  });
+}
+export { GridPivotPanelHeader };

package/esm/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 };

package/esm/components/pivotPanel/GridPivotPanelSearch.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { styled } from '@mui/system';
+import { vars } from '@mui/x-data-grid-pro/internals';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    container: ['pivotPanelSearchContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridPivotPanelSearchContainer = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelSearchContainer'
+})({
+  padding: vars.spacing(0, 1, 1)
+});
+function GridPivotPanelSearch(props) {
+  const {
+    onClear,
+    value,
+    onChange
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const classes = useUtilityClasses(rootProps);
+  const handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      onClear();
+    }
+  };
+  return /*#__PURE__*/_jsx(GridPivotPanelSearchContainer, {
+    ownerState: rootProps,
+    className: classes.container,
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+      size: "small",
+      "aria-label": apiRef.current.getLocaleText('pivotSearchControlLabel'),
+      placeholder: apiRef.current.getLocaleText('pivotSearchControlPlaceholder'),
+      onKeyDown: handleKeyDown,
+      fullWidth: true,
+      slotProps: {
+        input: {
+          startAdornment: /*#__PURE__*/_jsx(rootProps.slots.pivotSearchIcon, {
+            fontSize: "small"
+          }),
+          endAdornment: value ? /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
+            edge: "end",
+            size: "small",
+            onClick: onClear,
+            "aria-label": apiRef.current.getLocaleText('pivotSearchControlClear'),
+            children: /*#__PURE__*/_jsx(rootProps.slots.pivotSearchClearIcon, {
+              fontSize: "small"
+            })
+          }) : null
+        }
+      }
+    }, rootProps.slotProps?.baseTextField, {
+      value: value,
+      onChange: onChange
+    }))
+  });
+}
+export { GridPivotPanelSearch };