@mui/x-charts-pro 8.7.0 → 8.8.0
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.
- package/BarChartPro/BarChartPro.d.ts +1 -1
- package/BarChartPro/BarChartPro.js +32 -0
- package/CHANGELOG.md +98 -0
- package/ChartDataProviderPro/ChartDataProviderPro.js +7 -1
- package/ChartZoomSlider/internals/ChartAxisZoomSlider.js +31 -16
- package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts +4 -0
- package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js +27 -12
- package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.d.ts +18 -0
- package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js +102 -0
- package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.d.ts +11 -0
- package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js +62 -0
- package/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts +14 -0
- package/ChartZoomSlider/internals/previews/AreaPreviewPlot.js +61 -0
- package/ChartZoomSlider/internals/previews/BarPreviewPlot.d.ts +10 -0
- package/ChartZoomSlider/internals/previews/BarPreviewPlot.js +62 -0
- package/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts +14 -0
- package/ChartZoomSlider/internals/previews/LinePreviewPlot.js +59 -0
- package/ChartZoomSlider/internals/previews/PreviewPlot.types.d.ts +4 -0
- package/ChartZoomSlider/internals/previews/PreviewPlot.types.js +5 -0
- package/ChartZoomSlider/internals/previews/ScatterPreviewPlot.d.ts +16 -0
- package/ChartZoomSlider/internals/previews/ScatterPreviewPlot.js +93 -0
- package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js +2 -0
- package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js +3 -1
- package/ChartsToolbarPro/ChartsToolbarPro.js +2 -0
- package/FunnelChart/FunnelChart.d.ts +1 -1
- package/FunnelChart/FunnelPlot.js +1 -1
- package/FunnelChart/funnel.types.d.ts +14 -9
- package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts +1 -1
- package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts +3 -3
- package/FunnelChart/seriesConfig/seriesProcessor.js +24 -48
- package/Heatmap/Heatmap.d.ts +1 -1
- package/LineChartPro/LineChartPro.js +38 -0
- package/PieChartPro/PieChartPro.d.ts +1 -1
- package/RadarChartPro/RadarChartPro.d.ts +1 -1
- package/ScatterChartPro/ScatterChartPro.d.ts +1 -1
- package/ScatterChartPro/ScatterChartPro.js +16 -0
- package/esm/BarChartPro/BarChartPro.d.ts +1 -1
- package/esm/BarChartPro/BarChartPro.js +32 -0
- package/esm/ChartDataProviderPro/ChartDataProviderPro.js +7 -1
- package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js +33 -18
- package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts +4 -0
- package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js +28 -13
- package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.d.ts +18 -0
- package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js +94 -0
- package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.d.ts +11 -0
- package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js +54 -0
- package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts +14 -0
- package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.js +53 -0
- package/esm/ChartZoomSlider/internals/previews/BarPreviewPlot.d.ts +10 -0
- package/esm/ChartZoomSlider/internals/previews/BarPreviewPlot.js +55 -0
- package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts +14 -0
- package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.js +51 -0
- package/esm/ChartZoomSlider/internals/previews/PreviewPlot.types.d.ts +4 -0
- package/esm/ChartZoomSlider/internals/previews/PreviewPlot.types.js +1 -0
- package/esm/ChartZoomSlider/internals/previews/ScatterPreviewPlot.d.ts +16 -0
- package/esm/ChartZoomSlider/internals/previews/ScatterPreviewPlot.js +86 -0
- package/esm/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js +2 -0
- package/esm/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js +3 -1
- package/esm/ChartsToolbarPro/ChartsToolbarPro.js +2 -0
- package/esm/FunnelChart/FunnelChart.d.ts +1 -1
- package/esm/FunnelChart/FunnelPlot.js +1 -1
- package/esm/FunnelChart/funnel.types.d.ts +14 -9
- package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts +1 -1
- package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts +3 -3
- package/esm/FunnelChart/seriesConfig/seriesProcessor.js +24 -48
- package/esm/Heatmap/Heatmap.d.ts +1 -1
- package/esm/LineChartPro/LineChartPro.js +38 -0
- package/esm/PieChartPro/PieChartPro.d.ts +1 -1
- package/esm/RadarChartPro/RadarChartPro.d.ts +1 -1
- package/esm/ScatterChartPro/ScatterChartPro.d.ts +1 -1
- package/esm/ScatterChartPro/ScatterChartPro.js +16 -0
- package/esm/index.js +1 -1
- package/esm/internals/plugins/useChartProExport/exportImage.js +9 -3
- package/esm/internals/plugins/useChartProExport/print.d.ts +3 -1
- package/esm/internals/plugins/useChartProExport/print.js +7 -2
- package/esm/internals/plugins/useChartProExport/useChartProExport.types.d.ts +22 -12
- package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +4 -4
- package/index.js +1 -1
- package/internals/plugins/useChartProExport/exportImage.js +9 -3
- package/internals/plugins/useChartProExport/print.d.ts +3 -1
- package/internals/plugins/useChartProExport/print.js +7 -2
- package/internals/plugins/useChartProExport/useChartProExport.types.d.ts +22 -12
- package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +4 -4
- package/package.json +6 -6
|
@@ -313,6 +313,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
313
313
|
panning: PropTypes.bool,
|
|
314
314
|
slider: PropTypes.shape({
|
|
315
315
|
enabled: PropTypes.bool,
|
|
316
|
+
preview: PropTypes.bool,
|
|
316
317
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
317
318
|
size: PropTypes.number
|
|
318
319
|
}),
|
|
@@ -378,6 +379,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
378
379
|
panning: PropTypes.bool,
|
|
379
380
|
slider: PropTypes.shape({
|
|
380
381
|
enabled: PropTypes.bool,
|
|
382
|
+
preview: PropTypes.bool,
|
|
381
383
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
382
384
|
size: PropTypes.number
|
|
383
385
|
}),
|
|
@@ -438,6 +440,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
438
440
|
panning: PropTypes.bool,
|
|
439
441
|
slider: PropTypes.shape({
|
|
440
442
|
enabled: PropTypes.bool,
|
|
443
|
+
preview: PropTypes.bool,
|
|
441
444
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
442
445
|
size: PropTypes.number
|
|
443
446
|
}),
|
|
@@ -498,6 +501,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
498
501
|
panning: PropTypes.bool,
|
|
499
502
|
slider: PropTypes.shape({
|
|
500
503
|
enabled: PropTypes.bool,
|
|
504
|
+
preview: PropTypes.bool,
|
|
501
505
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
502
506
|
size: PropTypes.number
|
|
503
507
|
}),
|
|
@@ -558,6 +562,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
558
562
|
panning: PropTypes.bool,
|
|
559
563
|
slider: PropTypes.shape({
|
|
560
564
|
enabled: PropTypes.bool,
|
|
565
|
+
preview: PropTypes.bool,
|
|
561
566
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
562
567
|
size: PropTypes.number
|
|
563
568
|
}),
|
|
@@ -618,6 +623,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
618
623
|
panning: PropTypes.bool,
|
|
619
624
|
slider: PropTypes.shape({
|
|
620
625
|
enabled: PropTypes.bool,
|
|
626
|
+
preview: PropTypes.bool,
|
|
621
627
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
622
628
|
size: PropTypes.number
|
|
623
629
|
}),
|
|
@@ -678,6 +684,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
678
684
|
panning: PropTypes.bool,
|
|
679
685
|
slider: PropTypes.shape({
|
|
680
686
|
enabled: PropTypes.bool,
|
|
687
|
+
preview: PropTypes.bool,
|
|
681
688
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
682
689
|
size: PropTypes.number
|
|
683
690
|
}),
|
|
@@ -738,6 +745,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
738
745
|
panning: PropTypes.bool,
|
|
739
746
|
slider: PropTypes.shape({
|
|
740
747
|
enabled: PropTypes.bool,
|
|
748
|
+
preview: PropTypes.bool,
|
|
741
749
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
742
750
|
size: PropTypes.number
|
|
743
751
|
}),
|
|
@@ -810,6 +818,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
810
818
|
panning: PropTypes.bool,
|
|
811
819
|
slider: PropTypes.shape({
|
|
812
820
|
enabled: PropTypes.bool,
|
|
821
|
+
preview: PropTypes.bool,
|
|
813
822
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
814
823
|
size: PropTypes.number
|
|
815
824
|
}),
|
|
@@ -874,6 +883,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
874
883
|
panning: PropTypes.bool,
|
|
875
884
|
slider: PropTypes.shape({
|
|
876
885
|
enabled: PropTypes.bool,
|
|
886
|
+
preview: PropTypes.bool,
|
|
877
887
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
878
888
|
size: PropTypes.number
|
|
879
889
|
}),
|
|
@@ -933,6 +943,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
933
943
|
panning: PropTypes.bool,
|
|
934
944
|
slider: PropTypes.shape({
|
|
935
945
|
enabled: PropTypes.bool,
|
|
946
|
+
preview: PropTypes.bool,
|
|
936
947
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
937
948
|
size: PropTypes.number
|
|
938
949
|
}),
|
|
@@ -992,6 +1003,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
992
1003
|
panning: PropTypes.bool,
|
|
993
1004
|
slider: PropTypes.shape({
|
|
994
1005
|
enabled: PropTypes.bool,
|
|
1006
|
+
preview: PropTypes.bool,
|
|
995
1007
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
996
1008
|
size: PropTypes.number
|
|
997
1009
|
}),
|
|
@@ -1051,6 +1063,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
1051
1063
|
panning: PropTypes.bool,
|
|
1052
1064
|
slider: PropTypes.shape({
|
|
1053
1065
|
enabled: PropTypes.bool,
|
|
1066
|
+
preview: PropTypes.bool,
|
|
1054
1067
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
1055
1068
|
size: PropTypes.number
|
|
1056
1069
|
}),
|
|
@@ -1110,6 +1123,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
1110
1123
|
panning: PropTypes.bool,
|
|
1111
1124
|
slider: PropTypes.shape({
|
|
1112
1125
|
enabled: PropTypes.bool,
|
|
1126
|
+
preview: PropTypes.bool,
|
|
1113
1127
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
1114
1128
|
size: PropTypes.number
|
|
1115
1129
|
}),
|
|
@@ -1169,6 +1183,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
1169
1183
|
panning: PropTypes.bool,
|
|
1170
1184
|
slider: PropTypes.shape({
|
|
1171
1185
|
enabled: PropTypes.bool,
|
|
1186
|
+
preview: PropTypes.bool,
|
|
1172
1187
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
1173
1188
|
size: PropTypes.number
|
|
1174
1189
|
}),
|
|
@@ -1228,6 +1243,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
1228
1243
|
panning: PropTypes.bool,
|
|
1229
1244
|
slider: PropTypes.shape({
|
|
1230
1245
|
enabled: PropTypes.bool,
|
|
1246
|
+
preview: PropTypes.bool,
|
|
1231
1247
|
showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
|
|
1232
1248
|
size: PropTypes.number
|
|
1233
1249
|
}),
|
package/esm/index.js
CHANGED
|
@@ -15,7 +15,9 @@ export async function exportImage(element, params) {
|
|
|
15
15
|
const {
|
|
16
16
|
fileName,
|
|
17
17
|
type = 'image/png',
|
|
18
|
-
quality = 0.9
|
|
18
|
+
quality = 0.9,
|
|
19
|
+
onBeforeExport,
|
|
20
|
+
copyStyles = true
|
|
19
21
|
} = params ?? {};
|
|
20
22
|
const drawDocumentPromise = getDrawDocument();
|
|
21
23
|
const {
|
|
@@ -43,11 +45,15 @@ export async function exportImage(element, params) {
|
|
|
43
45
|
exportDoc.body.style.margin = '0px';
|
|
44
46
|
const rootCandidate = element.getRootNode();
|
|
45
47
|
const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
|
|
46
|
-
|
|
48
|
+
if (copyStyles) {
|
|
49
|
+
await Promise.all(loadStyleSheets(exportDoc, root));
|
|
50
|
+
}
|
|
47
51
|
resolve();
|
|
48
52
|
};
|
|
49
53
|
doc.body.appendChild(iframe);
|
|
50
|
-
|
|
54
|
+
await iframeLoadPromise;
|
|
55
|
+
await onBeforeExport?.(iframe);
|
|
56
|
+
const drawDocument = await drawDocumentPromise;
|
|
51
57
|
try {
|
|
52
58
|
await drawDocument(iframe.contentDocument, canvas, {
|
|
53
59
|
// Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
|
|
@@ -2,7 +2,9 @@ import ownerDocument from '@mui/utils/ownerDocument';
|
|
|
2
2
|
import { loadStyleSheets } from '@mui/x-internals/export';
|
|
3
3
|
import { createExportIframe } from "./common.js";
|
|
4
4
|
export function printChart(element, {
|
|
5
|
-
fileName
|
|
5
|
+
fileName,
|
|
6
|
+
onBeforeExport,
|
|
7
|
+
copyStyles = true
|
|
6
8
|
} = {}) {
|
|
7
9
|
const printWindow = createExportIframe(fileName);
|
|
8
10
|
const doc = ownerDocument(element);
|
|
@@ -14,7 +16,9 @@ export function printChart(element, {
|
|
|
14
16
|
printDoc.body.innerHTML = container.innerHTML;
|
|
15
17
|
const rootCandidate = element.getRootNode();
|
|
16
18
|
const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
|
|
17
|
-
|
|
19
|
+
if (copyStyles) {
|
|
20
|
+
await Promise.all(loadStyleSheets(printDoc, root));
|
|
21
|
+
}
|
|
18
22
|
const mediaQueryList = printWindow.contentWindow.matchMedia('print');
|
|
19
23
|
mediaQueryList.addEventListener('change', mql => {
|
|
20
24
|
const isAfterPrint = mql.matches === false;
|
|
@@ -22,6 +26,7 @@ export function printChart(element, {
|
|
|
22
26
|
doc.body.removeChild(printWindow);
|
|
23
27
|
}
|
|
24
28
|
});
|
|
29
|
+
await onBeforeExport?.(printWindow);
|
|
25
30
|
printWindow.contentWindow.print();
|
|
26
31
|
};
|
|
27
32
|
doc.body.appendChild(printWindow);
|
|
@@ -4,29 +4,39 @@ export type UseChartProExportDefaultizedParameters = UseChartProExportParameters
|
|
|
4
4
|
export interface UseChartProExportState {
|
|
5
5
|
export: {};
|
|
6
6
|
}
|
|
7
|
-
|
|
8
|
-
* The options to apply on the Print export.
|
|
9
|
-
* @demos
|
|
10
|
-
* - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
|
|
11
|
-
*/
|
|
12
|
-
export interface ChartPrintExportOptions {
|
|
7
|
+
export interface ChartExportOptions {
|
|
13
8
|
/**
|
|
14
9
|
* The name of the file without the extension.
|
|
15
10
|
* @default The title of the document the chart belongs to
|
|
16
11
|
*/
|
|
17
12
|
fileName?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Callback function that is called before the export is triggered.
|
|
15
|
+
* It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
|
|
16
|
+
* removing elements, etc.
|
|
17
|
+
* @param {HTMLIFrameElement} iframe containing the chart to be exported.
|
|
18
|
+
* @returns {Promise<void> | void} A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
|
|
19
|
+
*/
|
|
20
|
+
onBeforeExport?: (iframe: HTMLIFrameElement) => Promise<void> | void;
|
|
21
|
+
/**
|
|
22
|
+
* If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
|
|
23
|
+
* Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
|
|
24
|
+
* @default true
|
|
25
|
+
*/
|
|
26
|
+
copyStyles?: boolean;
|
|
18
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* The options to apply on the Print export.
|
|
30
|
+
* @demos
|
|
31
|
+
* - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
|
|
32
|
+
*/
|
|
33
|
+
export interface ChartPrintExportOptions extends ChartExportOptions {}
|
|
19
34
|
/**
|
|
20
35
|
* The options to apply on the image export.
|
|
21
36
|
* @demos
|
|
22
37
|
* - [Image export](https://mui.com/x/react-charts/export/#export-as-image)
|
|
23
38
|
*/
|
|
24
|
-
export interface ChartImageExportOptions {
|
|
25
|
-
/**
|
|
26
|
-
* The name of the file without the extension.
|
|
27
|
-
* @default The title of the document the chart belongs to
|
|
28
|
-
*/
|
|
29
|
-
fileName?: string;
|
|
39
|
+
export interface ChartImageExportOptions extends ChartExportOptions {
|
|
30
40
|
/**
|
|
31
41
|
* The format of the image to be exported.
|
|
32
42
|
* Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
|
|
2
2
|
import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
|
|
3
3
|
export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
|
|
4
|
-
export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
4
|
+
export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
5
5
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
6
6
|
} & {
|
|
7
7
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
8
8
|
}, boolean, any[]>;
|
|
9
|
-
export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
|
|
9
|
+
export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
|
|
10
10
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
11
11
|
} & {
|
|
12
12
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
@@ -14,7 +14,7 @@ export declare const selectorChartZoomIsEnabled: import("reselect").Selector<imp
|
|
|
14
14
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
15
15
|
}, boolean, []>;
|
|
16
16
|
export declare const selectorChartAxisZoomData: import("reselect").Selector<any, import("@mui/x-charts/internals").ZoomData | undefined, [axisId: AxisId]>;
|
|
17
|
-
export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
17
|
+
export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
18
18
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
19
19
|
} & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
|
|
20
20
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
@@ -23,7 +23,7 @@ export declare const selectorChartCanZoomOut: import("reselect").Selector<import
|
|
|
23
23
|
} & {
|
|
24
24
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
25
25
|
}, boolean, any[]>;
|
|
26
|
-
export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
26
|
+
export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
27
27
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
28
28
|
} & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
|
|
29
29
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
package/index.js
CHANGED
|
@@ -25,7 +25,9 @@ async function exportImage(element, params) {
|
|
|
25
25
|
const {
|
|
26
26
|
fileName,
|
|
27
27
|
type = 'image/png',
|
|
28
|
-
quality = 0.9
|
|
28
|
+
quality = 0.9,
|
|
29
|
+
onBeforeExport,
|
|
30
|
+
copyStyles = true
|
|
29
31
|
} = params ?? {};
|
|
30
32
|
const drawDocumentPromise = getDrawDocument();
|
|
31
33
|
const {
|
|
@@ -53,11 +55,15 @@ async function exportImage(element, params) {
|
|
|
53
55
|
exportDoc.body.style.margin = '0px';
|
|
54
56
|
const rootCandidate = element.getRootNode();
|
|
55
57
|
const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
|
|
56
|
-
|
|
58
|
+
if (copyStyles) {
|
|
59
|
+
await Promise.all((0, _export.loadStyleSheets)(exportDoc, root));
|
|
60
|
+
}
|
|
57
61
|
resolve();
|
|
58
62
|
};
|
|
59
63
|
doc.body.appendChild(iframe);
|
|
60
|
-
|
|
64
|
+
await iframeLoadPromise;
|
|
65
|
+
await onBeforeExport?.(iframe);
|
|
66
|
+
const drawDocument = await drawDocumentPromise;
|
|
61
67
|
try {
|
|
62
68
|
await drawDocument(iframe.contentDocument, canvas, {
|
|
63
69
|
// Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
|
|
@@ -9,7 +9,9 @@ var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"))
|
|
|
9
9
|
var _export = require("@mui/x-internals/export");
|
|
10
10
|
var _common = require("./common");
|
|
11
11
|
function printChart(element, {
|
|
12
|
-
fileName
|
|
12
|
+
fileName,
|
|
13
|
+
onBeforeExport,
|
|
14
|
+
copyStyles = true
|
|
13
15
|
} = {}) {
|
|
14
16
|
const printWindow = (0, _common.createExportIframe)(fileName);
|
|
15
17
|
const doc = (0, _ownerDocument.default)(element);
|
|
@@ -21,7 +23,9 @@ function printChart(element, {
|
|
|
21
23
|
printDoc.body.innerHTML = container.innerHTML;
|
|
22
24
|
const rootCandidate = element.getRootNode();
|
|
23
25
|
const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
|
|
24
|
-
|
|
26
|
+
if (copyStyles) {
|
|
27
|
+
await Promise.all((0, _export.loadStyleSheets)(printDoc, root));
|
|
28
|
+
}
|
|
25
29
|
const mediaQueryList = printWindow.contentWindow.matchMedia('print');
|
|
26
30
|
mediaQueryList.addEventListener('change', mql => {
|
|
27
31
|
const isAfterPrint = mql.matches === false;
|
|
@@ -29,6 +33,7 @@ function printChart(element, {
|
|
|
29
33
|
doc.body.removeChild(printWindow);
|
|
30
34
|
}
|
|
31
35
|
});
|
|
36
|
+
await onBeforeExport?.(printWindow);
|
|
32
37
|
printWindow.contentWindow.print();
|
|
33
38
|
};
|
|
34
39
|
doc.body.appendChild(printWindow);
|
|
@@ -4,29 +4,39 @@ export type UseChartProExportDefaultizedParameters = UseChartProExportParameters
|
|
|
4
4
|
export interface UseChartProExportState {
|
|
5
5
|
export: {};
|
|
6
6
|
}
|
|
7
|
-
|
|
8
|
-
* The options to apply on the Print export.
|
|
9
|
-
* @demos
|
|
10
|
-
* - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
|
|
11
|
-
*/
|
|
12
|
-
export interface ChartPrintExportOptions {
|
|
7
|
+
export interface ChartExportOptions {
|
|
13
8
|
/**
|
|
14
9
|
* The name of the file without the extension.
|
|
15
10
|
* @default The title of the document the chart belongs to
|
|
16
11
|
*/
|
|
17
12
|
fileName?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Callback function that is called before the export is triggered.
|
|
15
|
+
* It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
|
|
16
|
+
* removing elements, etc.
|
|
17
|
+
* @param {HTMLIFrameElement} iframe containing the chart to be exported.
|
|
18
|
+
* @returns {Promise<void> | void} A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
|
|
19
|
+
*/
|
|
20
|
+
onBeforeExport?: (iframe: HTMLIFrameElement) => Promise<void> | void;
|
|
21
|
+
/**
|
|
22
|
+
* If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
|
|
23
|
+
* Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
|
|
24
|
+
* @default true
|
|
25
|
+
*/
|
|
26
|
+
copyStyles?: boolean;
|
|
18
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* The options to apply on the Print export.
|
|
30
|
+
* @demos
|
|
31
|
+
* - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
|
|
32
|
+
*/
|
|
33
|
+
export interface ChartPrintExportOptions extends ChartExportOptions {}
|
|
19
34
|
/**
|
|
20
35
|
* The options to apply on the image export.
|
|
21
36
|
* @demos
|
|
22
37
|
* - [Image export](https://mui.com/x/react-charts/export/#export-as-image)
|
|
23
38
|
*/
|
|
24
|
-
export interface ChartImageExportOptions {
|
|
25
|
-
/**
|
|
26
|
-
* The name of the file without the extension.
|
|
27
|
-
* @default The title of the document the chart belongs to
|
|
28
|
-
*/
|
|
29
|
-
fileName?: string;
|
|
39
|
+
export interface ChartImageExportOptions extends ChartExportOptions {
|
|
30
40
|
/**
|
|
31
41
|
* The format of the image to be exported.
|
|
32
42
|
* Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
|
|
2
2
|
import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
|
|
3
3
|
export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
|
|
4
|
-
export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
4
|
+
export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
5
5
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
6
6
|
} & {
|
|
7
7
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
8
8
|
}, boolean, any[]>;
|
|
9
|
-
export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
|
|
9
|
+
export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
|
|
10
10
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
11
11
|
} & {
|
|
12
12
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
@@ -14,7 +14,7 @@ export declare const selectorChartZoomIsEnabled: import("reselect").Selector<imp
|
|
|
14
14
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
15
15
|
}, boolean, []>;
|
|
16
16
|
export declare const selectorChartAxisZoomData: import("reselect").Selector<any, import("@mui/x-charts/internals").ZoomData | undefined, [axisId: AxisId]>;
|
|
17
|
-
export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
17
|
+
export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
18
18
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
19
19
|
} & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
|
|
20
20
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
@@ -23,7 +23,7 @@ export declare const selectorChartCanZoomOut: import("reselect").Selector<import
|
|
|
23
23
|
} & {
|
|
24
24
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
25
25
|
}, boolean, any[]>;
|
|
26
|
-
export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
26
|
+
export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
|
|
27
27
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
|
28
28
|
} & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
|
|
29
29
|
cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-charts-pro",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.8.0",
|
|
4
4
|
"author": "MUI Team",
|
|
5
5
|
"description": "The Pro plan edition of the MUI X Charts components.",
|
|
6
6
|
"main": "./index.js",
|
|
@@ -30,14 +30,14 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@babel/runtime": "^7.27.6",
|
|
33
|
-
"@mui/utils": "^7.
|
|
33
|
+
"@mui/utils": "^7.2.0",
|
|
34
34
|
"clsx": "^2.1.1",
|
|
35
35
|
"prop-types": "^15.8.1",
|
|
36
|
-
"@mui/x-charts": "8.7.0",
|
|
37
|
-
"@mui/x-internal-gestures": "0.2.0",
|
|
38
36
|
"@mui/x-charts-vendor": "8.5.3",
|
|
39
|
-
"@mui/x-
|
|
40
|
-
"@mui/x-
|
|
37
|
+
"@mui/x-charts": "8.8.0",
|
|
38
|
+
"@mui/x-license": "8.8.0",
|
|
39
|
+
"@mui/x-internal-gestures": "0.2.1",
|
|
40
|
+
"@mui/x-internals": "8.8.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@emotion/react": "^11.9.0",
|