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

package/esm/components/GridPremiumColumnMenu.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridGenericColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from '@mui/x-data-grid-pro';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { GridColumnMenuAggregationItem } from "./GridColumnMenuAggregationItem.js";
+import { GridColumnMenuAggregationItem } from "./columnMenu/menuItems/GridColumnMenuAggregationItem.js";
 import { isGroupingColumn } from "../hooks/features/rowGrouping/index.js";
-import { GridColumnMenuRowGroupItem } from "./GridColumnMenuRowGroupItem.js";
-import { GridColumnMenuRowUngroupItem } from "./GridColumnMenuRowUngroupItem.js";
-import { GridColumnMenuPivotItem } from "./GridColumnMenuPivotItem.js";
+import { GridColumnMenuRowGroupItem } from "./columnMenu/menuItems/GridColumnMenuRowGroupItem.js";
+import { GridColumnMenuRowUngroupItem } from "./columnMenu/menuItems/GridColumnMenuRowUngroupItem.js";
+import { GridColumnMenuManagePanelItem } from "./columnMenu/menuItems/GridColumnMenuManagePanelItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuGroupingItem(props) {
   const {
@@ -20,7 +20,7 @@ export function GridColumnMenuGroupingItem(props) {
 export const GRID_COLUMN_MENU_SLOTS_PREMIUM = _extends({}, GRID_COLUMN_MENU_SLOTS, {
   columnMenuAggregationItem: GridColumnMenuAggregationItem,
   columnMenuGroupingItem: GridColumnMenuGroupingItem,
-  columnMenuPivotItem: GridColumnMenuPivotItem
+  columnMenuManagePanelItem: GridColumnMenuManagePanelItem
 });
 export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = _extends({}, GRID_COLUMN_MENU_SLOT_PROPS, {
   columnMenuAggregationItem: {
@@ -29,7 +29,7 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = _extends({}, GRID_COLUMN_MENU
   columnMenuGroupingItem: {
     displayOrder: 27
   },
-  columnMenuPivotItem: {
+  columnMenuManagePanelItem: {
     displayOrder: 28
   }
 });

package/esm/components/GridPremiumToolbar.js

@@ -10,6 +10,7 @@ import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { PivotPanelTrigger } from "./pivotPanel/PivotPanelTrigger.js";
 import { isPivotingAvailable } from "../hooks/features/pivoting/utils.js";
 import { AiAssistantPanelTrigger } from "./aiAssistantPanel/index.js";
+import { ChartsPanelTrigger } from "./chartsPanel/ChartsPanelTrigger.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridPremiumToolbar(props) {
   const rootProps = useGridRootProps();
@@ -26,6 +27,16 @@ export function GridPremiumToolbar(props) {
           })
         }))
       })
+    }), rootProps.experimentalFeatures?.charts && rootProps.chartsIntegration && /*#__PURE__*/_jsx(ChartsPanelTrigger, {
+      render: triggerProps => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarCharts'),
+        children: /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
+          color: "default",
+          children: /*#__PURE__*/_jsx(rootProps.slots.chartsIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
     }), rootProps.aiAssistant && /*#__PURE__*/_jsx(AiAssistantPanelTrigger, {
       render: triggerProps => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarAssistant'),

package/esm/components/chartsIntegration/GridChartsIntegrationContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridChartsIntegrationContext: React.Context<unknown>;

package/esm/components/chartsIntegration/GridChartsIntegrationContext.js

@@ -0,0 +1,5 @@
+'use client';
+
+import * as React from 'react';
+export const GridChartsIntegrationContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") GridChartsIntegrationContext.displayName = "GridChartsIntegrationContext";

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-data-grid-pro/internals';
+import { GridSlotProps } from '@mui/x-data-grid-pro';
+export interface ChartsPanelState {
+  /**
+   * If `true`, the charts integration panel is open.
+   */
+  open: boolean;
+}
+export type ChartsPanelTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], ChartsPanelState>;
+  /**
+   * A function to customize rendering of the component.
+   */
+  className?: string | ((state: ChartsPanelState) => string);
+};
+/**
+ * A button that opens and closes the charts integration panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Charts Panel](https://mui.com/x/react-data-grid/components/charts-panel/)
+ *
+ * API:
+ *
+ * - [ChartsPanelTrigger API](https://mui.com/x/api/data-grid/charts-panel-trigger/)
+ */
+declare const ChartsPanelTrigger: React.ForwardRefExoticComponent<ChartsPanelTriggerProps> | React.ForwardRefExoticComponent<Omit<ChartsPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsPanelTrigger };

package/esm/components/chartsPanel/ChartsPanelTrigger.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className", "onClick", "onPointerUp"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useId from '@mui/utils/useId';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useGridSelector } from '@mui/x-data-grid-pro';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridChartsPanelOpenSelector } from "../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that opens and closes the charts integration panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Charts Panel](https://mui.com/x/react-data-grid/components/charts-panel/)
+ *
+ * API:
+ *
+ * - [ChartsPanelTrigger API](https://mui.com/x/api/data-grid/charts-panel-trigger/)
+ */
+const ChartsPanelTrigger = forwardRef(function ChartsPanelTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const buttonId = useId();
+  const panelId = useId();
+  const apiRef = useGridApiContext();
+  const open = useGridSelector(apiRef, gridChartsPanelOpenSelector);
+  const state = {
+    open
+  };
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleClick = event => {
+    apiRef.current.setChartsPanelOpen(!open);
+    onClick?.(event);
+  };
+  const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+    id: buttonId,
+    // TODO: Hook up the panel/trigger IDs to the charts configuration panel
+    'aria-haspopup': 'true',
+    'aria-expanded': open ? 'true' : undefined,
+    'aria-controls': open ? panelId : undefined,
+    onClick: handleClick,
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsPanelTrigger.displayName = "ChartsPanelTrigger";
+process.env.NODE_ENV !== "production" ? ChartsPanelTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A function to customize rendering of the component.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  role: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  startIcon: PropTypes.node,
+  style: PropTypes.object,
+  tabIndex: PropTypes.number,
+  title: PropTypes.string,
+  touchRippleRef: PropTypes.any
+} : void 0;
+export { ChartsPanelTrigger };

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { GridChartsConfigurationOptions } from '@mui/x-internals/types';
+export interface GridChartsPanelProps {
+  /**
+   * The schema of the charts configuration.
+   * @type {GridChartsConfigurationOptions}
+   * @default {}
+   */
+  schema?: GridChartsConfigurationOptions;
+  /**
+   * Override the default column name generation logic. Use field in combination with the grid state to determine the name of the column that will be shown to the user.
+   * @param {string} field The field name
+   * @returns {string | undefined} The name of the column or undefined if the column name should be determined by the grid
+   */
+  getColumnName?: (field: string) => string | undefined;
+}
+declare function GridChartsPanel(props: GridChartsPanelProps): React.JSX.Element;
+declare namespace GridChartsPanel {
+  var propTypes: any;
+}
+export { GridChartsPanel };

package/esm/components/chartsPanel/GridChartsPanel.js

@@ -0,0 +1,237 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/system';
+import useId from '@mui/utils/useId';
+import { useGridSelector, vars } from '@mui/x-data-grid-pro/internals';
+import { GridMenu, GridOverlay } from '@mui/x-data-grid-pro';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { GridChartsPanelChart } from "./chart/GridChartsPanelChart.js";
+import { GridChartsPanelCustomize } from "./customize/GridChartsPanelCustomize.js";
+import { gridChartsIntegrationActiveChartIdSelector } from "../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js";
+import { useGridChartsIntegrationContext } from "../../hooks/utils/useGridChartIntegration.js";
+import { GridChartsPanelData } from "./data/GridChartsPanelData.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const GridChartsPanelHeader = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelHeader'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing(0.25),
+  padding: vars.spacing(1, 0.5, 0, 0.75),
+  boxSizing: 'border-box'
+});
+const GridChartsPanelTitle = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelTitle'
+})({
+  font: vars.typography.font.large,
+  fontWeight: vars.typography.fontWeight.medium,
+  marginLeft: vars.spacing(0.5),
+  marginRight: 'auto'
+});
+const GridChartsPanelChartSelection = styled('button', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelChartSelection'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing(0.25),
+  padding: vars.spacing(0.75, 0.5),
+  borderRadius: vars.radius.base,
+  font: vars.typography.font.large,
+  fontWeight: vars.typography.fontWeight.medium,
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  outline: 'none',
+  marginRight: 'auto',
+  '&:hover, &:focus-visible': {
+    backgroundColor: vars.colors.interactive.hover
+  }
+});
+function GridChartsPanelChartSelector(props) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const {
+    activeChartId,
+    chartEntries
+  } = props;
+  const triggerRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const menuId = useId();
+  const triggerId = useId();
+  const activeChart = chartEntries.find(([chartId]) => chartId === activeChartId);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs(GridChartsPanelChartSelection, {
+      id: triggerId,
+      "aria-haspopup": "true",
+      "aria-controls": open ? menuId : undefined,
+      "aria-expanded": open ? 'true' : undefined,
+      ownerState: rootProps,
+      onClick: () => setOpen(!open),
+      ref: triggerRef,
+      children: [activeChart?.[1]?.label, /*#__PURE__*/_jsx(rootProps.slots.promptChangesToggleIcon, {
+        fontSize: "small"
+      })]
+    }), /*#__PURE__*/_jsx(GridMenu, {
+      open: open,
+      target: triggerRef.current,
+      onClose: () => setOpen(false),
+      position: "bottom-start",
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, _extends({
+        id: menuId,
+        "aria-labelledby": triggerId,
+        autoFocusItem: true
+      }, rootProps.slotProps?.baseMenuList, {
+        children: chartEntries.map(([chartId, chartState]) => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
+          value: chartId,
+          onClick: () => {
+            apiRef.current.setActiveChartId(chartId);
+            setOpen(false);
+          },
+          selected: chartId === activeChartId
+        }, rootProps.slotProps?.baseMenuItem, {
+          children: chartState.label || chartId
+        }), chartId))
+      }))
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridChartsPanelChartSelector.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  activeChartId: PropTypes.string.isRequired,
+  chartEntries: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+    configuration: PropTypes.object.isRequired,
+    dimensions: PropTypes.arrayOf(PropTypes.shape({
+      data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
+      id: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired
+    })).isRequired,
+    dimensionsLabel: PropTypes.string,
+    label: PropTypes.string,
+    maxDimensions: PropTypes.number,
+    maxValues: PropTypes.number,
+    synced: PropTypes.bool.isRequired,
+    type: PropTypes.string.isRequired,
+    values: PropTypes.arrayOf(PropTypes.shape({
+      data: PropTypes.arrayOf(PropTypes.number).isRequired,
+      id: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired
+    })).isRequired,
+    valuesLabel: PropTypes.string
+  }), PropTypes.string]).isRequired)).isRequired
+} : void 0;
+function GridChartsPanel(props) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const {
+    schema = {}
+  } = props;
+  const activeChartId = useGridSelector(apiRef, gridChartsIntegrationActiveChartIdSelector);
+  const {
+    chartStateLookup
+  } = useGridChartsIntegrationContext();
+  const [activeTab, setActiveTab] = React.useState('chart');
+  const chartEntries = React.useMemo(() => Object.entries(chartStateLookup), [chartStateLookup]);
+  const activeChartType = React.useMemo(() => chartStateLookup[activeChartId]?.type || '', [chartStateLookup, activeChartId]);
+  const currentChartConfiguration = React.useMemo(() => {
+    return schema[activeChartType] || {};
+  }, [schema, activeChartType]);
+  const handleChartSyncChange = React.useCallback(newSyncState => {
+    apiRef.current.setChartSynchronizationState(activeChartId, newSyncState);
+  }, [apiRef, activeChartId]);
+  const handleChartTypeChange = React.useCallback(type => {
+    apiRef.current.setChartType(activeChartId, type);
+  }, [apiRef, activeChartId]);
+  const tabItems = React.useMemo(() => [{
+    value: 'chart',
+    label: apiRef.current.getLocaleText('chartsTabChart'),
+    children: /*#__PURE__*/_jsx(GridChartsPanelChart, {
+      schema: schema,
+      selectedChartType: chartStateLookup[activeChartId]?.type,
+      onChartTypeChange: handleChartTypeChange
+    })
+  }, {
+    value: 'data',
+    label: apiRef.current.getLocaleText('chartsTabFields'),
+    children: /*#__PURE__*/_jsx(GridChartsPanelData, {})
+  }, {
+    value: 'customize',
+    label: apiRef.current.getLocaleText('chartsTabCustomize'),
+    children: /*#__PURE__*/_jsx(GridChartsPanelCustomize, {
+      activeChartId: activeChartId,
+      sections: currentChartConfiguration.customization || []
+    })
+  }], [apiRef, activeChartId, chartStateLookup, handleChartTypeChange, schema, currentChartConfiguration]);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs(GridChartsPanelHeader, {
+      ownerState: rootProps,
+      children: [chartEntries.length > 1 ? /*#__PURE__*/_jsx(GridChartsPanelChartSelector, {
+        activeChartId: activeChartId,
+        chartEntries: chartEntries
+      }) : /*#__PURE__*/_jsx(GridChartsPanelTitle, {
+        ownerState: rootProps,
+        children: "Charts"
+      }), chartEntries.length > 0 && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: rootProps.localeText.chartsSyncButtonLabel,
+        children: /*#__PURE__*/_jsx(rootProps.slots.baseToggleButton, {
+          value: "sync",
+          "aria-label": rootProps.localeText.chartsSyncButtonLabel,
+          selected: chartStateLookup[activeChartId]?.synced,
+          onClick: () => {
+            handleChartSyncChange(!chartStateLookup[activeChartId]?.synced);
+          },
+          children: chartStateLookup[activeChartId]?.synced ? /*#__PURE__*/_jsx(rootProps.slots.chartsSyncIcon, {
+            fontSize: "small"
+          }) : /*#__PURE__*/_jsx(rootProps.slots.chartsSyncDisabledIcon, {
+            fontSize: "small"
+          })
+        })
+      }), /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        onClick: () => {
+          apiRef.current.setChartsPanelOpen(false);
+        },
+        "aria-label": apiRef.current.getLocaleText('chartsCloseButton')
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.sidebarCloseIcon, {
+          fontSize: "small"
+        })
+      }))]
+    }), chartEntries.length > 0 ? /*#__PURE__*/_jsx(rootProps.slots.baseTabs, _extends({
+      items: tabItems,
+      value: activeTab,
+      onChange: (_event, value) => {
+        setActiveTab(value);
+      }
+    }, rootProps.slotProps?.baseTabs)) : /*#__PURE__*/_jsx(GridOverlay, {
+      children: apiRef.current.getLocaleText('chartsNoCharts')
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridChartsPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override the default column name generation logic. Use field in combination with the grid state to determine the name of the column that will be shown to the user.
+   * @param {string} field The field name
+   * @returns {string | undefined} The name of the column or undefined if the column name should be determined by the grid
+   */
+  getColumnName: PropTypes.func,
+  /**
+   * The schema of the charts configuration.
+   * @type {GridChartsConfigurationOptions}
+   * @default {}
+   */
+  schema: PropTypes.object
+} : void 0;
+export { GridChartsPanel };

package/esm/components/chartsPanel/chart/GridChartsPanelChart.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { GridChartsConfigurationOptions } from '@mui/x-internals/types';
+export interface GridChartsPanelChartProps {
+  schema: GridChartsConfigurationOptions;
+  selectedChartType: string;
+  onChartTypeChange: (type: string) => void;
+}
+declare function GridChartsPanelChart(props: GridChartsPanelChartProps): React.JSX.Element;
+declare namespace GridChartsPanelChart {
+  var propTypes: any;
+}
+export { GridChartsPanelChart };

package/esm/components/chartsPanel/chart/GridChartsPanelChart.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { vars } from '@mui/x-data-grid-pro/internals';
+import composeClasses from '@mui/utils/composeClasses';
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['chartsManagement'],
+    chartTypeRoot: ['chartTypeRoot'],
+    button: ['chartTypeSelectorButton']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridChartsManagementRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsManagement'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  height: '100%'
+});
+const GridChartTypeRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartTypeRoot'
+})({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr 1fr',
+  gap: vars.spacing(1),
+  padding: vars.spacing(1)
+});
+const GridChartTypeButton = styled('button', {
+  name: 'MuiDataGrid',
+  slot: 'ChartTypeSelectorButton',
+  shouldForwardProp: prop => prop !== 'isSelected'
+})(({
+  isSelected
+}) => {
+  return {
+    backgroundColor: isSelected ? `color-mix(in srgb, ${vars.colors.interactive.selected} calc(${vars.colors.interactive.selectedOpacity} * 100%), ${vars.colors.background.base})` : vars.colors.background.base,
+    color: isSelected ? vars.colors.interactive.selected : vars.colors.foreground.muted,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: vars.spacing(0.5),
+    padding: vars.spacing(1.5, 1, 1),
+    border: `1px solid ${isSelected ? vars.colors.interactive.selected : vars.colors.border.base}`,
+    font: vars.typography.font.small,
+    fontWeight: vars.typography.fontWeight.medium,
+    borderRadius: vars.radius.base,
+    transition: vars.transition(['border-color', 'background-color', 'color'], {
+      duration: vars.transitions.duration.short,
+      easing: vars.transitions.easing.easeInOut
+    }),
+    '&:hover': {
+      backgroundColor: isSelected ? `color-mix(in srgb, ${vars.colors.interactive.selected} calc(${vars.colors.interactive.selectedOpacity} * 100%), ${vars.colors.background.base})` : vars.colors.interactive.hover
+    }
+  };
+});
+function GridChartsPanelChart(props) {
+  const {
+    schema,
+    selectedChartType,
+    onChartTypeChange
+  } = props;
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridChartsManagementRoot, {
+    ownerState: rootProps,
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(GridChartTypeRoot, {
+      className: classes.chartTypeRoot,
+      children: Object.entries(schema).map(([type, config]) => /*#__PURE__*/_jsxs(GridChartTypeButton, _extends({
+        className: classes.button,
+        isSelected: type === selectedChartType,
+        onClick: () => onChartTypeChange(type)
+      }, rootProps.slotProps?.baseButton, {
+        children: [/*#__PURE__*/_jsx(config.icon, {
+          style: {
+            width: 32,
+            height: 32
+          }
+        }), config.label]
+      }), type))
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? GridChartsPanelChart.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  schema: PropTypes.object
+} : void 0;
+export { GridChartsPanelChart };

package/esm/components/chartsPanel/customize/GridChartsPanelCustomize.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { GridChartsConfigurationSection } from '@mui/x-internals/types';
+interface GridChartsPanelCustomizeProps {
+  activeChartId: string;
+  sections: GridChartsConfigurationSection[];
+}
+export declare function GridChartsPanelCustomize(props: GridChartsPanelCustomizeProps): React.JSX.Element;
+export {};