@perses-dev/components 0.0.0-snapshot-color-palette-gen-test-0ebddd6 → 0.0.0-snapshot-saving-defaults-refinements-1b25cec

package/dist/cjs/Table/hooks/useTableKeyboardNav.js

@@ -0,0 +1,99 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTableKeyboardNav", {
+    enumerable: true,
+    get: ()=>useTableKeyboardNav
+});
+const _react = require("react");
+const DEFAULT_ACTIVE_CELL = {
+    row: 0,
+    column: 0
+};
+const ARROW_KEYS = [
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowUp',
+    'ArrowDown'
+];
+function isArrowKey(key) {
+    return ARROW_KEYS.includes(key);
+}
+function useTableKeyboardNav({ maxRows , maxColumns , onActiveCellChange  }) {
+    const [activeCell, setActiveCell] = (0, _react.useState)(DEFAULT_ACTIVE_CELL);
+    const [isActive, setIsActive] = (0, _react.useState)(false);
+    const handleCellFocus = (cellPosition)=>{
+        if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {
+            return;
+        }
+        setIsActive(true);
+        setActiveCell(cellPosition);
+    };
+    const handleKeyDown = (0, _react.useCallback)((e)=>{
+        // Including some of the basic a11y keyboard interaction patterns from:
+        // https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+        // TODO: add other keyboard combos.
+        const key = e.key;
+        if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {
+            setActiveCell((curActiveCell)=>{
+                let nextRow = curActiveCell.row;
+                let nextColumn = curActiveCell.column;
+                if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {
+                    e.preventDefault();
+                    nextColumn += 1;
+                } else if (key === 'ArrowLeft' && nextColumn > 0) {
+                    e.preventDefault();
+                    nextColumn -= 1;
+                } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {
+                    e.preventDefault();
+                    nextRow += 1;
+                } else if (key === 'ArrowUp' && nextRow > 0) {
+                    e.preventDefault();
+                    nextRow -= 1;
+                } else if (key === 'Home') {
+                    e.preventDefault();
+                    nextRow = 0;
+                    nextColumn = 0;
+                } else if (key === 'End') {
+                    e.preventDefault();
+                    nextRow = maxRows - 1;
+                    nextColumn = maxColumns - 1;
+                }
+                const defaultNewPosition = {
+                    column: nextColumn,
+                    row: nextRow
+                };
+                const newPosition = (onActiveCellChange === null || onActiveCellChange === void 0 ? void 0 : onActiveCellChange(e, curActiveCell, defaultNewPosition)) || defaultNewPosition;
+                if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {
+                    // Return original to avoid creating a new object if nothing
+                    // changed.
+                    return curActiveCell;
+                }
+                return newPosition;
+            });
+        }
+    }, [
+        maxColumns,
+        maxRows,
+        onActiveCellChange
+    ]);
+    return {
+        activeCell,
+        isActive,
+        onTableKeyDown: handleKeyDown,
+        onCellFocus: handleCellFocus
+    };
+}

package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js

@@ -0,0 +1,93 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useVirtualizedTableKeyboardNav", {
+    enumerable: true,
+    get: ()=>useVirtualizedTableKeyboardNav
+});
+const _useTableKeyboardNav = require("./useTableKeyboardNav");
+function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows , maxColumns  }) {
+    const baseKeyboard = (0, _useTableKeyboardNav.useTableKeyboardNav)({
+        maxRows,
+        maxColumns,
+        onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
+            const key = e.key;
+            const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
+            var ref;
+            const nextRow = (ref = defaultNewPosition === null || defaultNewPosition === void 0 ? void 0 : defaultNewPosition.row) !== null && ref !== void 0 ? ref : currentPosition.row;
+            if (key === 'ArrowDown' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref1;
+                    (ref1 = virtualTable.current) === null || ref1 === void 0 ? void 0 : ref1.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'end'
+                    });
+                }
+            } else if (key === 'ArrowUp' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref2;
+                    (ref2 = virtualTable.current) === null || ref2 === void 0 ? void 0 : ref2.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'start'
+                    });
+                }
+            } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
+                var // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                ref3;
+                (ref3 = virtualTable.current) === null || ref3 === void 0 ? void 0 : ref3.scrollToIndex({
+                    index: Math.max(nextRow - 1, 0),
+                    align: 'start'
+                });
+            } else if (key === 'PageDown') {
+                var ref4;
+                // Full handling of logic for `PageDown` because there is no default.
+                e.preventDefault();
+                let nextRow1 = currentPosition.row;
+                // Add 1 to account for header
+                nextRow1 = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
+                (ref4 = virtualTable.current) === null || ref4 === void 0 ? void 0 : ref4.scrollToIndex({
+                    index: nextRow1 - 1,
+                    align: 'start'
+                });
+                return {
+                    row: nextRow1,
+                    column: currentPosition.column
+                };
+            } else if (key === 'PageUp') {
+                var ref5;
+                // Full handling of logic for `PageUp` because there is no default.
+                let nextRow2 = currentPosition.row;
+                // Minus 1 to account for header
+                nextRow2 = Math.max(0, visibleRange.current.startIndex - 1);
+                (ref5 = virtualTable.current) === null || ref5 === void 0 ? void 0 : ref5.scrollToIndex({
+                    index: nextRow2 - 1,
+                    align: 'end'
+                });
+                return {
+                    row: nextRow2,
+                    column: currentPosition.column
+                };
+            }
+            return defaultNewPosition;
+        }
+    });
+    return baseKeyboard;
+}

package/dist/cjs/Table/index.js

@@ -0,0 +1,33 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getTableCellLayout", {
+    enumerable: true,
+    get: ()=>_tableModel.getTableCellLayout
+});
+_exportStar(require("./Table"), exports);
+const _tableModel = require("./model/table-model");
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/Table/model/table-model.js

@@ -0,0 +1,80 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getTableCellLayout: ()=>getTableCellLayout,
+    persesColumnsToTanstackColumns: ()=>persesColumnsToTanstackColumns
+});
+function calculateTableCellHeight(lineHeight, paddingY) {
+    // Doing a bunch of math to enforce height to avoid weirdness with mismatched
+    // heights based on customization of cell contents.
+    const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight !== null && lineHeight !== void 0 ? lineHeight : 0;
+    const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
+    return lineHeightNum + verticalPaddingNum * 2;
+}
+function getTableCellLayout(theme, density) {
+    if (density === 'compact') {
+        const paddingY = theme.spacing(0.5);
+        const paddingX = theme.spacing(0.25);
+        const lineHeight = theme.typography.body2.lineHeight;
+        return {
+            padding: `${paddingY} ${paddingX}`,
+            height: calculateTableCellHeight(lineHeight, paddingY),
+            fontSize: theme.typography.body2.fontSize,
+            lineHeight: lineHeight
+        };
+    }
+    // standard density
+    const paddingY1 = theme.spacing(1);
+    const paddingX1 = theme.spacing(1.25);
+    const lineHeight1 = theme.typography.body1.lineHeight;
+    return {
+        padding: `${paddingY1} ${paddingX1}`,
+        height: calculateTableCellHeight(lineHeight1, paddingY1),
+        fontSize: theme.typography.body1.fontSize,
+        lineHeight: lineHeight1
+    };
+}
+function persesColumnsToTanstackColumns(columns) {
+    const tableCols = columns.map(({ width , ...otherProps })=>{
+        // Tanstack Table does not support an "auto" value to naturally size to fit
+        // the space in a table. We translate our custom "auto" setting to 0 size
+        // for these columns, so it is easy to fall back to auto when rendering.
+        // Taking from a recommendation in this github discussion:
+        // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326
+        const sizeProps = width === 'auto' || width === undefined ? {
+            // All zero values are used as shorthand for "auto" when rendering
+            // because it makes it easy to fall back. (e.g. `row.size || "auto"`)
+            size: 0,
+            minSize: 0,
+            maxSize: 0
+        } : {
+            size: width
+        };
+        const result = {
+            ...otherProps,
+            ...sizeProps
+        };
+        return result;
+    });
+    return tableCols;
+}

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -24,7 +24,7 @@ const _seriesMarker = require("./SeriesMarker");
 const _seriesLabelsStack = require("./SeriesLabelsStack");
 const _tooltipModel = require("./tooltip-model");
 function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels =true  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , emphasizeText =false , wrapLabels =true  } = props;
     // metric __name__ comes before opening curly brace, ignore if not populated
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
@@ -73,21 +73,23 @@ function SeriesInfo(props) {
                                 maxWidth: _tooltipModel.TOOLTIP_LABELS_MAX_WIDTH,
                                 overflow: 'hidden',
                                 color: theme.palette.common.white,
+                                fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
+                        "aria-label": emphasizeText ? _tooltipModel.EMPHASIZED_SERIES_DESCRIPTION : _tooltipModel.NEARBY_SERIES_DESCRIPTION,
                         children: formattedSeriesInfo
                     })
                 ]
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                sx: {
-                    display: 'table-cell',
-                    paddingLeft: 1.5,
-                    textAlign: 'right',
-                    verticalAlign: 'top',
-                    fontWeight: '700'
-                },
+                sx: (theme)=>({
+                        display: 'table-cell',
+                        paddingLeft: 1.5,
+                        textAlign: 'right',
+                        verticalAlign: 'top',
+                        fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular
+                    }),
                 children: formattedY
             })
         ]

package/dist/cjs/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -19,12 +19,19 @@ Object.defineProperty(exports, "TimeSeriesTooltip", {
     get: ()=>TimeSeriesTooltip
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
-const _focusedSeries = require("./focused-series");
-const _tooltipModel = require("./tooltip-model");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
 const _tooltipContent = require("./TooltipContent");
+const _tooltipHeader = require("./TooltipHeader");
+const _nearbySeries = require("./nearby-series");
+const _tooltipModel = require("./tooltip-model");
 const _utils = require("./utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -64,34 +71,46 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
-    const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
+const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+    const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const mousePos = (0, _tooltipModel.useMousePosition)();
+    const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
+    const isTooltipPinned = pinnedPos !== null;
     if (mousePos === null || mousePos.target === null) return null;
-    // ensure user is hovering over a chart before checking for nearby series
+    // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const focusedSeries = (0, _focusedSeries.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart, unit);
     var ref;
-    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : 750;
-    var ref1;
-    const chartHeight = (ref1 = chart === null || chart === void 0 ? void 0 : chart.getHeight()) !== null && ref1 !== void 0 ? ref1 : 230;
-    const cursorTransform = (0, _utils.assembleTransform)(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
-    if (focusedSeries.length === 0) {
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
+    const cursorTransform = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    // Get series nearby the cursor and pass into tooltip content children.
+    const nearbySeries = (0, _nearbySeries.getNearbySeriesData)({
+        mousePos,
+        chartData,
+        pinnedPos,
+        chart,
+        unit,
+        showAllSeries
+    });
+    if (nearbySeries.length === 0) {
         return null;
     }
-    if (pinTooltip === true && pinnedPos === null) {
-        setPinnedPos(mousePos);
-    }
+    const totalSeries = chartData.timeSeries.length;
+    var ref1;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-            sx: (theme)=>({
+            ref: tooltipRef,
+            sx: (theme)=>{
+                var ref;
+                return {
+                    minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
                     maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
+                    padding: 0,
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    backgroundColor: '#2E313E',
+                    backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : _tooltipModel.TOOLTIP_BG_COLOR_FALLBACK,
                     borderRadius: '6px',
                     color: '#fff',
                     fontSize: '11px',
@@ -103,13 +122,27 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
                     '&:hover': {
                         overflowY: 'auto'
                     }
-                }),
+                };
+            },
             style: {
                 transform: cursorTransform
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
-                focusedSeries: focusedSeries,
-                wrapLabels: wrapLabels
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
+                        nearbySeries: nearbySeries,
+                        totalSeries: totalSeries,
+                        isTooltipPinned: isTooltipPinned,
+                        showAllSeries: showAllSeries,
+                        onShowAllClick: (checked)=>setShowAllSeries(checked),
+                        onUnpinClick: onUnpinClick
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
+                        series: nearbySeries,
+                        wrapLabels: wrapLabels
+                    })
+                ]
             })
         })
     });

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -21,75 +21,36 @@ Object.defineProperty(exports, "TooltipContent", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _seriesInfo = require("./SeriesInfo");
 function TooltipContent(props) {
-    const { focusedSeries , wrapLabels  } = props;
-    const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
-    const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
-    const formatTimeSeriesHeader = (timeString)=>{
-        const date = new Date(timeString);
-        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
-        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                    variant: "caption",
-                    sx: (theme)=>({
-                            color: theme.palette.common.white
-                        }),
-                    children: formattedDate
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                    variant: "caption",
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("strong", {
-                        children: formattedTime
-                    })
-                })
-            ]
-        });
-    };
+    const { series , wrapLabels  } = props;
     const sortedFocusedSeries = (0, _react.useMemo)(()=>{
-        if (focusedSeries === null) return null;
-        return focusedSeries.sort((a, b)=>a.y > b.y ? -1 : 1);
+        if (series === null) return null;
+        return series.sort((a, b)=>a.y > b.y ? -1 : 1);
     }, [
-        focusedSeries
+        series
     ]);
-    if (sortedFocusedSeries !== null && seriesTime !== null) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            py: 1,
-            px: 1.5,
-            spacing: 0.5,
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                    variant: "caption",
-                    children: formatTimeSeriesHeader(seriesTime)
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
-                    sx: (theme)=>({
-                            borderColor: theme.palette.grey['500']
-                        })
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                    sx: {
-                        display: 'table'
-                    },
-                    children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor  })=>{
-                        if (datumIdx === null || seriesIdx === null) return null;
-                        const key = seriesIdx.toString() + datumIdx.toString();
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesInfo.SeriesInfo, {
-                            seriesName: seriesName,
-                            y: y,
-                            formattedY: formattedY,
-                            markerColor: markerColor,
-                            totalSeries: sortedFocusedSeries.length,
-                            wrapLabels: wrapLabels
-                        }, key);
-                    })
-                })
-            ]
-        });
-    } else {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+    if (series === null || sortedFocusedSeries === null) {
+        return null;
     }
+    // TODO: use react-virtuoso to improve performance
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: (theme)=>({
+                display: 'table',
+                padding: theme.spacing(0.5, 2)
+            }),
+        children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor , isClosestToCursor  })=>{
+            if (datumIdx === null || seriesIdx === null) return null;
+            const key = seriesIdx.toString() + datumIdx.toString();
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesInfo.SeriesInfo, {
+                seriesName: seriesName,
+                y: y,
+                formattedY: formattedY,
+                markerColor: markerColor,
+                totalSeries: sortedFocusedSeries.length,
+                wrapLabels: wrapLabels,
+                emphasizeText: isClosestToCursor
+            }, key);
+        })
+    });
 }