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

package/components/chartsPanel/GridChartsPanel.js

@@ -0,0 +1,243 @@
+"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.GridChartsPanel = GridChartsPanel;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _system = require("@mui/system");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _GridChartsPanelChart = require("./chart/GridChartsPanelChart");
+var _GridChartsPanelCustomize = require("./customize/GridChartsPanelCustomize");
+var _gridChartsIntegrationSelectors = require("../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors");
+var _useGridChartIntegration = require("../../hooks/utils/useGridChartIntegration");
+var _GridChartsPanelData = require("./data/GridChartsPanelData");
+var _jsxRuntime = require("react/jsx-runtime");
+const GridChartsPanelHeader = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelHeader'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: _internals.vars.spacing(0.25),
+  padding: _internals.vars.spacing(1, 0.5, 0, 0.75),
+  boxSizing: 'border-box'
+});
+const GridChartsPanelTitle = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelTitle'
+})({
+  font: _internals.vars.typography.font.large,
+  fontWeight: _internals.vars.typography.fontWeight.medium,
+  marginLeft: _internals.vars.spacing(0.5),
+  marginRight: 'auto'
+});
+const GridChartsPanelChartSelection = (0, _system.styled)('button', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelChartSelection'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: _internals.vars.spacing(0.25),
+  padding: _internals.vars.spacing(0.75, 0.5),
+  borderRadius: _internals.vars.radius.base,
+  font: _internals.vars.typography.font.large,
+  fontWeight: _internals.vars.typography.fontWeight.medium,
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  outline: 'none',
+  marginRight: 'auto',
+  '&:hover, &:focus-visible': {
+    backgroundColor: _internals.vars.colors.interactive.hover
+  }
+});
+function GridChartsPanelChartSelector(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    activeChartId,
+    chartEntries
+  } = props;
+  const triggerRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const menuId = (0, _useId.default)();
+  const triggerId = (0, _useId.default)();
+  const activeChart = chartEntries.find(([chartId]) => chartId === activeChartId);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(rootProps.slots.promptChangesToggleIcon, {
+        fontSize: "small"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridMenu, {
+      open: open,
+      target: triggerRef.current,
+      onClose: () => setOpen(false),
+      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: chartEntries.map(([chartId, chartState]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
+          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.default.string.isRequired,
+  chartEntries: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
+    configuration: _propTypes.default.object.isRequired,
+    dimensions: _propTypes.default.arrayOf(_propTypes.default.shape({
+      data: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])).isRequired,
+      id: _propTypes.default.string.isRequired,
+      label: _propTypes.default.string.isRequired
+    })).isRequired,
+    dimensionsLabel: _propTypes.default.string,
+    label: _propTypes.default.string,
+    maxDimensions: _propTypes.default.number,
+    maxValues: _propTypes.default.number,
+    synced: _propTypes.default.bool.isRequired,
+    type: _propTypes.default.string.isRequired,
+    values: _propTypes.default.arrayOf(_propTypes.default.shape({
+      data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      id: _propTypes.default.string.isRequired,
+      label: _propTypes.default.string.isRequired
+    })).isRequired,
+    valuesLabel: _propTypes.default.string
+  }), _propTypes.default.string]).isRequired)).isRequired
+} : void 0;
+function GridChartsPanel(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    schema = {}
+  } = props;
+  const activeChartId = (0, _internals.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsIntegrationActiveChartIdSelector);
+  const {
+    chartStateLookup
+  } = (0, _useGridChartIntegration.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__*/(0, _jsxRuntime.jsx)(_GridChartsPanelChart.GridChartsPanelChart, {
+      schema: schema,
+      selectedChartType: chartStateLookup[activeChartId]?.type,
+      onChartTypeChange: handleChartTypeChange
+    })
+  }, {
+    value: 'data',
+    label: apiRef.current.getLocaleText('chartsTabFields'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelData.GridChartsPanelData, {})
+  }, {
+    value: 'customize',
+    label: apiRef.current.getLocaleText('chartsTabCustomize'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelCustomize.GridChartsPanelCustomize, {
+      activeChartId: activeChartId,
+      sections: currentChartConfiguration.customization || []
+    })
+  }], [apiRef, activeChartId, chartStateLookup, handleChartTypeChange, schema, currentChartConfiguration]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelHeader, {
+      ownerState: rootProps,
+      children: [chartEntries.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelChartSelector, {
+        activeChartId: activeChartId,
+        chartEntries: chartEntries
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelTitle, {
+        ownerState: rootProps,
+        children: "Charts"
+      }), chartEntries.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: rootProps.localeText.chartsSyncButtonLabel,
+        children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsSyncIcon, {
+            fontSize: "small"
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsSyncDisabledIcon, {
+            fontSize: "small"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+        onClick: () => {
+          apiRef.current.setChartsPanelOpen(false);
+        },
+        "aria-label": apiRef.current.getLocaleText('chartsCloseButton')
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.sidebarCloseIcon, {
+          fontSize: "small"
+        })
+      }))]
+    }), chartEntries.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTabs, (0, _extends2.default)({
+      items: tabItems,
+      value: activeTab,
+      onChange: (_event, value) => {
+        setActiveTab(value);
+      }
+    }, rootProps.slotProps?.baseTabs)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.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.default.func,
+  /**
+   * The schema of the charts configuration.
+   * @type {GridChartsConfigurationOptions}
+   * @default {}
+   */
+  schema: _propTypes.default.object
+} : void 0;

package/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/components/chartsPanel/chart/GridChartsPanelChart.js

@@ -0,0 +1,111 @@
+"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.GridChartsPanelChart = GridChartsPanelChart;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _system = require("@mui/system");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['chartsManagement'],
+    chartTypeRoot: ['chartTypeRoot'],
+    button: ['chartTypeSelectorButton']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const GridChartsManagementRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsManagement'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  height: '100%'
+});
+const GridChartTypeRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartTypeRoot'
+})({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr 1fr',
+  gap: _internals.vars.spacing(1),
+  padding: _internals.vars.spacing(1)
+});
+const GridChartTypeButton = (0, _system.styled)('button', {
+  name: 'MuiDataGrid',
+  slot: 'ChartTypeSelectorButton',
+  shouldForwardProp: prop => prop !== 'isSelected'
+})(({
+  isSelected
+}) => {
+  return {
+    backgroundColor: isSelected ? `color-mix(in srgb, ${_internals.vars.colors.interactive.selected} calc(${_internals.vars.colors.interactive.selectedOpacity} * 100%), ${_internals.vars.colors.background.base})` : _internals.vars.colors.background.base,
+    color: isSelected ? _internals.vars.colors.interactive.selected : _internals.vars.colors.foreground.muted,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: _internals.vars.spacing(0.5),
+    padding: _internals.vars.spacing(1.5, 1, 1),
+    border: `1px solid ${isSelected ? _internals.vars.colors.interactive.selected : _internals.vars.colors.border.base}`,
+    font: _internals.vars.typography.font.small,
+    fontWeight: _internals.vars.typography.fontWeight.medium,
+    borderRadius: _internals.vars.radius.base,
+    transition: _internals.vars.transition(['border-color', 'background-color', 'color'], {
+      duration: _internals.vars.transitions.duration.short,
+      easing: _internals.vars.transitions.easing.easeInOut
+    }),
+    '&:hover': {
+      backgroundColor: isSelected ? `color-mix(in srgb, ${_internals.vars.colors.interactive.selected} calc(${_internals.vars.colors.interactive.selectedOpacity} * 100%), ${_internals.vars.colors.background.base})` : _internals.vars.colors.interactive.hover
+    }
+  };
+});
+function GridChartsPanelChart(props) {
+  const {
+    schema,
+    selectedChartType,
+    onChartTypeChange
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsManagementRoot, {
+    ownerState: rootProps,
+    className: classes.root,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartTypeRoot, {
+      className: classes.chartTypeRoot,
+      children: Object.entries(schema).map(([type, config]) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartTypeButton, (0, _extends2.default)({
+        className: classes.button,
+        isSelected: type === selectedChartType,
+        onClick: () => onChartTypeChange(type)
+      }, rootProps.slotProps?.baseButton, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.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.default.object
+} : void 0;

package/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 {};

package/components/chartsPanel/customize/GridChartsPanelCustomize.js

@@ -0,0 +1,147 @@
+"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.GridChartsPanelCustomize = GridChartsPanelCustomize;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _system = require("@mui/system");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _useGridChartIntegration = require("../../../hooks/utils/useGridChartIntegration");
+var _Collapsible = require("../../collapsible/Collapsible");
+var _CollapsibleTrigger = require("../../collapsible/CollapsibleTrigger");
+var _CollapsiblePanel = require("../../collapsible/CollapsiblePanel");
+var _useGridChartsIntegration = require("../../../hooks/features/chartsIntegration/useGridChartsIntegration");
+var _jsxRuntime = require("react/jsx-runtime");
+const GridChartsPanelCustomizeRoot = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea)({
+  height: '100%'
+});
+const GridChartsPanelCustomizeSection = (0, _system.styled)(_Collapsible.Collapsible, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelCustomizeSection'
+})({
+  margin: _internals.vars.spacing(0.5, 1)
+});
+const GridChartsPanelCustomizePanel = (0, _system.styled)(_CollapsiblePanel.CollapsiblePanel, {
+  name: 'MuiDataGrid',
+  slot: 'chartsPanelSection'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: _internals.vars.spacing(2, 1.5),
+  gap: _internals.vars.spacing(3)
+});
+const GridChartsPanelCustomizePanelTitle = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelCustomizePanelTitle'
+})({
+  font: _internals.vars.typography.font.body,
+  fontWeight: _internals.vars.typography.fontWeight.medium
+});
+function GridChartsPanelCustomize(props) {
+  const {
+    activeChartId,
+    sections
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    chartStateLookup,
+    setChartState
+  } = (0, _useGridChartIntegration.useGridChartsIntegrationContext)();
+  const {
+    type: chartType,
+    configuration,
+    dimensions,
+    values
+  } = chartStateLookup[activeChartId] ?? _useGridChartsIntegration.EMPTY_CHART_INTEGRATION_CONTEXT_STATE;
+  const handleChange = (field, value) => {
+    setChartState(activeChartId, (0, _extends2.default)({}, configuration, {
+      configuration: (0, _extends2.default)({}, configuration, {
+        [field]: value
+      })
+    }));
+  };
+  if (chartType === '') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridOverlay, {
+      children: apiRef.current.getLocaleText('chartsChartNotSelected')
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelCustomizeRoot, {
+    children: sections.map((section, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelCustomizeSection, {
+      initiallyOpen: index === 0,
+      ownerState: rootProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleTrigger.CollapsibleTrigger, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelCustomizePanelTitle, {
+          ownerState: rootProps,
+          children: section.label
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSwitch, (0, _extends2.default)({
+              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__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
+              fullWidth: true,
+              size: "small",
+              label: opt.label,
+              value: configuration[key] ?? opt.default,
+              onChange: event => handleChange(key, event.target.value),
+              disabled: isDisabled,
+              slotProps: {
+                htmlInput: (0, _extends2.default)({}, opt.htmlAttributes)
+              }
+            }, rootProps.slotProps?.baseSelect, {
+              children: (opt.options || []).map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, {
+                value: option.value,
+                native: false,
+                children: option.content
+              }, option.value))
+            }), key);
+          }
+          // string or number
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+            "aria-label": opt.label,
+            placeholder: opt.label,
+            label: opt.label,
+            type: opt.type === 'number' ? 'number' : 'text',
+            size: "small",
+            fullWidth: true,
+            disabled: isDisabled,
+            slotProps: {
+              htmlInput: (0, _extends2.default)({}, 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/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/components/chartsPanel/data/GridChartsPanelData.js

@@ -0,0 +1,23 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridChartsPanelData = GridChartsPanelData;
+var React = _interopRequireWildcard(require("react"));
+var _GridChartsPanelDataBody = require("./GridChartsPanelDataBody");
+var _GridChartsPanelDataHeader = require("./GridChartsPanelDataHeader");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridChartsPanelData() {
+  const [searchValue, setSearchValue] = React.useState('');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelDataHeader.GridChartsPanelDataHeader, {
+      searchValue: searchValue,
+      onSearchValueChange: setSearchValue
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelDataBody.GridChartsPanelDataBody, {
+      searchValue: searchValue
+    })]
+  });
+}

package/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 };