@mui/x-data-grid-premium 8.11.3 → 8.12.0

package/components/chartsPanel/data/GridChartsPanelDataField.js

@@ -0,0 +1,334 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AggregationSelect = AggregationSelect;
+exports.GridChartsPanelDataField = GridChartsPanelDataField;
+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 _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _useGridPrivateApiContext = require("../../../hooks/utils/useGridPrivateApiContext");
+var _GridChartsPanelDataFieldMenu = require("./GridChartsPanelDataFieldMenu");
+var _aggregation = require("../../../hooks/features/aggregation");
+var _gridRowGroupingSelector = require("../../../hooks/features/rowGrouping/gridRowGroupingSelector");
+var _gridAggregationUtils = require("../../../hooks/features/aggregation/gridAggregationUtils");
+var _columnGroups = require("../../../constants/columnGroups");
+var _jsxRuntime = require("react/jsx-runtime");
+const AGGREGATION_FUNCTION_NONE = 'none';
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['chartsPanelDataField'],
+    name: ['chartsPanelDataFieldName'],
+    actionContainer: ['chartsPanelDataFieldActionContainer'],
+    dragIcon: ['chartsPanelDataFieldDragIcon'],
+    checkbox: ['chartsPanelDataFieldCheckbox']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const GridChartsPanelDataFieldRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataField'
+})(({
+  disabled
+}) => ({
+  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: disabled ? 'not-allowed' : 'grab',
+  opacity: disabled ? 0.5 : 1,
+  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 GridChartsPanelDataFieldName = (0, _system.styled)('span', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldName'
+})({
+  flex: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const GridChartsPanelDataFieldActionContainer = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldActionContainer'
+})({
+  display: 'flex',
+  alignItems: 'center'
+});
+const GridChartsPanelDataFieldDragIcon = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldDragIcon'
+})({
+  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 GridChartsPanelDataFieldCheckbox = (0, _system.styled)(_internals.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldCheckbox'
+})({
+  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 = React.useId();
+  const aggregationMenuId = React.useId();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const aggregationModel = (0, _aggregation.gridAggregationModelSelector)(apiRef);
+  const pivotActive = (0, _internals.gridPivotActiveSelector)(apiRef);
+  const getActualFieldName = React.useCallback(fieldName => pivotActive ? fieldName.split(_columnGroups.COLUMN_GROUP_ID_SEPARATOR).slice(-1)[0] : fieldName, [pivotActive]);
+  const colDef = React.useCallback(fieldName => apiRef.current.getColumn(getActualFieldName(fieldName)), [apiRef, getActualFieldName]);
+  const availableAggregationFunctions = React.useMemo(() => [...(pivotActive ? [] : [AGGREGATION_FUNCTION_NONE]), ...(0, _gridAggregationUtils.getAvailableAggregationFunctions)({
+    aggregationFunctions: rootProps.aggregationFunctions,
+    colDef: colDef(field),
+    isDataSource: !!rootProps.dataSource
+  })], [colDef, field, pivotActive, rootProps.aggregationFunctions, rootProps.dataSource]);
+  const handleClick = React.useCallback(func => {
+    if (pivotActive) {
+      const fieldName = getActualFieldName(field);
+      apiRef.current.setPivotModel(prev => (0, _extends2.default)({}, prev, {
+        values: prev.values.map(col => {
+          if (col.field === fieldName) {
+            return (0, _extends2.default)({}, col, {
+              aggFunc: func
+            });
+          }
+          return col;
+        })
+      }));
+    } else if (func === AGGREGATION_FUNCTION_NONE) {
+      const updatedAggregationModel = (0, _extends2.default)({}, aggregationModel);
+      delete updatedAggregationModel[field];
+      apiRef.current.setAggregationModel(updatedAggregationModel);
+    } else {
+      apiRef.current.setAggregationModel((0, _extends2.default)({}, aggregationModel, {
+        [field]: func
+      }));
+    }
+    setAggregationMenuOpen(false);
+  }, [apiRef, field, getActualFieldName, pivotActive, aggregationModel, setAggregationMenuOpen]);
+  return availableAggregationFunctions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, {
+      label: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+        apiRef,
+        aggregationRule: {
+          aggregationFunctionName: aggFunc,
+          aggregationFunction: rootProps.aggregationFunctions[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: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+            apiRef,
+            aggregationRule: {
+              aggregationFunctionName: func,
+              aggregationFunction: rootProps.aggregationFunctions[func] || {}
+            }
+          })
+        }), func))
+      }))
+    })]
+  }) : null;
+}
+function GridChartsPanelDataField(props) {
+  const {
+    children,
+    field,
+    section,
+    blockedSections,
+    dimensionsLabel,
+    valuesLabel,
+    selected,
+    disabled,
+    onChange,
+    onDragStart,
+    onDragEnd
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [dropPosition, setDropPosition] = React.useState(null);
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes,
+    dropPosition,
+    section
+  });
+  const classes = useUtilityClasses(ownerState);
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const aggregationModel = (0, _xDataGridPro.useGridSelector)(apiRef, _aggregation.gridAggregationModelSelector);
+  const rowGroupingModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector);
+  const isRowGroupingEnabled = React.useMemo(() => rowGroupingModel.length > 0, [rowGroupingModel]);
+  const handleDragStart = React.useCallback(event => {
+    const data = {
+      field,
+      section
+    };
+    event.dataTransfer.setData('text/plain', JSON.stringify(data));
+    event.dataTransfer.dropEffect = 'move';
+    onDragStart(field, 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 (disabled) {
+      return;
+    }
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setDropPosition(getDropPosition(event));
+    }
+  }, [disabled, 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,
+        section: originSection
+      } = JSON.parse(event.dataTransfer.getData('text/plain'));
+      apiRef.current.chartsIntegration.updateDataReference(droppedField, originSection, section, field, position || undefined);
+    }
+  }, [getDropPosition, apiRef, field, section]);
+  const hideable = section !== null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+    title: disabled ? apiRef.current.getLocaleText('chartsFieldBlocked') : undefined,
+    enterDelay: 1000
+  }, rootProps.slotProps?.baseTooltip, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataFieldRoot, {
+      ownerState: ownerState,
+      className: classes.root,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onDragStart: handleDragStart,
+      onDragEnd: onDragEnd,
+      draggable: !disabled,
+      disabled: !!disabled,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataFieldDragIcon, {
+        ownerState: ownerState,
+        className: classes.dragIcon,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnReorderIcon, {
+          fontSize: "small"
+        })
+      }), hideable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataFieldCheckbox, (0, _extends2.default)({
+        ownerState: ownerState,
+        className: classes.checkbox,
+        as: rootProps.slots.baseCheckbox,
+        size: "small",
+        density: "compact"
+      }, rootProps.slotProps?.baseCheckbox, {
+        checked: selected || false,
+        onChange: () => onChange && onChange(field, section),
+        label: children
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataFieldName, {
+        ownerState: ownerState,
+        className: classes.name,
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataFieldActionContainer, {
+        ownerState: ownerState,
+        className: classes.actionContainer,
+        children: [isRowGroupingEnabled && section === 'values' && /*#__PURE__*/(0, _jsxRuntime.jsx)(AggregationSelect, {
+          aggFunc: aggregationModel[field] ?? AGGREGATION_FUNCTION_NONE,
+          field: field
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelDataFieldMenu.GridChartsPanelDataFieldMenu, {
+          field: field,
+          section: section,
+          blockedSections: blockedSections,
+          dimensionsLabel: dimensionsLabel,
+          valuesLabel: valuesLabel
+        })]
+      })]
+    })
+  }));
+}

package/components/chartsPanel/data/GridChartsPanelDataFieldMenu.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { FieldTransferObject } from "./GridChartsPanelDataBody.js";
+interface GridChartsPanelDataFieldMenuProps {
+  field: string;
+  section: FieldTransferObject['section'];
+  blockedSections?: string[];
+  dimensionsLabel: string;
+  valuesLabel: string;
+}
+declare function GridChartsPanelDataFieldMenu(props: GridChartsPanelDataFieldMenuProps): React.JSX.Element | null;
+export { GridChartsPanelDataFieldMenu };

package/components/chartsPanel/data/GridChartsPanelDataFieldMenu.js

@@ -0,0 +1,179 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridChartsPanelDataFieldMenu = GridChartsPanelDataFieldMenu;
+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 _gridChartsIntegrationSelectors = require("../../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridChartsPanelDataFieldMenu(props) {
+  const {
+    field,
+    section,
+    blockedSections,
+    dimensionsLabel,
+    valuesLabel
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [open, setOpen] = React.useState(false);
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const activeChartId = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsIntegrationActiveChartIdSelector);
+  const dimensions = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsDimensionsSelector, activeChartId);
+  const values = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsValuesSelector, activeChartId);
+  const isAvailableField = section === null;
+  const fieldIndexInModel = !isAvailableField ? (section === 'dimensions' ? dimensions : values).findIndex(item => item.field === field) : -1;
+  const modelLength = !isAvailableField ? (section === 'dimensions' ? dimensions : values).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 menuItems = React.useMemo(() => {
+    if (isAvailableField) {
+      return [{
+        key: 'dimensions',
+        label: apiRef.current.getLocaleText('chartsMenuAddToDimensions')(dimensionsLabel)
+      }, {
+        key: 'values',
+        label: apiRef.current.getLocaleText('chartsMenuAddToValues')(valuesLabel)
+      }].filter(item => !blockedSections?.includes(item.key));
+    }
+    const moveMenuItems = [{
+      key: 'up',
+      label: apiRef.current.getLocaleText('chartsMenuMoveUp'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuMoveUpIcon, {}),
+      disabled: !canMoveUp
+    }, {
+      key: 'down',
+      label: apiRef.current.getLocaleText('chartsMenuMoveDown'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuMoveDownIcon, {}),
+      disabled: !canMoveDown
+    }, {
+      divider: true
+    }, {
+      key: 'top',
+      label: apiRef.current.getLocaleText('chartsMenuMoveToTop'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuMoveToTopIcon, {}),
+      disabled: !canMoveUp
+    }, {
+      key: 'bottom',
+      label: apiRef.current.getLocaleText('chartsMenuMoveToBottom'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuMoveToBottomIcon, {}),
+      disabled: !canMoveDown
+    }, {
+      divider: true
+    }];
+    const removeMenuItem = [{
+      key: null,
+      label: apiRef.current.getLocaleText('chartsMenuRemove'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuRemoveIcon, {})
+    }];
+    const addToSectionMenuItems = [{
+      key: 'dimensions',
+      label: apiRef.current.getLocaleText('chartsMenuAddToDimensions')(dimensionsLabel),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
+    }, {
+      key: 'values',
+      label: apiRef.current.getLocaleText('chartsMenuAddToValues')(valuesLabel),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
+    }].filter(item => item.key !== section && !blockedSections?.includes(item.key));
+    if (addToSectionMenuItems.length > 0) {
+      addToSectionMenuItems.push({
+        divider: true
+      });
+    }
+    return [...moveMenuItems, ...addToSectionMenuItems, ...removeMenuItem];
+  }, [isAvailableField, apiRef, rootProps, canMoveUp, canMoveDown, section, blockedSections, dimensionsLabel, valuesLabel]);
+  if (menuItems.length === 0) {
+    return null;
+  }
+  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 === section) {
+      return;
+    }
+    const items = section === 'dimensions' ? dimensions : values;
+    let targetField;
+    let targetFieldPosition = null;
+    let targetSection = section;
+    switch (to) {
+      case 'up':
+        targetField = items[fieldIndexInModel - 1].field;
+        targetFieldPosition = 'top';
+        break;
+      case 'down':
+        targetField = items[fieldIndexInModel + 1].field;
+        targetFieldPosition = 'bottom';
+        break;
+      case 'top':
+        targetField = items[0].field;
+        targetFieldPosition = 'top';
+        break;
+      case 'bottom':
+        targetField = items[modelLength - 1].field;
+        targetFieldPosition = 'bottom';
+        break;
+      case 'dimensions':
+      case 'values':
+      case null:
+        targetSection = to;
+        break;
+      default:
+        break;
+    }
+    apiRef.current.chartsIntegration.updateDataReference(field, section, targetSection, targetField, targetFieldPosition || undefined);
+  };
+  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('chartsMenuOptions'),
+      onClick: handleClick,
+      ref: triggerRef,
+      children: isAvailableField ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuAddIcon, {
+        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: menuItems.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/chartsPanel/data/GridChartsPanelDataHeader.d.ts

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

package/components/chartsPanel/data/GridChartsPanelDataHeader.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridChartsPanelDataHeader = GridChartsPanelDataHeader;
+var React = _interopRequireWildcard(require("react"));
+var _sidebar = require("../../sidebar");
+var _GridChartsPanelDataSearch = require("./GridChartsPanelDataSearch");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridChartsPanelDataHeader(props) {
+  const {
+    searchValue,
+    onSearchValueChange
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.SidebarHeader, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelDataSearch.GridChartsPanelDataSearch, {
+      value: searchValue,
+      onClear: () => onSearchValueChange(''),
+      onChange: event => onSearchValueChange(event.target.value)
+    })
+  });
+}

package/components/chartsPanel/data/GridChartsPanelDataSearch.d.ts

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

package/components/chartsPanel/data/GridChartsPanelDataSearch.js

@@ -0,0 +1,80 @@
+"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.GridChartsPanelDataSearch = GridChartsPanelDataSearch;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _system = require("@mui/system");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    container: ['chartsPanelDataSearchContainer']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const GridChartsPanelDataSearchContainer = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataSearchContainer'
+})({
+  padding: _internals.vars.spacing(1)
+});
+function GridChartsPanelDataSearch(props) {
+  const {
+    onClear,
+    value,
+    onChange
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const classes = useUtilityClasses(rootProps);
+  const handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      onClear();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataSearchContainer, {
+    ownerState: rootProps,
+    className: classes.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+      size: "small",
+      "aria-label": apiRef.current.getLocaleText('chartsSearchLabel'),
+      placeholder: apiRef.current.getLocaleText('chartsSearchPlaceholder'),
+      onKeyDown: handleKeyDown,
+      fullWidth: true,
+      slotProps: {
+        input: {
+          startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsSearchIcon, {
+            fontSize: "small"
+          }),
+          endAdornment: value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, {
+            edge: "end",
+            size: "small",
+            onClick: onClear,
+            "aria-label": apiRef.current.getLocaleText('chartsSearchClear'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsSearchClearIcon, {
+              fontSize: "small"
+            })
+          }) : null
+        },
+        htmlInput: {
+          role: 'searchbox'
+        }
+      }
+    }, rootProps.slotProps?.baseTextField, {
+      value: value,
+      onChange: onChange
+    }))
+  });
+}

package/components/chartsPanel/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./GridChartsPanel.js";
+export * from "./ChartsPanelTrigger.js";

package/components/chartsPanel/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridChartsPanel = require("./GridChartsPanel");
+Object.keys(_GridChartsPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridChartsPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridChartsPanel[key];
+    }
+  });
+});
+var _ChartsPanelTrigger = require("./ChartsPanelTrigger");
+Object.keys(_ChartsPanelTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsPanelTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsPanelTrigger[key];
+    }
+  });
+});