@mui/x-data-grid-premium 8.0.0-alpha.6 → 8.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/CHANGELOG.md +127 -1
  2. package/DataGridPremium/DataGridPremium.js +2 -1
  3. package/DataGridPremium/useDataGridPremiumComponent.d.ts +1 -1
  4. package/DataGridPremium/useDataGridPremiumComponent.js +2 -1
  5. package/DataGridPremium/useDataGridPremiumProps.js +3 -1
  6. package/components/GridColumnMenuAggregationItem.js +53 -20
  7. package/esm/DataGridPremium/DataGridPremium.js +2 -1
  8. package/esm/DataGridPremium/useDataGridPremiumComponent.js +3 -2
  9. package/esm/DataGridPremium/useDataGridPremiumProps.js +3 -1
  10. package/esm/components/GridColumnMenuAggregationItem.js +51 -18
  11. package/esm/hooks/features/aggregation/createAggregationLookup.js +52 -55
  12. package/esm/hooks/features/aggregation/gridAggregationUtils.js +17 -13
  13. package/esm/hooks/features/aggregation/index.js +0 -1
  14. package/esm/hooks/features/aggregation/useGridAggregation.js +22 -10
  15. package/esm/hooks/features/aggregation/useGridAggregationPreProcessors.js +7 -14
  16. package/esm/hooks/features/cellSelection/useGridCellSelection.js +3 -3
  17. package/esm/hooks/features/dataSource/cache.js +3 -0
  18. package/esm/hooks/features/dataSource/models.js +1 -0
  19. package/esm/hooks/features/dataSource/useGridDataSourcePremium.js +53 -0
  20. package/esm/utils/releaseInfo.js +1 -1
  21. package/hooks/features/aggregation/createAggregationLookup.d.ts +6 -5
  22. package/hooks/features/aggregation/createAggregationLookup.js +52 -55
  23. package/hooks/features/aggregation/gridAggregationInterfaces.d.ts +18 -5
  24. package/hooks/features/aggregation/gridAggregationUtils.d.ts +9 -10
  25. package/hooks/features/aggregation/gridAggregationUtils.js +17 -13
  26. package/hooks/features/aggregation/index.d.ts +1 -1
  27. package/hooks/features/aggregation/index.js +0 -12
  28. package/hooks/features/aggregation/useGridAggregation.d.ts +1 -1
  29. package/hooks/features/aggregation/useGridAggregation.js +22 -10
  30. package/hooks/features/aggregation/useGridAggregationPreProcessors.d.ts +1 -1
  31. package/hooks/features/aggregation/useGridAggregationPreProcessors.js +7 -14
  32. package/hooks/features/cellSelection/useGridCellSelection.d.ts +1 -1
  33. package/hooks/features/cellSelection/useGridCellSelection.js +3 -3
  34. package/hooks/features/dataSource/cache.d.ts +2 -0
  35. package/hooks/features/dataSource/cache.js +9 -0
  36. package/hooks/features/dataSource/models.d.ts +47 -0
  37. package/hooks/features/dataSource/models.js +5 -0
  38. package/hooks/features/dataSource/useGridDataSourcePremium.d.ts +4 -0
  39. package/hooks/features/dataSource/useGridDataSourcePremium.js +62 -0
  40. package/hooks/utils/useGridApiRef.d.ts +1 -1
  41. package/index.d.ts +2 -0
  42. package/index.js +1 -1
  43. package/models/dataGridPremiumProps.d.ts +6 -4
  44. package/models/gridApiPremium.d.ts +5 -3
  45. package/modern/DataGridPremium/DataGridPremium.js +2 -1
  46. package/modern/DataGridPremium/useDataGridPremiumComponent.js +3 -2
  47. package/modern/DataGridPremium/useDataGridPremiumProps.js +3 -1
  48. package/modern/components/GridColumnMenuAggregationItem.js +51 -18
  49. package/modern/hooks/features/aggregation/createAggregationLookup.js +52 -55
  50. package/modern/hooks/features/aggregation/gridAggregationUtils.js +17 -13
  51. package/modern/hooks/features/aggregation/index.js +0 -1
  52. package/modern/hooks/features/aggregation/useGridAggregation.js +22 -10
  53. package/modern/hooks/features/aggregation/useGridAggregationPreProcessors.js +7 -14
  54. package/modern/hooks/features/cellSelection/useGridCellSelection.js +3 -3
  55. package/modern/hooks/features/dataSource/cache.js +3 -0
  56. package/modern/hooks/features/dataSource/models.js +1 -0
  57. package/modern/hooks/features/dataSource/useGridDataSourcePremium.js +53 -0
  58. package/modern/index.js +1 -1
  59. package/modern/utils/releaseInfo.js +1 -1
  60. package/package.json +5 -5
  61. package/utils/releaseInfo.js +1 -1
@@ -1,27 +1,26 @@
1
1
  import * as React from 'react';
2
2
  import { GridColDef, GridRowId } from '@mui/x-data-grid-pro';
3
3
  import { GridColumnRawLookup, GridHydrateRowsValue } from '@mui/x-data-grid-pro/internals';
4
- import { GridAggregationFunction, GridAggregationModel, GridAggregationRule, GridAggregationRules } from './gridAggregationInterfaces';
4
+ import { GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationModel, GridAggregationRule, GridAggregationRules } from './gridAggregationInterfaces';
5
5
  import { GridStatePremium } from '../../../models/gridStatePremium';
6
6
  import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
7
7
  import { GridApiPremium, GridPrivateApiPremium } from '../../../models/gridApiPremium';
8
8
  export declare const GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = "auto-generated-group-footer-root";
9
9
  export declare const getAggregationFooterRowIdFromGroupId: (groupId: GridRowId | null) => string;
10
- export declare const canColumnHaveAggregationFunction: ({ colDef, aggregationFunctionName, aggregationFunction, }: {
10
+ type AggregationFunction = GridAggregationFunction | GridAggregationFunctionDataSource | undefined;
11
+ export declare const canColumnHaveAggregationFunction: ({ colDef, aggregationFunctionName, aggregationFunction, isDataSource, }: {
11
12
  colDef: GridColDef | undefined;
12
13
  aggregationFunctionName: string;
13
- aggregationFunction: GridAggregationFunction | undefined;
14
+ aggregationFunction: AggregationFunction;
15
+ isDataSource: boolean;
14
16
  }) => boolean;
15
- export declare const getAvailableAggregationFunctions: ({ aggregationFunctions, colDef, }: {
16
- aggregationFunctions: Record<string, GridAggregationFunction>;
17
+ export declare const getAvailableAggregationFunctions: ({ aggregationFunctions, colDef, isDataSource, }: {
18
+ aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>;
17
19
  colDef: GridColDef;
20
+ isDataSource: boolean;
18
21
  }) => string[];
19
22
  export declare const mergeStateWithAggregationModel: (aggregationModel: GridAggregationModel) => (state: GridStatePremium) => GridStatePremium;
20
- export declare const getAggregationRules: ({ columnsLookup, aggregationModel, aggregationFunctions, }: {
21
- columnsLookup: GridColumnRawLookup;
22
- aggregationModel: GridAggregationModel;
23
- aggregationFunctions: Record<string, GridAggregationFunction>;
24
- }) => GridAggregationRules;
23
+ export declare const getAggregationRules: (columnsLookup: GridColumnRawLookup, aggregationModel: GridAggregationModel, aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>, isDataSource: boolean) => GridAggregationRules;
25
24
  interface AddFooterRowsParams {
26
25
  groupingParams: GridHydrateRowsValue;
27
26
  getAggregationPosition: DataGridPremiumProcessedProps['getAggregationPosition'];
@@ -18,21 +18,23 @@ const getAggregationFooterRowIdFromGroupId = groupId => {
18
18
  return `auto-generated-group-footer-${groupId}`;
19
19
  };
20
20
  exports.getAggregationFooterRowIdFromGroupId = getAggregationFooterRowIdFromGroupId;
21
+ const isClientSideAggregateFunction = aggregationFunction => !!aggregationFunction && 'apply' in aggregationFunction;
21
22
  const canColumnHaveAggregationFunction = ({
22
23
  colDef,
23
24
  aggregationFunctionName,
24
- aggregationFunction
25
+ aggregationFunction,
26
+ isDataSource
25
27
  }) => {
26
28
  if (!colDef) {
27
29
  return false;
28
30
  }
29
- if (!aggregationFunction) {
31
+ if (!isClientSideAggregateFunction(aggregationFunction) && !isDataSource) {
30
32
  return false;
31
33
  }
32
34
  if (colDef.availableAggregationFunctions != null) {
33
35
  return colDef.availableAggregationFunctions.includes(aggregationFunctionName);
34
36
  }
35
- if (!aggregationFunction.columnTypes) {
37
+ if (!aggregationFunction?.columnTypes) {
36
38
  return true;
37
39
  }
38
40
  return aggregationFunction.columnTypes.includes(colDef.type);
@@ -40,11 +42,13 @@ const canColumnHaveAggregationFunction = ({
40
42
  exports.canColumnHaveAggregationFunction = canColumnHaveAggregationFunction;
41
43
  const getAvailableAggregationFunctions = ({
42
44
  aggregationFunctions,
43
- colDef
45
+ colDef,
46
+ isDataSource
44
47
  }) => Object.keys(aggregationFunctions).filter(aggregationFunctionName => canColumnHaveAggregationFunction({
45
48
  colDef,
46
49
  aggregationFunctionName,
47
- aggregationFunction: aggregationFunctions[aggregationFunctionName]
50
+ aggregationFunction: aggregationFunctions[aggregationFunctionName],
51
+ isDataSource
48
52
  }));
49
53
  exports.getAvailableAggregationFunctions = getAvailableAggregationFunctions;
50
54
  const mergeStateWithAggregationModel = aggregationModel => state => (0, _extends2.default)({}, state, {
@@ -53,24 +57,24 @@ const mergeStateWithAggregationModel = aggregationModel => state => (0, _extends
53
57
  })
54
58
  });
55
59
  exports.mergeStateWithAggregationModel = mergeStateWithAggregationModel;
56
- const getAggregationRules = ({
57
- columnsLookup,
58
- aggregationModel,
59
- aggregationFunctions
60
- }) => {
60
+ const getAggregationRules = (columnsLookup, aggregationModel, aggregationFunctions, isDataSource) => {
61
61
  const aggregationRules = {};
62
- Object.entries(aggregationModel).forEach(([field, columnItem]) => {
62
+
63
+ // eslint-disable-next-line guard-for-in
64
+ for (const field in aggregationModel) {
65
+ const columnItem = aggregationModel[field];
63
66
  if (columnsLookup[field] && canColumnHaveAggregationFunction({
64
67
  colDef: columnsLookup[field],
65
68
  aggregationFunctionName: columnItem,
66
- aggregationFunction: aggregationFunctions[columnItem]
69
+ aggregationFunction: aggregationFunctions[columnItem],
70
+ isDataSource
67
71
  })) {
68
72
  aggregationRules[field] = {
69
73
  aggregationFunctionName: columnItem,
70
74
  aggregationFunction: aggregationFunctions[columnItem]
71
75
  };
72
76
  }
73
- });
77
+ }
74
78
  return aggregationRules;
75
79
  };
76
80
  exports.getAggregationRules = getAggregationRules;
@@ -1,4 +1,4 @@
1
- export * from './gridAggregationInterfaces';
1
+ export type { GridAggregationState, GridAggregationInitialState, GridAggregationInternalCache, GridAggregationApi, GridAggregationGetCellValueParams, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationParams, GridAggregationModel, GridAggregationLookup, GridAggregationPosition, GridAggregationCellMeta, GridAggregationHeaderMeta, GridAggregationRule, GridAggregationRules, } from './gridAggregationInterfaces';
2
2
  export * from './gridAggregationSelectors';
3
3
  export * from './gridAggregationFunctions';
4
4
  export { GRID_AGGREGATION_ROOT_FOOTER_ROW_ID, getAggregationFooterRowIdFromGroupId, } from './gridAggregationUtils';
@@ -19,18 +19,6 @@ Object.defineProperty(exports, "getAggregationFooterRowIdFromGroupId", {
19
19
  return _gridAggregationUtils.getAggregationFooterRowIdFromGroupId;
20
20
  }
21
21
  });
22
- var _gridAggregationInterfaces = require("./gridAggregationInterfaces");
23
- Object.keys(_gridAggregationInterfaces).forEach(function (key) {
24
- if (key === "default" || key === "__esModule") return;
25
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
26
- if (key in exports && exports[key] === _gridAggregationInterfaces[key]) return;
27
- Object.defineProperty(exports, key, {
28
- enumerable: true,
29
- get: function () {
30
- return _gridAggregationInterfaces[key];
31
- }
32
- });
33
- });
34
22
  var _gridAggregationSelectors = require("./gridAggregationSelectors");
35
23
  Object.keys(_gridAggregationSelectors).forEach(function (key) {
36
24
  if (key === "default" || key === "__esModule") return;
@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
3
3
  import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
4
4
  import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
5
5
  export declare const aggregationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'aggregationModel' | 'initialState'>, GridPrivateApiPremium>;
6
- export declare const useGridAggregation: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "onAggregationModelChange" | "initialState" | "aggregationModel" | "getAggregationPosition" | "aggregationFunctions" | "aggregationRowsScope" | "disableAggregation" | "rowGroupingColumnMode">) => void;
6
+ export declare const useGridAggregation: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "onAggregationModelChange" | "initialState" | "aggregationModel" | "getAggregationPosition" | "aggregationFunctions" | "aggregationRowsScope" | "disableAggregation" | "rowGroupingColumnMode" | "unstable_dataSource">) => void;
@@ -9,6 +9,7 @@ exports.useGridAggregation = exports.aggregationStateInitializer = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _xDataGridPro = require("@mui/x-data-grid-pro");
12
+ var _internals = require("@mui/x-data-grid-pro/internals");
12
13
  var _gridAggregationSelectors = require("./gridAggregationSelectors");
13
14
  var _gridAggregationUtils = require("./gridAggregationUtils");
14
15
  var _createAggregationLookup = require("./createAggregationLookup");
@@ -48,18 +49,29 @@ const useGridAggregation = (apiRef, props) => {
48
49
  apiRef,
49
50
  getAggregationPosition: props.getAggregationPosition,
50
51
  aggregationFunctions: props.aggregationFunctions,
51
- aggregationRowsScope: props.aggregationRowsScope
52
+ aggregationRowsScope: props.aggregationRowsScope,
53
+ isDataSource: !!props.unstable_dataSource
52
54
  });
53
55
  apiRef.current.setState(state => (0, _extends2.default)({}, state, {
54
56
  aggregation: (0, _extends2.default)({}, state.aggregation, {
55
57
  lookup: aggregationLookup
56
58
  })
57
59
  }));
58
- }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope]);
60
+ }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.unstable_dataSource]);
59
61
  const aggregationApi = {
60
62
  setAggregationModel
61
63
  };
64
+ const aggregationPrivateApi = {
65
+ applyAggregation
66
+ };
62
67
  (0, _xDataGridPro.useGridApiMethod)(apiRef, aggregationApi, 'public');
68
+ (0, _xDataGridPro.useGridApiMethod)(apiRef, aggregationPrivateApi, 'private');
69
+ const addGetRowsParams = React.useCallback(params => {
70
+ return (0, _extends2.default)({}, params, {
71
+ aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef)
72
+ });
73
+ }, [apiRef]);
74
+ (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowsParams', addGetRowsParams);
63
75
 
64
76
  /**
65
77
  * EVENTS
@@ -69,16 +81,16 @@ const useGridAggregation = (apiRef, props) => {
69
81
  rulesOnLastRowHydration,
70
82
  rulesOnLastColumnHydration
71
83
  } = apiRef.current.caches.aggregation;
72
- const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)({
73
- columnsLookup: (0, _xDataGridPro.gridColumnLookupSelector)(apiRef),
74
- aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
75
- aggregationFunctions: props.aggregationFunctions
76
- });
84
+ const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
77
85
 
78
86
  // Re-apply the row hydration to add / remove the aggregation footers
79
87
  if (!(0, _gridAggregationUtils.areAggregationRulesEqual)(rulesOnLastRowHydration, aggregationRules)) {
80
- apiRef.current.requestPipeProcessorsApplication('hydrateRows');
81
- applyAggregation();
88
+ if (props.unstable_dataSource) {
89
+ apiRef.current.unstable_dataSource.fetchRows();
90
+ } else {
91
+ apiRef.current.requestPipeProcessorsApplication('hydrateRows');
92
+ applyAggregation();
93
+ }
82
94
  }
83
95
 
84
96
  // Re-apply the column hydration to wrap / unwrap the aggregated columns
@@ -86,7 +98,7 @@ const useGridAggregation = (apiRef, props) => {
86
98
  apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
87
99
  apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
88
100
  }
89
- }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);
101
+ }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
90
102
  (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
91
103
  (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'columnsChange', checkAggregationRulesDiff);
92
104
  (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'filteredRowsSet', applyAggregation);
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
3
3
  import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
4
- export declare const useGridAggregationPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aggregationFunctions" | "disableAggregation" | "getAggregationPosition" | "slotProps" | "slots">) => void;
4
+ export declare const useGridAggregationPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aggregationFunctions" | "disableAggregation" | "getAggregationPosition" | "slotProps" | "slots" | "unstable_dataSource">) => void;
@@ -18,11 +18,7 @@ const useGridAggregationPreProcessors = (apiRef, props) => {
18
18
  // that the pre-processor is called it will already have been updated with the current rules.
19
19
  const rulesOnLastColumnHydration = React.useRef({});
20
20
  const updateAggregatedColumns = React.useCallback(columnsState => {
21
- const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)({
22
- columnsLookup: columnsState.lookup,
23
- aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
24
- aggregationFunctions: props.aggregationFunctions
25
- });
21
+ const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)(columnsState.lookup, (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
26
22
  columnsState.orderedFields.forEach(field => {
27
23
  const shouldHaveAggregationValue = !!aggregationRules[field];
28
24
  const haveAggregationColumnValue = !!rulesOnLastColumnHydration.current[field];
@@ -43,13 +39,9 @@ const useGridAggregationPreProcessors = (apiRef, props) => {
43
39
  });
44
40
  rulesOnLastColumnHydration.current = aggregationRules;
45
41
  return columnsState;
46
- }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
42
+ }, [apiRef, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
47
43
  const addGroupFooterRows = React.useCallback(value => {
48
- const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)({
49
- columnsLookup: (0, _xDataGridPro.gridColumnLookupSelector)(apiRef),
50
- aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
51
- aggregationFunctions: props.aggregationFunctions
52
- });
44
+ const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
53
45
  const hasAggregationRule = Object.keys(aggregationRules).length > 0;
54
46
 
55
47
  // If we did not have any aggregation footer before, and we still don't have any,
@@ -64,20 +56,21 @@ const useGridAggregationPreProcessors = (apiRef, props) => {
64
56
  getAggregationPosition: props.getAggregationPosition,
65
57
  hasAggregationRule
66
58
  });
67
- }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions]);
59
+ }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions, props.unstable_dataSource]);
68
60
  const addColumnMenuButtons = React.useCallback((columnMenuItems, colDef) => {
69
61
  if (props.disableAggregation || !colDef.aggregable) {
70
62
  return columnMenuItems;
71
63
  }
72
64
  const availableAggregationFunctions = (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
73
65
  aggregationFunctions: props.aggregationFunctions,
74
- colDef
66
+ colDef,
67
+ isDataSource: !!props.unstable_dataSource
75
68
  });
76
69
  if (availableAggregationFunctions.length === 0) {
77
70
  return columnMenuItems;
78
71
  }
79
72
  return [...columnMenuItems, 'columnMenuAggregationItem'];
80
- }, [props.aggregationFunctions, props.disableAggregation]);
73
+ }, [props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
81
74
  const stateExportPreProcessing = React.useCallback(prevState => {
82
75
  if (props.disableAggregation) {
83
76
  return prevState;
@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
3
3
  import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
4
4
  import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
5
5
  export declare const cellSelectionStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'cellSelectionModel' | 'initialState'>>;
6
- export declare const useGridCellSelection: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "cellSelection" | "cellSelectionModel" | "onCellSelectionModelChange" | "pagination" | "paginationMode" | "ignoreValueFormatterDuringExport" | "clipboardCopyCellDelimiter" | "columnHeaderHeight">) => void;
6
+ export declare const useGridCellSelection: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "cellSelection" | "cellSelectionModel" | "onCellSelectionModelChange" | "pagination" | "paginationMode" | "ignoreValueFormatterDuringExport" | "clipboardCopyCellDelimiter" | "columnHeaderHeight">) => void;
@@ -26,10 +26,10 @@ const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the s
26
26
  const useGridCellSelection = (apiRef, props) => {
27
27
  const hasRootReference = apiRef.current.rootElementRef.current !== null;
28
28
  const visibleRows = (0, _internals.useGridVisibleRows)(apiRef, props);
29
- const cellWithVirtualFocus = React.useRef();
30
- const lastMouseDownCell = React.useRef();
29
+ const cellWithVirtualFocus = React.useRef(null);
30
+ const lastMouseDownCell = React.useRef(null);
31
31
  const mousePosition = React.useRef(null);
32
- const autoScrollRAF = React.useRef();
32
+ const autoScrollRAF = React.useRef(null);
33
33
  const sortedRowIds = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridSortedRowIdsSelector);
34
34
  const dimensions = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridDimensionsSelector);
35
35
  const totalHeaderHeight = (0, _internals.getTotalHeaderHeight)(apiRef, props);
@@ -0,0 +1,2 @@
1
+ import { GridGetRowsParamsPremium } from './models';
2
+ export declare function getKeyPremium(params: GridGetRowsParamsPremium): string;
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getKeyPremium = getKeyPremium;
7
+ function getKeyPremium(params) {
8
+ return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.aggregationModel]);
9
+ }
@@ -0,0 +1,47 @@
1
+ import type { GridColDef, GridRowId, GridValidRowModel, GridDataSource, GridGetRowsResponse, GridGetRowsParams, GridDataSourceApiBase, GridDataSourcePrivateApi } from '@mui/x-data-grid-pro';
2
+ import type { GridAggregationModel } from '../aggregation/gridAggregationInterfaces';
3
+ export interface GridGetRowsResponsePremium extends GridGetRowsResponse {
4
+ /**
5
+ * Row to be used for aggregation footer row.
6
+ * It must provide the values for the aggregated columns passed in
7
+ * `GridGetRowsParams.aggregationModel`.
8
+ */
9
+ aggregateRow?: GridValidRowModel;
10
+ }
11
+ export interface GridGetRowsParamsPremium extends GridGetRowsParams {
12
+ aggregationModel?: GridAggregationModel;
13
+ }
14
+ export interface GridDataSourcePremium extends Omit<GridDataSource, 'getRows'> {
15
+ /**
16
+ * This method will be called when the grid needs to fetch some rows.
17
+ * @param {GridGetRowsParamsPremium} params The parameters required to fetch the rows.
18
+ * @returns {Promise<GridGetRowsResponsePremium>} A promise that resolves to the data of type [GridGetRowsResponsePremium].
19
+ */
20
+ getRows(params: GridGetRowsParamsPremium): Promise<GridGetRowsResponsePremium>;
21
+ /**
22
+ * Used to get the aggregated value for a parent row.
23
+ * @param {GridValidRowModel} row The row to extract the aggregated value from.
24
+ * @param {GridColDef['field']} field The field to extract the aggregated value for.
25
+ * @returns {string} The aggregated value for a specific aggregated column.
26
+ */
27
+ getAggregatedValue?: (row: GridValidRowModel, field: GridColDef['field']) => string;
28
+ }
29
+ export interface GridDataSourceApiBasePremium extends Omit<GridDataSourceApiBase, 'fetchRows'> {
30
+ /**
31
+ * Fetches the rows from the server.
32
+ * If no `parentId` option is provided, it fetches the root rows.
33
+ * Any missing parameter from `params` will be filled from the state (sorting, filtering, etc.).
34
+ * @param {GridRowId} parentId The id of the parent node (default: `GRID_ROOT_GROUP_ID`).
35
+ * @param {Partial<GridGetRowsParamsPremium>} params Request parameters override.
36
+ */
37
+ fetchRows: (parentId?: GridRowId, params?: Partial<GridGetRowsParamsPremium>) => void;
38
+ }
39
+ export interface GridDataSourceApiPremium {
40
+ /**
41
+ * The data source API.
42
+ */
43
+ unstable_dataSource: GridDataSourceApiBasePremium;
44
+ }
45
+ export interface GridDataSourcePremiumPrivateApi extends GridDataSourcePrivateApi {
46
+ resolveGroupAggregation: (groupId: GridRowId, field: string) => any;
47
+ }
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,4 @@
1
+ import * as React from 'react';
2
+ import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
3
+ import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
4
+ export declare const useGridDataSourcePremium: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: DataGridPremiumProcessedProps) => void;
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.useGridDataSourcePremium = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _xDataGridPro = require("@mui/x-data-grid-pro");
12
+ var _internals = require("@mui/x-data-grid-pro/internals");
13
+ var _cache = require("./cache");
14
+ const options = {
15
+ cacheOptions: {
16
+ getKey: _cache.getKeyPremium
17
+ }
18
+ };
19
+ const useGridDataSourcePremium = (apiRef, props) => {
20
+ const {
21
+ api,
22
+ strategyProcessor,
23
+ events
24
+ } = (0, _internals.useGridDataSourceBase)(apiRef, props, options);
25
+ const aggregateRowRef = React.useRef({});
26
+ const processDataSourceRows = React.useCallback(({
27
+ params,
28
+ response
29
+ }, applyRowHydration) => {
30
+ if (response.aggregateRow) {
31
+ aggregateRowRef.current = response.aggregateRow;
32
+ }
33
+ if (Object.keys(params.aggregationModel || {}).length > 0) {
34
+ if (applyRowHydration) {
35
+ apiRef.current.requestPipeProcessorsApplication('hydrateRows');
36
+ }
37
+ apiRef.current.applyAggregation();
38
+ }
39
+ return {
40
+ params,
41
+ response
42
+ };
43
+ }, [apiRef]);
44
+ const resolveGroupAggregation = React.useCallback((groupId, field) => {
45
+ if (groupId === _xDataGridPro.GRID_ROOT_GROUP_ID) {
46
+ return props.unstable_dataSource?.getAggregatedValue?.(aggregateRowRef.current, field);
47
+ }
48
+ const row = apiRef.current.getRow(groupId);
49
+ return props.unstable_dataSource?.getAggregatedValue?.(row, field);
50
+ }, [apiRef, props.unstable_dataSource]);
51
+ const privateApi = (0, _extends2.default)({}, api.private, {
52
+ resolveGroupAggregation
53
+ });
54
+ (0, _xDataGridPro.useGridApiMethod)(apiRef, api.public, 'public');
55
+ (0, _xDataGridPro.useGridApiMethod)(apiRef, privateApi, 'private');
56
+ (0, _internals.useGridRegisterStrategyProcessor)(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
57
+ (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'processDataSourceRows', processDataSourceRows);
58
+ Object.entries(events).forEach(([event, handler]) => {
59
+ (0, _xDataGridPro.useGridApiEventHandler)(apiRef, event, handler);
60
+ });
61
+ };
62
+ exports.useGridDataSourcePremium = useGridDataSourcePremium;
@@ -1,2 +1,2 @@
1
1
  import { GridApiPremium } from '../../models/gridApiPremium';
2
- export declare const useGridApiRef: () => import("react").MutableRefObject<GridApiPremium>;
2
+ export declare const useGridApiRef: () => import("react").RefObject<GridApiPremium>;
package/index.d.ts CHANGED
@@ -27,3 +27,5 @@ export type { DataGridPremiumProps, GridExperimentalPremiumFeatures, } from './m
27
27
  export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
28
28
  export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
29
29
  export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS, } from './components/reexports';
30
+ export type { GridDataSourceCache } from '@mui/x-data-grid-pro';
31
+ export type { GridGetRowsParamsPremium as GridGetRowsParams, GridGetRowsResponsePremium as GridGetRowsResponse, GridDataSourcePremium as GridDataSource, GridDataSourceApiPremium as GridDataSourceApi, GridDataSourceApiBasePremium as GridDataSourceApiBase, GridDataSourcePremiumPrivateApi as GridDataSourcePrivateApi, } from './hooks/features/dataSource/models';
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-data-grid-premium v8.0.0-alpha.6
2
+ * @mui/x-data-grid-premium v8.0.0-alpha.7
3
3
  *
4
4
  * @license MUI X Commercial
5
5
  * This source code is licensed under the commercial license found in the
@@ -2,11 +2,12 @@ import * as React from 'react';
2
2
  import { GridCallbackDetails, GridValidRowModel, GridGroupNode, GridEventListener } from '@mui/x-data-grid-pro';
3
3
  import { GridExperimentalProFeatures, DataGridProPropsWithDefaultValue, DataGridProPropsWithoutDefaultValue, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, DataGridPremiumSharedPropsWithDefaultValue } from '@mui/x-data-grid-pro/internals';
4
4
  import type { GridRowGroupingModel } from '../hooks/features/rowGrouping';
5
- import type { GridAggregationModel, GridAggregationFunction, GridAggregationPosition } from '../hooks/features/aggregation';
5
+ import type { GridAggregationModel, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationPosition } from '../hooks/features/aggregation';
6
6
  import { GridPremiumSlotsComponent } from './gridPremiumSlotsComponent';
7
7
  import { GridInitialStatePremium } from './gridStatePremium';
8
8
  import { GridApiPremium } from './gridApiPremium';
9
9
  import { GridCellSelectionModel } from '../hooks/features/cellSelection';
10
+ import { GridDataSourcePremium as GridDataSource } from '../hooks/features/dataSource/models';
10
11
  export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {
11
12
  }
12
13
  export interface DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing extends Pick<DataGridPropsWithComplexDefaultValueBeforeProcessing, 'localeText'> {
@@ -53,9 +54,9 @@ export interface DataGridPremiumPropsWithDefaultValue<R extends GridValidRowMode
53
54
  rowGroupingColumnMode: 'single' | 'multiple';
54
55
  /**
55
56
  * Aggregation functions available on the grid.
56
- * @default GRID_AGGREGATION_FUNCTIONS
57
+ * @default GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided
57
58
  */
58
- aggregationFunctions: Record<string, GridAggregationFunction>;
59
+ aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>;
59
60
  /**
60
61
  * Rows used to generate the aggregated value.
61
62
  * If `filtered`, the aggregated values are generated using only the rows currently passing the filtering process.
@@ -83,7 +84,7 @@ export interface DataGridPremiumPropsWithDefaultValue<R extends GridValidRowMode
83
84
  */
84
85
  splitClipboardPastedText: (text: string) => string[][] | null;
85
86
  }
86
- export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridProPropsWithoutDefaultValue<R>, 'initialState' | 'apiRef'> {
87
+ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridProPropsWithoutDefaultValue<R>, 'initialState' | 'apiRef' | 'unstable_dataSource'> {
87
88
  /**
88
89
  * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
89
90
  */
@@ -152,4 +153,5 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
152
153
  * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
153
154
  */
154
155
  experimentalFeatures?: Partial<GridExperimentalPremiumFeatures>;
156
+ unstable_dataSource?: GridDataSource;
155
157
  }
@@ -1,14 +1,16 @@
1
1
  import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals';
2
- import { GridApiCommon, GridColumnPinningApi, GridDetailPanelApi, GridDetailPanelPrivateApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi, GridRowProApi, GridDataSourceApi, GridDataSourcePrivateApi } from '@mui/x-data-grid-pro';
2
+ import { GridApiCommon, GridColumnPinningApi, GridDetailPanelApi, GridDetailPanelPrivateApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi, GridRowProApi } from '@mui/x-data-grid-pro';
3
3
  import { GridInitialStatePremium, GridStatePremium } from './gridStatePremium';
4
4
  import type { GridRowGroupingApi, GridExcelExportApi, GridAggregationApi } from '../hooks';
5
5
  import { GridCellSelectionApi } from '../hooks/features/cellSelection/gridCellSelectionInterfaces';
6
6
  import type { DataGridPremiumProcessedProps } from './dataGridPremiumProps';
7
+ import type { GridDataSourcePremiumPrivateApi, GridDataSourceApiPremium } from '../hooks/features/dataSource/models';
8
+ import type { GridAggregationPrivateApi } from '../hooks/features/aggregation/gridAggregationInterfaces';
7
9
  /**
8
10
  * The api of Data Grid Premium.
9
11
  * TODO: Do not redefine manually the pro features
10
12
  */
11
- export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridDataSourceApi, GridCellSelectionApi, GridRowMultiSelectionApi, GridColumnReorderApi {
13
+ export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridDataSourceApiPremium, GridCellSelectionApi, GridRowMultiSelectionApi, GridColumnReorderApi {
12
14
  }
13
- export interface GridPrivateApiPremium extends GridApiPremium, GridPrivateOnlyApiCommon<GridApiPremium, GridPrivateApiPremium, DataGridPremiumProcessedProps>, GridDataSourcePrivateApi, GridDetailPanelPrivateApi {
15
+ export interface GridPrivateApiPremium extends GridApiPremium, GridPrivateOnlyApiCommon<GridApiPremium, GridPrivateApiPremium, DataGridPremiumProcessedProps>, GridDataSourcePremiumPrivateApi, GridAggregationPrivateApi, GridDetailPanelPrivateApi {
14
16
  }
@@ -57,7 +57,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
57
57
  // ----------------------------------------------------------------------
58
58
  /**
59
59
  * Aggregation functions available on the grid.
60
- * @default GRID_AGGREGATION_FUNCTIONS
60
+ * @default GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided
61
61
  */
62
62
  aggregationFunctions: PropTypes.object,
63
63
  /**
@@ -1037,6 +1037,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
1037
1037
  */
1038
1038
  treeData: PropTypes.bool,
1039
1039
  unstable_dataSource: PropTypes.shape({
1040
+ getAggregatedValue: PropTypes.func,
1040
1041
  getChildrenCount: PropTypes.func,
1041
1042
  getGroupKey: PropTypes.func,
1042
1043
  getRows: PropTypes.func.isRequired,
@@ -1,4 +1,5 @@
1
- import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, useGridDataSource, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer } from '@mui/x-data-grid-pro/internals';
1
+ import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer } from '@mui/x-data-grid-pro/internals';
2
+ import { useGridDataSourcePremium as useGridDataSource } from "../hooks/features/dataSource/useGridDataSourcePremium.js";
2
3
  // Premium-only features
3
4
  import { useGridAggregation, aggregationStateInitializer } from "../hooks/features/aggregation/useGridAggregation.js";
4
5
  import { useGridAggregationPreProcessors } from "../hooks/features/aggregation/useGridAggregationPreProcessors.js";
@@ -62,6 +63,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
62
63
  useGridRowGrouping(apiRef, props);
63
64
  useGridHeaderFiltering(apiRef, props);
64
65
  useGridTreeData(apiRef, props);
66
+ useGridDataSource(apiRef, props);
65
67
  useGridAggregation(apiRef, props);
66
68
  useGridKeyboardNavigation(apiRef, props);
67
69
  useGridRowSelection(apiRef, props);
@@ -99,7 +101,6 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
99
101
  useGridDimensions(apiRef, props);
100
102
  useGridEvents(apiRef, props);
101
103
  useGridStatePersistence(apiRef);
102
- useGridDataSource(apiRef, props);
103
104
  useGridVirtualization(apiRef, props);
104
105
  useGridListView(apiRef, props);
105
106
  return apiRef;
@@ -45,7 +45,9 @@ export const useDataGridPremiumProps = inProps => {
45
45
  defaultSlots,
46
46
  slots: themedProps.slots
47
47
  }), [themedProps.slots]);
48
- return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
48
+ return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.unstable_dataSource ? {
49
+ aggregationFunctions: {}
50
+ } : {}, themedProps, {
49
51
  localeText,
50
52
  slots
51
53
  }, getDataGridPremiumForcedProps(themedProps)), [themedProps, localeText, slots]);