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

package/esm/components/chartsPanel/data/GridChartsPanelDataField.js

@@ -0,0 +1,327 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass, GridMenu, useGridSelector } from '@mui/x-data-grid-pro';
+import composeClasses from '@mui/utils/composeClasses';
+import { gridPivotActiveSelector, NotRendered, vars } from '@mui/x-data-grid-pro/internals';
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { useGridPrivateApiContext } from "../../../hooks/utils/useGridPrivateApiContext.js";
+import { GridChartsPanelDataFieldMenu } from "./GridChartsPanelDataFieldMenu.js";
+import { gridAggregationModelSelector } from "../../../hooks/features/aggregation/index.js";
+import { gridRowGroupingSanitizedModelSelector } from "../../../hooks/features/rowGrouping/gridRowGroupingSelector.js";
+import { getAggregationFunctionLabel, getAvailableAggregationFunctions } from "../../../hooks/features/aggregation/gridAggregationUtils.js";
+import { COLUMN_GROUP_ID_SEPARATOR } from "../../../constants/columnGroups.js";
+import { jsx as _jsx, jsxs as _jsxs } from "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 composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridChartsPanelDataFieldRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataField'
+})(({
+  disabled
+}) => ({
+  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: disabled ? 'not-allowed' : 'grab',
+  opacity: disabled ? 0.5 : 1,
+  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 GridChartsPanelDataFieldName = styled('span', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldName'
+})({
+  flex: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const GridChartsPanelDataFieldActionContainer = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldActionContainer'
+})({
+  display: 'flex',
+  alignItems: 'center'
+});
+const GridChartsPanelDataFieldDragIcon = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldDragIcon'
+})({
+  position: 'absolute',
+  left: -1,
+  width: 16,
+  display: 'flex',
+  justifyContent: 'center',
+  color: vars.colors.foreground.base,
+  opacity: 0,
+  '[draggable="true"]:hover > &': {
+    opacity: 0.3
+  }
+});
+const GridChartsPanelDataFieldCheckbox = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldCheckbox'
+})({
+  flex: 1,
+  position: 'relative',
+  margin: vars.spacing(0, 0, 0, -1),
+  cursor: 'grab'
+});
+export function AggregationSelect({
+  aggFunc,
+  field
+}) {
+  const rootProps = useGridRootProps();
+  const [aggregationMenuOpen, setAggregationMenuOpen] = React.useState(false);
+  const aggregationMenuTriggerRef = React.useRef(null);
+  const aggregationMenuTriggerId = React.useId();
+  const aggregationMenuId = React.useId();
+  const apiRef = useGridApiContext();
+  const aggregationModel = gridAggregationModelSelector(apiRef);
+  const pivotActive = gridPivotActiveSelector(apiRef);
+  const getActualFieldName = React.useCallback(fieldName => pivotActive ? fieldName.split(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]), ...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 => _extends({}, prev, {
+        values: prev.values.map(col => {
+          if (col.field === fieldName) {
+            return _extends({}, col, {
+              aggFunc: func
+            });
+          }
+          return col;
+        })
+      }));
+    } else if (func === AGGREGATION_FUNCTION_NONE) {
+      const updatedAggregationModel = _extends({}, aggregationModel);
+      delete updatedAggregationModel[field];
+      apiRef.current.setAggregationModel(updatedAggregationModel);
+    } else {
+      apiRef.current.setAggregationModel(_extends({}, aggregationModel, {
+        [field]: func
+      }));
+    }
+    setAggregationMenuOpen(false);
+  }, [apiRef, field, getActualFieldName, pivotActive, aggregationModel, setAggregationMenuOpen]);
+  return availableAggregationFunctions.length > 0 ? /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseChip, {
+      label: 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__*/_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: 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 = useGridRootProps();
+  const [dropPosition, setDropPosition] = React.useState(null);
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    dropPosition,
+    section
+  });
+  const classes = useUtilityClasses(ownerState);
+  const apiRef = useGridPrivateApiContext();
+  const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
+  const rowGroupingModel = useGridSelector(apiRef, 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__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: disabled ? apiRef.current.getLocaleText('chartsFieldBlocked') : undefined,
+    enterDelay: 1000
+  }, rootProps.slotProps?.baseTooltip, {
+    children: /*#__PURE__*/_jsxs(GridChartsPanelDataFieldRoot, {
+      ownerState: ownerState,
+      className: classes.root,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onDragStart: handleDragStart,
+      onDragEnd: onDragEnd,
+      draggable: !disabled,
+      disabled: !!disabled,
+      children: [/*#__PURE__*/_jsx(GridChartsPanelDataFieldDragIcon, {
+        ownerState: ownerState,
+        className: classes.dragIcon,
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnReorderIcon, {
+          fontSize: "small"
+        })
+      }), hideable ? /*#__PURE__*/_jsx(GridChartsPanelDataFieldCheckbox, _extends({
+        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__*/_jsx(GridChartsPanelDataFieldName, {
+        ownerState: ownerState,
+        className: classes.name,
+        children: children
+      }), /*#__PURE__*/_jsxs(GridChartsPanelDataFieldActionContainer, {
+        ownerState: ownerState,
+        className: classes.actionContainer,
+        children: [isRowGroupingEnabled && section === 'values' && /*#__PURE__*/_jsx(AggregationSelect, {
+          aggFunc: aggregationModel[field] ?? AGGREGATION_FUNCTION_NONE,
+          field: field
+        }), /*#__PURE__*/_jsx(GridChartsPanelDataFieldMenu, {
+          field: field,
+          section: section,
+          blockedSections: blockedSections,
+          dimensionsLabel: dimensionsLabel,
+          valuesLabel: valuesLabel
+        })]
+      })]
+    })
+  }));
+}
+export { GridChartsPanelDataField };

package/esm/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/esm/components/chartsPanel/data/GridChartsPanelDataFieldMenu.js

@@ -0,0 +1,173 @@
+'use client';
+
+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 { gridChartsDimensionsSelector, gridChartsIntegrationActiveChartIdSelector, gridChartsValuesSelector } from "../../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function GridChartsPanelDataFieldMenu(props) {
+  const {
+    field,
+    section,
+    blockedSections,
+    dimensionsLabel,
+    valuesLabel
+  } = props;
+  const rootProps = useGridRootProps();
+  const [open, setOpen] = React.useState(false);
+  const apiRef = useGridPrivateApiContext();
+  const activeChartId = useGridSelector(apiRef, gridChartsIntegrationActiveChartIdSelector);
+  const dimensions = useGridSelector(apiRef, gridChartsDimensionsSelector, activeChartId);
+  const values = useGridSelector(apiRef, 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 = useId();
+  const triggerId = useId();
+  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__*/_jsx(rootProps.slots.chartsMenuMoveUpIcon, {}),
+      disabled: !canMoveUp
+    }, {
+      key: 'down',
+      label: apiRef.current.getLocaleText('chartsMenuMoveDown'),
+      icon: /*#__PURE__*/_jsx(rootProps.slots.chartsMenuMoveDownIcon, {}),
+      disabled: !canMoveDown
+    }, {
+      divider: true
+    }, {
+      key: 'top',
+      label: apiRef.current.getLocaleText('chartsMenuMoveToTop'),
+      icon: /*#__PURE__*/_jsx(rootProps.slots.chartsMenuMoveToTopIcon, {}),
+      disabled: !canMoveUp
+    }, {
+      key: 'bottom',
+      label: apiRef.current.getLocaleText('chartsMenuMoveToBottom'),
+      icon: /*#__PURE__*/_jsx(rootProps.slots.chartsMenuMoveToBottomIcon, {}),
+      disabled: !canMoveDown
+    }, {
+      divider: true
+    }];
+    const removeMenuItem = [{
+      key: null,
+      label: apiRef.current.getLocaleText('chartsMenuRemove'),
+      icon: /*#__PURE__*/_jsx(rootProps.slots.chartsMenuRemoveIcon, {})
+    }];
+    const addToSectionMenuItems = [{
+      key: 'dimensions',
+      label: apiRef.current.getLocaleText('chartsMenuAddToDimensions')(dimensionsLabel),
+      icon: /*#__PURE__*/_jsx("span", {})
+    }, {
+      key: 'values',
+      label: apiRef.current.getLocaleText('chartsMenuAddToValues')(valuesLabel),
+      icon: /*#__PURE__*/_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__*/_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('chartsMenuOptions'),
+      onClick: handleClick,
+      ref: triggerRef,
+      children: isAvailableField ? /*#__PURE__*/_jsx(rootProps.slots.chartsMenuAddIcon, {
+        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: menuItems.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 { GridChartsPanelDataFieldMenu };

package/esm/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/esm/components/chartsPanel/data/GridChartsPanelDataHeader.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SidebarHeader } from "../../sidebar/index.js";
+import { GridChartsPanelDataSearch } from "./GridChartsPanelDataSearch.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridChartsPanelDataHeader(props) {
+  const {
+    searchValue,
+    onSearchValueChange
+  } = props;
+  return /*#__PURE__*/_jsx(SidebarHeader, {
+    children: /*#__PURE__*/_jsx(GridChartsPanelDataSearch, {
+      value: searchValue,
+      onClear: () => onSearchValueChange(''),
+      onChange: event => onSearchValueChange(event.target.value)
+    })
+  });
+}
+export { GridChartsPanelDataHeader };

package/esm/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/esm/components/chartsPanel/data/GridChartsPanelDataSearch.js

@@ -0,0 +1,73 @@
+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 composeClasses from '@mui/utils/composeClasses';
+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: ['chartsPanelDataSearchContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridChartsPanelDataSearchContainer = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataSearchContainer'
+})({
+  padding: vars.spacing(1)
+});
+function GridChartsPanelDataSearch(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(GridChartsPanelDataSearchContainer, {
+    ownerState: rootProps,
+    className: classes.container,
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+      size: "small",
+      "aria-label": apiRef.current.getLocaleText('chartsSearchLabel'),
+      placeholder: apiRef.current.getLocaleText('chartsSearchPlaceholder'),
+      onKeyDown: handleKeyDown,
+      fullWidth: true,
+      slotProps: {
+        input: {
+          startAdornment: /*#__PURE__*/_jsx(rootProps.slots.chartsSearchIcon, {
+            fontSize: "small"
+          }),
+          endAdornment: value ? /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
+            edge: "end",
+            size: "small",
+            onClick: onClear,
+            "aria-label": apiRef.current.getLocaleText('chartsSearchClear'),
+            children: /*#__PURE__*/_jsx(rootProps.slots.chartsSearchClearIcon, {
+              fontSize: "small"
+            })
+          }) : null
+        },
+        htmlInput: {
+          role: 'searchbox'
+        }
+      }
+    }, rootProps.slotProps?.baseTextField, {
+      value: value,
+      onChange: onChange
+    }))
+  });
+}
+export { GridChartsPanelDataSearch };

package/esm/components/chartsPanel/index.d.ts

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

package/esm/components/chartsPanel/index.js

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

package/esm/components/collapsible/Collapsible.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
-type CollapsibleProps = React.HTMLAttributes<HTMLDivElement>;
+type CollapsibleProps = React.HTMLAttributes<HTMLDivElement> & {
+  initiallyOpen?: boolean;
+};
 declare function Collapsible(props: CollapsibleProps): React.JSX.Element;
 export { Collapsible };

package/esm/components/collapsible/Collapsible.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "children"];
+const _excluded = ["className", "children", "initiallyOpen"];
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { vars } from '@mui/x-data-grid-pro/internals';
@@ -36,10 +36,11 @@ const CollapsibleRoot = styled('div', {
 function Collapsible(props) {
   const {
       className,
-      children
+      children,
+      initiallyOpen = true
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [open, setOpen] = React.useState(true);
+  const [open, setOpen] = React.useState(initiallyOpen);
   const panelId = useId();
   const rootProps = useGridRootProps();
   const ownerState = {

package/esm/components/{GridColumnMenuAggregationItem.js → columnMenu/menuItems/GridColumnMenuAggregationItem.js}

@@ -6,10 +6,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridSelector } from '@mui/x-data-grid-pro';
 import useId from '@mui/utils/useId';
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { canColumnHaveAggregationFunction, getAggregationFunctionLabel, getAvailableAggregationFunctions } from "../hooks/features/aggregation/gridAggregationUtils.js";
-import { gridAggregationModelSelector } from "../hooks/features/aggregation/gridAggregationSelectors.js";
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { canColumnHaveAggregationFunction, getAggregationFunctionLabel, getAvailableAggregationFunctions } from "../../../hooks/features/aggregation/gridAggregationUtils.js";
+import { gridAggregationModelSelector } from "../../../hooks/features/aggregation/gridAggregationSelectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 function GridColumnMenuAggregationItem(props) {

package/esm/components/columnMenu/menuItems/GridColumnMenuChartsItem.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+export declare function GridColumnMenuChartsItem(props: GridColumnMenuItemProps): React.JSX.Element | null;