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

package/esm/components/chartsPanel/customize/GridChartsPanelCustomize.js

@@ -0,0 +1,139 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { vars } from '@mui/x-data-grid-pro/internals';
+import { GridOverlay, GridShadowScrollArea } from '@mui/x-data-grid-pro';
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { useGridChartsIntegrationContext } from "../../../hooks/utils/useGridChartIntegration.js";
+import { Collapsible } from "../../collapsible/Collapsible.js";
+import { CollapsibleTrigger } from "../../collapsible/CollapsibleTrigger.js";
+import { CollapsiblePanel } from "../../collapsible/CollapsiblePanel.js";
+import { EMPTY_CHART_INTEGRATION_CONTEXT_STATE } from "../../../hooks/features/chartsIntegration/useGridChartsIntegration.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const GridChartsPanelCustomizeRoot = styled(GridShadowScrollArea)({
+  height: '100%'
+});
+const GridChartsPanelCustomizeSection = styled(Collapsible, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelCustomizeSection'
+})({
+  margin: vars.spacing(0.5, 1)
+});
+const GridChartsPanelCustomizePanel = styled(CollapsiblePanel, {
+  name: 'MuiDataGrid',
+  slot: 'chartsPanelSection'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: vars.spacing(2, 1.5),
+  gap: vars.spacing(3)
+});
+const GridChartsPanelCustomizePanelTitle = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelCustomizePanelTitle'
+})({
+  font: vars.typography.font.body,
+  fontWeight: vars.typography.fontWeight.medium
+});
+export function GridChartsPanelCustomize(props) {
+  const {
+    activeChartId,
+    sections
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const {
+    chartStateLookup,
+    setChartState
+  } = useGridChartsIntegrationContext();
+  const {
+    type: chartType,
+    configuration,
+    dimensions,
+    values
+  } = chartStateLookup[activeChartId] ?? EMPTY_CHART_INTEGRATION_CONTEXT_STATE;
+  const handleChange = (field, value) => {
+    setChartState(activeChartId, _extends({}, configuration, {
+      configuration: _extends({}, configuration, {
+        [field]: value
+      })
+    }));
+  };
+  if (chartType === '') {
+    return /*#__PURE__*/_jsx(GridOverlay, {
+      children: apiRef.current.getLocaleText('chartsChartNotSelected')
+    });
+  }
+  return /*#__PURE__*/_jsx(GridChartsPanelCustomizeRoot, {
+    children: sections.map((section, index) => /*#__PURE__*/_jsxs(GridChartsPanelCustomizeSection, {
+      initiallyOpen: index === 0,
+      ownerState: rootProps,
+      children: [/*#__PURE__*/_jsx(CollapsibleTrigger, {
+        children: /*#__PURE__*/_jsx(GridChartsPanelCustomizePanelTitle, {
+          ownerState: rootProps,
+          children: section.label
+        })
+      }), /*#__PURE__*/_jsx(GridChartsPanelCustomizePanel, {
+        ownerState: rootProps,
+        children: Object.entries(section.controls).map(([key, optRaw]) => {
+          const opt = optRaw;
+          const context = {
+            configuration,
+            dimensions,
+            values
+          };
+          const isHidden = opt.isHidden?.(context) ?? false;
+          if (isHidden) {
+            return null;
+          }
+          const isDisabled = opt.isDisabled?.(context) ?? false;
+          if (opt.type === 'boolean') {
+            return /*#__PURE__*/_jsx(rootProps.slots.baseSwitch, _extends({
+              checked: Boolean(configuration[key] ?? opt.default),
+              onChange: event => handleChange(key, event.target.checked),
+              size: "small",
+              label: opt.label,
+              disabled: isDisabled
+            }, rootProps.slotProps?.baseSwitch), key);
+          }
+          if (opt.type === 'select') {
+            return /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+              fullWidth: true,
+              size: "small",
+              label: opt.label,
+              value: configuration[key] ?? opt.default,
+              onChange: event => handleChange(key, event.target.value),
+              disabled: isDisabled,
+              slotProps: {
+                htmlInput: _extends({}, opt.htmlAttributes)
+              }
+            }, rootProps.slotProps?.baseSelect, {
+              children: (opt.options || []).map(option => /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, {
+                value: option.value,
+                native: false,
+                children: option.content
+              }, option.value))
+            }), key);
+          }
+          // string or number
+          return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+            "aria-label": opt.label,
+            placeholder: opt.label,
+            label: opt.label,
+            type: opt.type === 'number' ? 'number' : 'text',
+            size: "small",
+            fullWidth: true,
+            disabled: isDisabled,
+            slotProps: {
+              htmlInput: _extends({}, opt.htmlAttributes)
+            }
+          }, rootProps.slotProps?.baseTextField, {
+            value: (configuration[key] ?? opt.default ?? '').toString(),
+            onChange: event => handleChange(key, opt.type === 'number' ? Number(event.target.value) : event.target.value)
+          }), key);
+        })
+      })]
+    }, section.id))
+  });
+}

package/esm/components/chartsPanel/data/GridChartsPanelData.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export type SectionLimitLookup = Map<'dimensions' | 'values', number>;
+declare function GridChartsPanelData(): React.JSX.Element;
+export { GridChartsPanelData };

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

@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+import { GridChartsPanelDataBody } from "./GridChartsPanelDataBody.js";
+import { GridChartsPanelDataHeader } from "./GridChartsPanelDataHeader.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function GridChartsPanelData() {
+  const [searchValue, setSearchValue] = React.useState('');
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(GridChartsPanelDataHeader, {
+      searchValue: searchValue,
+      onSearchValueChange: setSearchValue
+    }), /*#__PURE__*/_jsx(GridChartsPanelDataBody, {
+      searchValue: searchValue
+    })]
+  });
+}
+export { GridChartsPanelData };

package/esm/components/chartsPanel/data/GridChartsPanelDataBody.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { GridChartsIntegrationSection } from "../../../hooks/features/chartsIntegration/gridChartsIntegrationInterfaces.js";
+export interface FieldTransferObject {
+  field: string;
+  section: GridChartsIntegrationSection;
+}
+export type DropPosition = 'top' | 'bottom' | null;
+interface GridChartsPanelDataBodyProps {
+  searchValue: string;
+}
+declare function GridChartsPanelDataBody(props: GridChartsPanelDataBodyProps): React.JSX.Element;
+export { GridChartsPanelDataBody };

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

@@ -0,0 +1,374 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { gridPivotActiveSelector, vars } from '@mui/x-data-grid-pro/internals';
+import { getDataGridUtilityClass, GridShadowScrollArea, useGridSelector } from '@mui/x-data-grid-pro';
+import composeClasses from '@mui/utils/composeClasses';
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../../collapsible/index.js";
+import { ResizablePanel, ResizablePanelHandle } from "../../resizablePanel/index.js";
+import { GridChartsPanelDataField } from "./GridChartsPanelDataField.js";
+import { gridChartableColumnsSelector, gridChartsDimensionsSelector, gridChartsIntegrationActiveChartIdSelector, gridChartsValuesSelector } from "../../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js";
+import { useGridPrivateApiContext } from "../../../hooks/utils/useGridPrivateApiContext.js";
+import { useGridChartsIntegrationContext } from "../../../hooks/utils/useGridChartIntegration.js";
+import { getBlockedSections } from "../../../hooks/features/chartsIntegration/utils.js";
+import { gridRowGroupingSanitizedModelSelector } from "../../../hooks/features/rowGrouping/gridRowGroupingSelector.js";
+import { gridPivotModelSelector } from "../../../hooks/features/pivoting/gridPivotingSelectors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['chartsPanelDataBody'],
+    availableFields: ['chartsPanelDataAvailableFields'],
+    sections: ['chartsPanelDataSections'],
+    scrollArea: ['chartsPanelDataScrollArea'],
+    section: ['chartsPanelDataSection'],
+    sectionTitle: ['chartsPanelDataSectionTitle'],
+    fieldList: ['chartsPanelDataFieldList'],
+    placeholder: ['chartsPanelDataPlaceholder']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridChartsPanelDataBodyRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataBody'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+});
+const GridChartsPanelDataAvailableFields = styled(GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataAvailableFields'
+})({
+  flex: 1,
+  minHeight: 84,
+  transition: vars.transition(['background-color'], {
+    duration: vars.transitions.duration.short,
+    easing: vars.transitions.easing.easeInOut
+  }),
+  '&[data-drag-over="true"]': {
+    backgroundColor: vars.colors.interactive.hover
+  }
+});
+const GridChartsPanelDataSections = styled(ResizablePanel, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataSections'
+})({
+  position: 'relative',
+  minHeight: 158,
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column'
+});
+const GridChartsPanelDataScrollArea = styled(GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataScrollArea'
+})({
+  height: '100%'
+});
+const GridChartsPanelDataSection = styled(Collapsible, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataSection',
+  shouldForwardProp: prop => prop !== 'disabled'
+})(({
+  disabled
+}) => ({
+  opacity: disabled ? 0.5 : 1,
+  margin: vars.spacing(0.5, 1),
+  transition: vars.transition(['border-color', 'background-color'], {
+    duration: vars.transitions.duration.short,
+    easing: vars.transitions.easing.easeInOut
+  }),
+  '&[data-drag-over="true"]': {
+    backgroundColor: vars.colors.interactive.hover,
+    outline: `2px solid ${vars.colors.interactive.selected}`
+  }
+}));
+const GridChartsPanelDataSectionTitle = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataSectionTitle'
+})({
+  flex: 1,
+  marginRight: vars.spacing(1.75),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: vars.spacing(1),
+  font: vars.typography.font.body,
+  fontWeight: vars.typography.fontWeight.medium
+});
+const GridChartsPanelDataFieldList = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldList'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: vars.spacing(0.5, 0)
+});
+const GridChartsPanelDataPlaceholder = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataPlaceholder'
+})({
+  flex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textWrap: 'balance',
+  textAlign: 'center',
+  minHeight: 38,
+  height: '100%',
+  padding: vars.spacing(0, 1),
+  color: vars.colors.foreground.muted,
+  font: vars.typography.font.body
+});
+const INITIAL_DRAG_STATE = {
+  active: false,
+  field: null,
+  dropSection: null,
+  initialSection: null
+};
+// dimensions and values
+const SECTION_COUNT = 2;
+function GridChartsPanelDataBody(props) {
+  const {
+    searchValue
+  } = props;
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const pivotModel = useGridSelector(apiRef, gridPivotModelSelector);
+  const activeChartId = useGridSelector(apiRef, gridChartsIntegrationActiveChartIdSelector);
+  const {
+    chartStateLookup
+  } = useGridChartsIntegrationContext();
+  const dimensions = useGridSelector(apiRef, gridChartsDimensionsSelector, activeChartId);
+  const values = useGridSelector(apiRef, gridChartsValuesSelector, activeChartId);
+  const classes = useUtilityClasses(rootProps);
+  const chartableColumns = useGridSelector(apiRef, gridChartableColumnsSelector);
+  const dimensionsLabel = React.useMemo(() => chartStateLookup[activeChartId]?.dimensionsLabel || apiRef.current.getLocaleText('chartsCategories'), [chartStateLookup, activeChartId, apiRef]);
+  const valuesLabel = React.useMemo(() => chartStateLookup[activeChartId]?.valuesLabel || apiRef.current.getLocaleText('chartsSeries'), [chartStateLookup, activeChartId, apiRef]);
+  const fullSections = React.useMemo(() => {
+    const sections = [];
+    if (chartStateLookup[activeChartId]?.maxDimensions && dimensions.length >= chartStateLookup[activeChartId]?.maxDimensions) {
+      sections.push('dimensions');
+    }
+    if (chartStateLookup[activeChartId]?.maxValues && values.length >= chartStateLookup[activeChartId]?.maxValues) {
+      sections.push('values');
+    }
+    return sections;
+  }, [dimensions, values, chartStateLookup, activeChartId]);
+  const blockedSectionsLookup = React.useMemo(() => new Map(Object.values(chartableColumns).map(column => [column.field, Array.from(new Set([...getBlockedSections(column, rowGroupingModel, pivotActive ? pivotModel : undefined), ...fullSections]))])), [rowGroupingModel, chartableColumns, pivotActive, pivotModel, fullSections]);
+  const availableFields = React.useMemo(() => {
+    const notUsedFields = Object.keys(chartableColumns).filter(field => !dimensions.some(dimension => dimension.field === field) && !values.some(value => value.field === field));
+    if (searchValue) {
+      return notUsedFields.filter(field => {
+        const fieldName = apiRef.current.chartsIntegration.getColumnName(field);
+        return fieldName.toLowerCase().includes(searchValue.toLowerCase());
+      });
+    }
+
+    // Fields with all sections blocked should be at the end
+    return notUsedFields.sort((a, b) => {
+      const aBlockedSections = blockedSectionsLookup.get(a).length;
+      const bBlockedSections = blockedSectionsLookup.get(b).length;
+      return (aBlockedSections >= SECTION_COUNT ? 1 : 0) - (bBlockedSections >= SECTION_COUNT ? 1 : 0);
+    });
+  }, [apiRef, searchValue, chartableColumns, dimensions, values, blockedSectionsLookup]);
+  const [drag, setDrag] = React.useState(INITIAL_DRAG_STATE);
+  const disabledSections = React.useMemo(() => {
+    if (!drag.field) {
+      return new Set();
+    }
+    return new Set(blockedSectionsLookup.get(drag.field));
+  }, [blockedSectionsLookup, drag.field]);
+  const handleDragStart = (field, section) => {
+    setDrag({
+      active: true,
+      field,
+      initialSection: section,
+      dropSection: null
+    });
+  };
+  const handleDragEnd = () => {
+    setDrag(INITIAL_DRAG_STATE);
+  };
+  const handleDrop = event => {
+    setDrag(INITIAL_DRAG_STATE);
+
+    // The drop event was already handled by a child
+    if (event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    const {
+      field,
+      section: originSection
+    } = JSON.parse(event.dataTransfer.getData('text/plain'));
+    const targetSection = event.currentTarget.getAttribute('data-section');
+    if (originSection === targetSection) {
+      return;
+    }
+    apiRef.current.chartsIntegration.updateDataReference(field, originSection, targetSection);
+  };
+  const handleDragOver = React.useCallback(event => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+  const handleDragEnter = React.useCallback(event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      const dropSection = event.currentTarget.getAttribute('data-section');
+      setDrag(v => _extends({}, v, {
+        active: true,
+        dropSection
+      }));
+    }
+  }, []);
+  const handleDragLeave = React.useCallback(event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setDrag(v => _extends({}, v, {
+        active: true,
+        dropSection: v.initialSection
+      }));
+    }
+  }, []);
+  const handleChange = React.useCallback((field, section) => {
+    const apiMethod = section === 'dimensions' ? apiRef.current.updateChartDimensionsData : apiRef.current.updateChartValuesData;
+    apiMethod(activeChartId, currentItems => currentItems.map(item => item.field === field ? _extends({}, item, {
+      hidden: item.hidden !== true
+    }) : item));
+  }, [apiRef, activeChartId]);
+  return /*#__PURE__*/_jsxs(GridChartsPanelDataBodyRoot, {
+    ownerState: rootProps,
+    className: classes.root,
+    "data-dragging": drag.active,
+    onDragLeave: handleDragLeave,
+    children: [/*#__PURE__*/_jsxs(GridChartsPanelDataAvailableFields, {
+      ownerState: rootProps,
+      className: classes.availableFields,
+      onDrop: handleDrop,
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      "data-section": null,
+      "data-drag-over": drag.active && drag.dropSection === null,
+      children: [availableFields.length === 0 && /*#__PURE__*/_jsx(GridChartsPanelDataPlaceholder, {
+        ownerState: rootProps,
+        className: classes.placeholder,
+        children: apiRef.current.getLocaleText('chartsNoFields')
+      }), availableFields.length > 0 && /*#__PURE__*/_jsx(GridChartsPanelDataFieldList, {
+        ownerState: rootProps,
+        className: classes.fieldList,
+        children: availableFields.map(field => /*#__PURE__*/_jsx(GridChartsPanelDataField, {
+          field: field,
+          section: null,
+          disabled: blockedSectionsLookup.get(field).length >= SECTION_COUNT,
+          blockedSections: blockedSectionsLookup.get(field),
+          dimensionsLabel: dimensionsLabel,
+          valuesLabel: valuesLabel,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          children: apiRef.current.chartsIntegration.getColumnName(field)
+        }, field))
+      })]
+    }), /*#__PURE__*/_jsxs(GridChartsPanelDataSections, {
+      ownerState: rootProps,
+      className: classes.sections,
+      direction: "vertical",
+      children: [/*#__PURE__*/_jsx(ResizablePanelHandle, {}), /*#__PURE__*/_jsxs(GridChartsPanelDataScrollArea, {
+        ownerState: rootProps,
+        className: classes.scrollArea,
+        children: [/*#__PURE__*/_jsxs(GridChartsPanelDataSection, {
+          ownerState: rootProps,
+          className: classes.section,
+          onDrop: handleDrop,
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          disabled: disabledSections.has('dimensions'),
+          "data-section": "dimensions",
+          "data-drag-over": !disabledSections.has('dimensions') && drag.dropSection === 'dimensions',
+          children: [/*#__PURE__*/_jsx(CollapsibleTrigger, {
+            "aria-label": dimensionsLabel,
+            children: /*#__PURE__*/_jsxs(GridChartsPanelDataSectionTitle, {
+              ownerState: rootProps,
+              className: classes.sectionTitle,
+              children: [dimensionsLabel, (chartStateLookup[activeChartId]?.maxDimensions || dimensions.length > 0) && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+                badgeContent: chartStateLookup[activeChartId]?.maxDimensions ? `${dimensions.length}/${chartStateLookup[activeChartId]?.maxDimensions}` : dimensions.length
+              })]
+            })
+          }), /*#__PURE__*/_jsxs(CollapsiblePanel, {
+            children: [dimensions.length === 0 && /*#__PURE__*/_jsx(GridChartsPanelDataPlaceholder, {
+              ownerState: rootProps,
+              className: classes.placeholder,
+              children: apiRef.current.getLocaleText('chartsDragToDimensions')(dimensionsLabel)
+            }), dimensions.length > 0 && /*#__PURE__*/_jsx(GridChartsPanelDataFieldList, {
+              ownerState: rootProps,
+              className: classes.fieldList,
+              children: dimensions.map(dimension => /*#__PURE__*/_jsx(GridChartsPanelDataField, {
+                field: dimension.field,
+                selected: dimension.hidden !== true,
+                onChange: handleChange,
+                section: "dimensions",
+                blockedSections: blockedSectionsLookup.get(dimension.field),
+                dimensionsLabel: dimensionsLabel,
+                valuesLabel: valuesLabel,
+                disabled: disabledSections.has('dimensions'),
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd,
+                children: apiRef.current.chartsIntegration.getColumnName(dimension.field)
+              }, dimension.field))
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(GridChartsPanelDataSection, {
+          ownerState: rootProps,
+          className: classes.section,
+          onDrop: handleDrop,
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          disabled: disabledSections.has('values'),
+          "data-section": "values",
+          "data-drag-over": !disabledSections.has('values') && drag.dropSection === 'values',
+          children: [/*#__PURE__*/_jsx(CollapsibleTrigger, {
+            "aria-label": valuesLabel,
+            children: /*#__PURE__*/_jsxs(GridChartsPanelDataSectionTitle, {
+              ownerState: rootProps,
+              className: classes.sectionTitle,
+              children: [valuesLabel, (chartStateLookup[activeChartId]?.maxValues || values.length > 0) && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+                badgeContent: chartStateLookup[activeChartId]?.maxValues ? `${values.length}/${chartStateLookup[activeChartId]?.maxValues}` : values.length
+              })]
+            })
+          }), /*#__PURE__*/_jsxs(CollapsiblePanel, {
+            children: [values.length === 0 && /*#__PURE__*/_jsx(GridChartsPanelDataPlaceholder, {
+              ownerState: rootProps,
+              className: classes.placeholder,
+              children: apiRef.current.getLocaleText('chartsDragToValues')(valuesLabel)
+            }), values.length > 0 && /*#__PURE__*/_jsx(GridChartsPanelDataFieldList, {
+              ownerState: rootProps,
+              className: classes.fieldList,
+              children: values.map(value => /*#__PURE__*/_jsx(GridChartsPanelDataField, {
+                field: value.field,
+                selected: value.hidden !== true,
+                onChange: handleChange,
+                section: "values",
+                blockedSections: blockedSectionsLookup.get(value.field),
+                dimensionsLabel: dimensionsLabel,
+                valuesLabel: valuesLabel,
+                disabled: disabledSections.has('values'),
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd,
+                children: apiRef.current.chartsIntegration.getColumnName(value.field)
+              }, value.field))
+            })]
+          })]
+        })]
+      })]
+    })]
+  });
+}
+export { GridChartsPanelDataBody };

package/esm/components/chartsPanel/data/GridChartsPanelDataField.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { FieldTransferObject } from "./GridChartsPanelDataBody.js";
+import type { GridChartsIntegrationSection } from "../../../hooks/features/chartsIntegration/gridChartsIntegrationInterfaces.js";
+type GridChartsPanelDataFieldProps = {
+  children: React.ReactNode;
+  field: string;
+  section: GridChartsIntegrationSection;
+  blockedSections?: string[];
+  dimensionsLabel: string;
+  valuesLabel: string;
+  disabled?: boolean;
+  selected?: boolean;
+  onChange?: (field: string, section: GridChartsIntegrationSection) => void;
+  onDragStart: (field: string, section: GridChartsIntegrationSection) => void;
+  onDragEnd: () => void;
+};
+export declare function AggregationSelect({
+  aggFunc,
+  field
+}: {
+  aggFunc: string;
+  field: FieldTransferObject['field'];
+}): React.JSX.Element | null;
+declare function GridChartsPanelDataField(props: GridChartsPanelDataFieldProps): React.JSX.Element;
+export { GridChartsPanelDataField };