@mui/x-data-grid 5.4.0 → 5.6.0

package/components/panel/GridColumnsPanel.js

@@ -0,0 +1,159 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import { switchClasses } from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { styled } from '@mui/material/styles';
+import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { GridDragIcon } from '../icons';
+import { GridPanelContent } from './GridPanelContent';
+import { GridPanelFooter } from './GridPanelFooter';
+import { GridPanelHeader } from './GridPanelHeader';
+import { GridPanelWrapper } from './GridPanelWrapper';
+import { GRID_EXPERIMENTAL_ENABLED } from '../../constants/envConstants';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+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: ['columnsPanel'],
+    columnsPanelRow: ['columnsPanelRow']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridColumnsPanelRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsPanel',
+  overridesResolver: (props, styles) => styles.columnsPanel
+})(() => ({
+  padding: '8px 0px 8px 8px'
+}));
+const GridColumnsPanelRowRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsPanelRow',
+  overridesResolver: (props, styles) => styles.columnsPanelRow
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '1px 8px 1px 7px',
+  [`& .${switchClasses.root}`]: {
+    marginRight: theme.spacing(0.5)
+  }
+}));
+const GridIconButtonRoot = styled(IconButton)({
+  justifyContent: 'flex-end'
+});
+export function GridColumnsPanel() {
+  var _rootProps$components, _rootProps$components3, _rootProps$components4;
+
+  const apiRef = useGridApiContext();
+  const searchInputRef = React.useRef(null);
+  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const rootProps = useGridRootProps();
+  const [searchValue, setSearchValue] = React.useState('');
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+
+  const toggleColumn = event => {
+    const {
+      name: field
+    } = event.target;
+    apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
+  };
+
+  const toggleAllColumns = React.useCallback(isVisible => {
+    // TODO v6: call `setColumnVisibilityModel` directly
+    apiRef.current.updateColumns(columns.map(col => {
+      if (col.hideable !== false) {
+        return {
+          field: col.field,
+          hide: !isVisible
+        };
+      }
+
+      return col;
+    }));
+  }, [apiRef, columns]);
+  const handleSearchValueChange = React.useCallback(event => {
+    setSearchValue(event.target.value);
+  }, []);
+  const currentColumns = React.useMemo(() => {
+    if (!searchValue) {
+      return columns;
+    }
+
+    const searchValueToCheck = searchValue.toLowerCase();
+    return columns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
+  }, [columns, searchValue]);
+  React.useEffect(() => {
+    searchInputRef.current.focus();
+  }, []);
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, {
+    children: [/*#__PURE__*/_jsx(GridPanelHeader, {
+      children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
+        label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
+        placeholder: apiRef.current.getLocaleText('columnsPanelTextFieldPlaceholder'),
+        inputRef: searchInputRef,
+        value: searchValue,
+        onChange: handleSearchValueChange,
+        variant: "standard",
+        fullWidth: true
+      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField))
+    }), /*#__PURE__*/_jsx(GridPanelContent, {
+      children: /*#__PURE__*/_jsx(GridColumnsPanelRoot, {
+        className: classes.root,
+        children: currentColumns.map(column => {
+          var _rootProps$components2;
+
+          return /*#__PURE__*/_jsxs(GridColumnsPanelRowRoot, {
+            className: classes.columnsPanelRow,
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+              control: /*#__PURE__*/_jsx(rootProps.components.BaseSwitch, _extends({
+                disabled: column.hideable === false,
+                checked: columnVisibilityModel[column.field] !== false,
+                onClick: toggleColumn,
+                name: column.field,
+                color: "primary",
+                size: "small"
+              }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
+              label: column.headerName || column.field
+            }), !rootProps.disableColumnReorder && GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/_jsx(GridIconButtonRoot, {
+              draggable: true,
+              "aria-label": apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
+              title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
+              size: "small",
+              disabled: true,
+              children: /*#__PURE__*/_jsx(GridDragIcon, {})
+            })]
+          }, column.field);
+        })
+      })
+    }), /*#__PURE__*/_jsxs(GridPanelFooter, {
+      children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
+        onClick: () => toggleAllColumns(false),
+        color: "primary"
+      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseButton, {
+        children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
+      })), /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
+        onClick: () => toggleAllColumns(true),
+        color: "primary"
+      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseButton, {
+        children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
+      }))]
+    })]
+  });
+}

package/components/panel/GridPanel.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { MUIStyledCommonProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { InternalStandardProps as StandardProps } from '@mui/material';
+import { PopperProps } from '@mui/material/Popper';
+export interface GridPanelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the paper element. */
+    paper: string;
+}
+export interface GridPanelProps extends StandardProps<MUIStyledCommonProps<Theme> & PopperProps, 'children'> {
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<GridPanelClasses>;
+    open: boolean;
+}
+export declare const gridPanelClasses: Record<"paper" | "panel", string>;
+declare const GridPanel: React.ForwardRefExoticComponent<Pick<GridPanelProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "children" | "as" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "theme" | "classes" | "container" | "disablePortal" | "keepMounted" | "anchorEl" | "placement" | "modifiers" | "popperOptions" | "popperRef"> & React.RefAttributes<HTMLDivElement>>;
+export { GridPanel };

package/components/panel/GridPanel.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "classes"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/material';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { isEscapeKey } from '../../utils/keyboardUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
+const GridPanelRoot = styled(Popper, {
+  name: 'MuiDataGrid',
+  slot: 'Panel',
+  overridesResolver: (props, styles) => styles.panel
+})(({
+  theme
+}) => ({
+  zIndex: theme.zIndex.modal
+}));
+const GridPaperRoot = styled(Paper, {
+  name: 'MuiDataGrid',
+  slot: 'Paper',
+  overridesResolver: (props, styles) => styles.paper
+})(({
+  theme
+}) => ({
+  backgroundColor: theme.palette.background.paper,
+  minWidth: 300,
+  maxHeight: 450,
+  display: 'flex'
+}));
+const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _apiRef$current$colum;
+
+  const {
+    children,
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const classes = gridPanelClasses;
+  const [isPlaced, setIsPlaced] = React.useState(false);
+  const handleClickAway = React.useCallback(() => {
+    apiRef.current.hidePreferences();
+  }, [apiRef]);
+  const handleKeyDown = React.useCallback(event => {
+    if (isEscapeKey(event.key)) {
+      apiRef.current.hidePreferences();
+    }
+  }, [apiRef]);
+  const modifiers = React.useMemo(() => [{
+    name: 'flip',
+    enabled: false
+  }, {
+    name: 'isPlaced',
+    enabled: true,
+    phase: 'main',
+    fn: () => {
+      setIsPlaced(true);
+    },
+    effect: () => () => {
+      setIsPlaced(false);
+    }
+  }], []);
+  const anchorEl = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current;
+
+  if (!anchorEl) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(GridPanelRoot, _extends({
+    ref: ref,
+    placement: "bottom-start",
+    className: clsx(className, classes.panel),
+    anchorEl: anchorEl,
+    modifiers: modifiers
+  }, other, {
+    children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      onClickAway: handleClickAway,
+      children: /*#__PURE__*/_jsx(GridPaperRoot, {
+        className: classes.paper,
+        elevation: 8,
+        onKeyDown: handleKeyDown,
+        children: isPlaced && children
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool.isRequired
+} : void 0;
+export { GridPanel };

package/components/panel/GridPanelContent.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GridPanelContent(props: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): JSX.Element;

package/components/panel/GridPanelContent.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridPanelContentRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelContent',
+  overridesResolver: (props, styles) => styles.panelContent
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto',
+  flex: '1 1',
+  maxHeight: 400
+});
+export function GridPanelContent(props) {
+  const {
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridPanelContentRoot, _extends({
+    className: clsx(className, classes.root)
+  }, other));
+}

package/components/panel/GridPanelFooter.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GridPanelFooter(props: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): JSX.Element;

package/components/panel/GridPanelFooter.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelFooter']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridPanelFooterRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelFooter',
+  overridesResolver: (props, styles) => styles.panelFooter
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(0.5),
+  display: 'flex',
+  justifyContent: 'space-between'
+}));
+export function GridPanelFooter(props) {
+  const {
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridPanelFooterRoot, _extends({
+    className: clsx(className, classes.root)
+  }, other));
+}

package/components/panel/GridPanelHeader.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GridPanelHeader(props: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): JSX.Element;

package/components/panel/GridPanelHeader.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelHeader']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridPanelHeaderRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelHeader',
+  overridesResolver: (props, styles) => styles.panelHeader
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(1)
+}));
+export function GridPanelHeader(props) {
+  const {
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridPanelHeaderRoot, _extends({
+    className: clsx(className, classes.root)
+  }, other));
+}

package/components/panel/GridPanelWrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { MUIStyledCommonProps } from '@mui/system';
+interface GridPanelWrapperProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>, MUIStyledCommonProps<Theme> {
+}
+declare function GridPanelWrapper(props: GridPanelWrapperProps): JSX.Element;
+export { GridPanelWrapper };

package/components/panel/GridPanelWrapper.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import { styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['panelWrapper']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridPanelWrapperRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PanelWrapper',
+  overridesResolver: (props, styles) => styles.panelWrapper
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  '&:focus': {
+    outline: 0
+  }
+});
+
+const isEnabled = () => true;
+
+function GridPanelWrapper(props) {
+  const {
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(TrapFocus, {
+    open: true,
+    disableEnforceFocus: true,
+    isEnabled: isEnabled,
+    children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
+      tabIndex: -1,
+      className: clsx(className, classes.root)
+    }, other))
+  });
+}
+
+export { GridPanelWrapper };

package/components/panel/GridPreferencesPanel.d.ts

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

package/components/panel/GridPreferencesPanel.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
+import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
+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";
+export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
+  var _rootProps$components, _rootProps$components2, _rootProps$components3, _rootProps$components4;
+
+  const apiRef = useGridApiContext();
+  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  const rootProps = useGridRootProps();
+  const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const isColumnsTabOpen = preferencePanelState.openedPanelValue === GridPreferencePanelsValue.columns;
+  const isFiltersTabOpen = !preferencePanelState.openedPanelValue || !isColumnsTabOpen;
+  return /*#__PURE__*/_jsxs(rootProps.components.Panel, _extends({
+    ref: ref,
+    as: rootProps.components.BasePopper,
+    open: columns.length > 0 && preferencePanelState.open
+  }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.panel, props, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.basePopper, {
+    children: [!rootProps.disableColumnSelector && isColumnsTabOpen && /*#__PURE__*/_jsx(rootProps.components.ColumnsPanel, _extends({}, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.columnsPanel)), !rootProps.disableColumnFilter && isFiltersTabOpen && /*#__PURE__*/_jsx(rootProps.components.FilterPanel, _extends({}, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.filterPanel))]
+  }));
+});

package/components/panel/filterPanel/GridFilterForm.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { GridFilterItem, GridLinkOperator } from '../../../models/gridFilterItem';
+export interface GridFilterFormProps {
+    item: GridFilterItem;
+    hasMultipleFilters: boolean;
+    showMultiFilterOperators?: boolean;
+    multiFilterOperator?: GridLinkOperator;
+    disableMultiFilterOperator?: boolean;
+    focusElementRef?: React.Ref<any>;
+    applyFilterChanges: (item: GridFilterItem) => void;
+    applyMultiFilterOperatorChanges: (operator: GridLinkOperator) => void;
+    deleteFilter: (item: GridFilterItem) => void;
+    linkOperators?: GridLinkOperator[];
+    columnsSort?: 'asc' | 'desc';
+    deleteIconProps?: any;
+    linkOperatorInputProps?: any;
+    operatorInputProps?: any;
+    columnInputProps?: any;
+    valueInputProps?: any;
+}
+declare function GridFilterForm(props: GridFilterFormProps): JSX.Element;
+declare namespace GridFilterForm {
+    var propTypes: any;
+}
+export { GridFilterForm };