@perses-dev/components 0.43.0-rc2 → 0.44.0-rc0

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -28,7 +28,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const OptionsEditorGroup = ({ title , children , icon  })=>{
+const OptionsEditorGroup = ({ title, children, icon })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {

package/dist/cjs/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 function RefreshIntervalPicker(props) {
-    const { value , onChange , timeOptions , height  } = props;
+    const { value, onChange, timeOptions, height } = props;
     const formattedValue = value;
     // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select
     const customInterval = (0, _react.useMemo)(()=>{

package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js

@@ -22,9 +22,9 @@ Object.defineProperty(exports, "SettingsAutocomplete", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function SettingsAutocomplete({ options , renderInput =(params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
         ...params
-    }) , ...otherProps }) {
+    }), ...otherProps }) {
     const getOptionLabel = (option)=>{
         var _option_label;
         return (_option_label = option.label) !== null && _option_label !== void 0 ? _option_label : option.id;

package/dist/cjs/SortSelector/SortSelector.js

@@ -33,8 +33,8 @@ const SORT_OPTIONS = [
         label: 'Descending'
     }
 ];
-function SortSelector({ onChange , value ='desc'  }) {
-    const handleSortChange = (_, { id  })=>{
+function SortSelector({ onChange, value = 'desc' }) {
+    const handleSortChange = (_, { id })=>{
         onChange(id);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {

package/dist/cjs/StatChart/StatChart.js

@@ -51,7 +51,7 @@ const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
 function StatChart(props) {
     var _data_seriesData, _data_seriesData1;
-    const { width , height , data , format , color , sparkline , showSeriesName , valueFontSize  } = props;
+    const { width, height, data, format, color, sparkline, showSeriesName, valueFontSize } = props;
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     let formattedValue = '';
     if (data.calculatedValue === null) {
@@ -185,7 +185,7 @@ function StatChart(props) {
 }
 const SeriesName = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
-})(({ theme , padding , fontSize  })=>({
+})(({ theme, padding, fontSize })=>({
         color: theme.palette.text.secondary,
         padding: `${padding}px`,
         fontSize: `${fontSize}px`,
@@ -195,7 +195,7 @@ const SeriesName = (0, _material.styled)(_material.Typography, {
     }));
 const Value = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
-})(({ theme , color , padding , fontSize , sparkline  })=>({
+})(({ theme, color, padding, fontSize, sparkline })=>({
         color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
         fontSize: `${fontSize}px`,
         padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,

package/dist/cjs/StatChart/calculateFontSize.js

@@ -31,9 +31,9 @@ function getGlobalCanvasContext() {
     }
     return canvasContext;
 }
-function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize , fontSizeOverride  }) {
+function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize, fontSizeOverride }) {
     const ctx = getGlobalCanvasContext();
-    const { echartsTheme  } = (0, _ChartsProvider.useChartsTheme)();
+    const { echartsTheme } = (0, _ChartsProvider.useChartsTheme)();
     // if user has selected a font size in the settings, use it instead of calculating the optimal size
     if (fontSizeOverride !== undefined) {
         return Number(fontSizeOverride);

package/dist/cjs/Table/InnerTable.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "InnerTable", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
-const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme  })=>({
+const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme })=>({
         // This value is needed to have a consistent table layout when scrolling.
         tableLayout: 'fixed',
         borderCollapse: 'separate',
@@ -33,7 +33,7 @@ const TABLE_DENSITY_CONFIG = {
     compact: 'small',
     standard: 'medium'
 };
-const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , ...otherProps }, ref) {
+const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density, ...otherProps }, ref) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledMuiTable, {
         ...otherProps,
         tabIndex: -1,

package/dist/cjs/Table/Table.js

@@ -35,7 +35,7 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
 // does not do deep equality checking for objects and arrays.
 const DEFAULT_ROW_SELECTION = {};
 const DEFAULT_SORTING = [];
-function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , onSortingChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection =DEFAULT_ROW_SELECTION , sorting =DEFAULT_SORTING , rowSelectionVariant ='standard' , ...otherProps }) {
+function Table({ data, columns, density = 'standard', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, rowSelectionVariant = 'standard', ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
@@ -77,7 +77,7 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
         return {
             id: 'checkboxRowSelect',
             size: 28,
-            header: ({ table  })=>{
+            header: ({ table })=>{
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCheckbox.TableCheckbox, {
                     checked: table.getIsAllRowsSelected(),
                     indeterminate: table.getIsSomeRowsSelected(),
@@ -86,7 +86,7 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
                     density: density
                 });
             },
-            cell: ({ row , table  })=>{
+            cell: ({ row, table })=>{
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCheckbox.TableCheckbox, {
                     checked: row.getIsSelected(),
                     indeterminate: row.getIsSomeSelected(),

package/dist/cjs/Table/TableCell.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 const _tablemodel = require("./model/table-model");
-const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
+const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
         padding: 0,
         backgroundColor: 'inherit',
         '&.MuiTableCell-head': {
@@ -39,7 +39,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme
             borderRadius: 0
         }
     }));
-function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , description , ...otherProps }) {
+function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const elRef = (0, _react.useRef)();
     const isHeader = variant === 'head';

package/dist/cjs/Table/TableCheckbox.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "TableCheckbox", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function TableCheckbox({ color , density , ...otherProps }) {
+function TableCheckbox({ color, density, ...otherProps }) {
     const isCompact = density === 'compact';
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
         size: isCompact ? 'small' : 'medium',

package/dist/cjs/Table/TableHeaderCell.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "TableHeaderCell", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _TableCell = require("./TableCell");
-function TableHeaderCell({ onSort , sortDirection , nextSortDirection , children , ...cellProps }) {
+function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }) {
     const showSortLabel = !!onSort;
     const headerText = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         noWrap: true,

package/dist/cjs/Table/VirtualizedTable.js

@@ -33,7 +33,7 @@ const _TableHeaderCell = require("./TableHeaderCell");
 const _TableCell = require("./TableCell");
 const _VirtualizedTableContainer = require("./VirtualizedTableContainer");
 const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
-function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOver , onRowMouseOut , rows , columns , headers  }) {
+function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers }) {
     const virtuosoRef = (0, _react.useRef)(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -71,7 +71,7 @@ function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOv
             },
             TableHead: _TableHead.TableHead,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            TableRow: ({ item , ...props })=>{
+            TableRow: ({ item, ...props })=>{
                 const index = props['data-index'];
                 const row = rows[index];
                 if (!row) {

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

@@ -34,7 +34,7 @@ const ARROW_KEYS = [
 function isArrowKey(key) {
     return ARROW_KEYS.includes(key);
 }
-function useTableKeyboardNav({ maxRows , maxColumns , onActiveCellChange  }) {
+function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
     const [activeCell, setActiveCell] = (0, _react.useState)(DEFAULT_ACTIVE_CELL);
     const [isActive, setIsActive] = (0, _react.useState)(false);
     const handleCellFocus = (cellPosition)=>{

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

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "useVirtualizedTableKeyboardNav", {
     }
 });
 const _useTableKeyboardNav = require("./useTableKeyboardNav");
-function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows , maxColumns  }) {
+function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, maxColumns }) {
     const baseKeyboard = (0, _useTableKeyboardNav.useTableKeyboardNav)({
         maxRows,
         maxColumns,

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

@@ -35,7 +35,7 @@ function calculateTableCellHeight(lineHeight, paddingY) {
     const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
     return lineHeightNum + verticalPaddingNum * 2;
 }
-function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } = {}) {
+function getTableCellLayout(theme, density, { isLastColumn, isFirstColumn } = {}) {
     if (density === 'compact') {
         const paddingY = theme.spacing(0.5);
         const basePaddingX = theme.spacing(0.5);
@@ -65,7 +65,7 @@ function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } =
     };
 }
 function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , align , headerDescription , cellDescription , enableSorting , ...otherProps })=>{
+    const tableCols = columns.map(({ width, align, headerDescription, cellDescription, enableSorting, ...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.

package/dist/cjs/ThresholdsEditor/ThresholdColorPicker.js

@@ -31,7 +31,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function ThresholdColorPicker({ color , onColorChange , label  }) {
+function ThresholdColorPicker({ color, onColorChange, label }) {
     const [anchorEl, setAnchorEl] = _react.default.useState(null);
     const isOpen = Boolean(anchorEl);
     const openColorPicker = (event)=>{
@@ -40,7 +40,7 @@ function ThresholdColorPicker({ color , onColorChange , label  }) {
     const closeColorPicker = ()=>{
         setAnchorEl(null);
     };
-    const { thresholds: { defaultColor , palette  }  } = (0, _ChartsProvider.useChartsTheme)();
+    const { thresholds: { defaultColor, palette } } = (0, _ChartsProvider.useChartsTheme)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(ColorIconButton, {
@@ -83,7 +83,7 @@ function ThresholdColorPicker({ color , onColorChange , label  }) {
 }
 const ColorIconButton = (0, _material.styled)(_material.IconButton, {
     shouldForwardProp: (props)=>props !== 'isSelected' && props !== 'iconColor'
-})(({ iconColor , isSelected  })=>({
+})(({ iconColor, isSelected })=>({
         backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined',
         color: iconColor
     }));

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -30,7 +30,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function ThresholdInput({ inputRef , label , color , value , mode , onChange , onColorChange , onBlur , onDelete  }) {
+function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete }) {
     const [key, setKey] = (0, _react.useState)(0); // use key to cause input to lose focus when pressing enter
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         flex: 1,

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -57,7 +57,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -76,9 +78,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const DEFAULT_STEP = 10;
-function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercentMode  }) {
+function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }) {
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
-    const { thresholds: { defaultColor , palette  }  } = chartsTheme;
+    const { thresholds: { defaultColor, palette } } = chartsTheme;
     var _thresholds_defaultColor;
     const defaultThresholdColor = (_thresholds_defaultColor = thresholds === null || thresholds === void 0 ? void 0 : thresholds.defaultColor) !== null && _thresholds_defaultColor !== void 0 ? _thresholds_defaultColor : defaultColor;
     const [steps, setSteps] = (0, _react.useState)(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
@@ -203,7 +205,7 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
             });
         }
     };
-    var _thresholds_mode, _step_color, _ref;
+    var _thresholds_mode;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_OptionsEditorLayout.OptionsEditorGroup, {
         title: "Thresholds",
         icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InfoTooltip.InfoTooltip, {
@@ -248,8 +250,9 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                     ]
                 })
             }),
-            steps && steps.map((step, i)=>{
-                /*#__PURE__*/ return (0, _jsxruntime.jsx)(_ThresholdInput.ThresholdInput, {
+            steps && steps.map((step, i)=>/*#__PURE__*/ {
+                var _step_color, _ref;
+                return (0, _jsxruntime.jsx)(_ThresholdInput.ThresholdInput, {
                     inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
                     label: `T${i + 1}`,
                     color: (_ref = (_step_color = step.color) !== null && _step_color !== void 0 ? _step_color : palette[i]) !== null && _ref !== void 0 ? _ref : defaultThresholdColor,

package/dist/cjs/TimeChart/TimeChart.js

@@ -56,9 +56,9 @@ function _interop_require_default(obj) {
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , format , grid , isStackedBar =false , tooltipConfig =_TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }, ref) {
+const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, grid, isStackedBar = false, tooltipConfig = _TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     var _option_tooltip;
-    const { chartsTheme , enablePinning , lastTooltipPinnedCoords , setLastTooltipPinnedCoords  } = (0, _ChartsProvider.useChartsContext)();
+    const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = (0, _ChartsProvider.useChartsContext)();
     const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -66,9 +66,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
     const [pinnedCrosshair, setPinnedCrosshair] = (0, _react.useState)(null);
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
-    const { timeZone  } = (0, _TimeZoneProvider.useTimeZone)();
-    var _data_length;
-    const totalSeries = (_data_length = data === null || data === void 0 ? void 0 : data.length) !== null && _data_length !== void 0 ? _data_length : 0;
+    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
     let timeScale;
     if (timeScaleProp === undefined) {
         const commonTimeScale = (0, _core.getCommonTimeScale)(data);
@@ -93,7 +91,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
     }
     (0, _react.useImperativeHandle)(ref, ()=>{
         return {
-            highlightSeries ({ name  }) {
+            highlightSeries ({ name }) {
                 if (!chartRef.current) {
                     // when chart undef, do not highlight series when hovering over legend
                     return;
@@ -108,12 +106,10 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                     // when chart undef, do not clear highlight series
                     return;
                 }
-                (0, _utils.clearHighlightedSeries)(chartRef.current, totalSeries);
+                (0, _utils.clearHighlightedSeries)(chartRef.current);
             }
         };
-    }, [
-        totalSeries
-    ]);
+    }, []);
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
@@ -144,7 +140,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         onDataZoom,
         setTooltipPinnedCoords
     ]);
-    const { noDataOption  } = chartsTheme;
+    const { noDataOption } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
@@ -333,7 +329,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             }
         },
         onMouseDown: (e)=>{
-            const { clientX  } = e;
+            const { clientX } = e;
             setIsDragging(true);
             setStartX(clientX);
         },
@@ -342,7 +338,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             if (!(e.target instanceof HTMLCanvasElement)) {
                 return;
             }
-            const { clientX  } = e;
+            const { clientX } = e;
             if (isDragging) {
                 const deltaX = clientX - startX;
                 if (deltaX > 0) {
@@ -361,7 +357,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 setShowTooltip(false);
             }
             if (chartRef.current !== undefined) {
-                (0, _utils.clearHighlightedSeries)(chartRef.current, totalSeries);
+                (0, _utils.clearHighlightedSeries)(chartRef.current);
             }
         },
         onMouseEnter: ()=>{

package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js

@@ -34,11 +34,11 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , enablePinning =true , wrapLabels , format , onUnpinClick , pinnedPos , containerId  }) {
+const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef, chartData, enablePinning = true, wrapLabels, format, onUnpinClick, pinnedPos, containerId }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const mousePos = (0, _tooltipmodel.useMousePosition)();
-    const { height , width , ref: tooltipRef  } = (0, _useresizeobserver.default)();
-    const transform = (0, _react.useRef)('');
+    const { height, width, ref: tooltipRef } = (0, _useresizeobserver.default)();
+    const transform = (0, _react.useRef)();
     const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
@@ -65,13 +65,13 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
     if (!isTooltipPinned) {
         transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0, containerElement);
     }
-    var _theme_palette_designSystem_grey_;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Portal, {
         container: containerElement,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             ref: tooltipRef,
             sx: (theme)=>{
                 var _theme_palette_designSystem;
+                var _theme_palette_designSystem_grey_;
                 return {
                     minWidth: _tooltipmodel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
@@ -96,7 +96,8 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
                 };
             },
             style: {
-                transform: transform.current
+                transform: transform.current,
+                display: transform.current ? 'block' : 'none'
             },
             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                 spacing: 0.5,

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -26,7 +26,7 @@ const _SeriesMarker = require("./SeriesMarker");
 const _SeriesLabelsStack = require("./SeriesLabelsStack");
 const _tooltipmodel = require("./tooltip-model");
 function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , emphasizeText =false , 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"}

package/dist/cjs/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _SeriesMarker = require("./SeriesMarker");
 function SeriesLabelsStack(props) {
-    const { formattedY , markerColor , metricName , metricLabels  } = props;
+    const { formattedY, markerColor, metricName, metricLabels } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 0.5,
         children: [

package/dist/cjs/TimeSeriesTooltip/SeriesMarker.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _utils = require("../utils");
 function SeriesMarker(props) {
-    const { markerColor , sx  } = props;
+    const { markerColor, sx } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: (0, _utils.combineSx)({
             display: 'inline-block',

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -34,11 +34,11 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId , chartRef , data , seriesMapping , enablePinning =true , wrapLabels , format , onUnpinClick , pinnedPos  }) {
+const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId, chartRef, data, seriesMapping, enablePinning = true, wrapLabels, format, onUnpinClick, pinnedPos }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
-    const transform = (0, _react.useRef)('');
+    const transform = (0, _react.useRef)();
     const mousePos = (0, _tooltipmodel.useMousePosition)();
-    const { height , width , ref: tooltipRef  } = (0, _useresizeobserver.default)();
+    const { height, width, ref: tooltipRef } = (0, _useresizeobserver.default)();
     const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null || data === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -25,7 +25,7 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _SeriesInfo = require("./SeriesInfo");
 function TooltipContent(props) {
-    const { series , wrapLabels  } = props;
+    const { series, wrapLabels } = props;
     const sortedFocusedSeries = (0, _react.useMemo)(()=>{
         if (series === null) return null;
         return series.sort((a, b)=>a.y > b.y ? -1 : 1);
@@ -41,7 +41,7 @@ function TooltipContent(props) {
                 display: 'table',
                 padding: theme.spacing(0.5, 2)
             }),
-        children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor , isClosestToCursor  })=>{
+        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, {

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -32,7 +32,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , enablePinning =true , onShowAllClick , onUnpinClick  }) {
+const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries, totalSeries, isTooltipPinned, showAllSeries, enablePinning = true, onShowAllClick, onUnpinClick }) {
     var _nearbySeries_;
     var _nearbySeries__date;
     const seriesTimeMs = (_nearbySeries__date = (_nearbySeries_ = nearbySeries[0]) === null || _nearbySeries_ === void 0 ? void 0 : _nearbySeries_.date) !== null && _nearbySeries__date !== void 0 ? _nearbySeries__date : null;
@@ -64,10 +64,10 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
     // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
     const showAllSeriesToggle = enablePinning && totalSeries > 5;
     const pinTooltipHelpText = isTooltipPinned ? _tooltipmodel.UNPIN_TOOLTIP_HELP_TEXT : _tooltipmodel.PIN_TOOLTIP_HELP_TEXT;
-    var _theme_palette_designSystem_grey_;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: (theme)=>{
             var _theme_palette_designSystem;
+            var _theme_palette_designSystem_grey_;
             return {
                 width: '100%',
                 maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,

package/dist/cjs/TimeSeriesTooltip/nearby-series.js

@@ -21,37 +21,38 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    INCREASE_NEARBY_SERIES_MULTIPLIER: function() {
-        return INCREASE_NEARBY_SERIES_MULTIPLIER;
-    },
     DYNAMIC_NEARBY_SERIES_MULTIPLIER: function() {
         return DYNAMIC_NEARBY_SERIES_MULTIPLIER;
     },
+    INCREASE_NEARBY_SERIES_MULTIPLIER: function() {
+        return INCREASE_NEARBY_SERIES_MULTIPLIER;
+    },
     SHOW_FEWER_SERIES_LIMIT: function() {
         return SHOW_FEWER_SERIES_LIMIT;
     },
     checkforNearbyTimeSeries: function() {
         return checkforNearbyTimeSeries;
     },
-    legacyCheckforNearbySeries: function() {
-        return legacyCheckforNearbySeries;
-    },
     getNearbySeriesData: function() {
         return getNearbySeriesData;
     },
-    legacyGetNearbySeriesData: function() {
-        return legacyGetNearbySeriesData;
+    getYBuffer: function() {
+        return getYBuffer;
     },
     isWithinPercentageRange: function() {
         return isWithinPercentageRange;
     },
-    getYBuffer: function() {
-        return getYBuffer;
+    legacyCheckforNearbySeries: function() {
+        return legacyCheckforNearbySeries;
+    },
+    legacyGetNearbySeriesData: function() {
+        return legacyGetNearbySeriesData;
     }
 });
 const _core = require("@perses-dev/core");
 const _model = require("../model");
 const _utils = require("../utils");
+const _tooltipmodel = require("./tooltip-model");
 const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)
 const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
 const SHOW_FEWER_SERIES_LIMIT = 5;
@@ -76,7 +77,7 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
     const firstTimeSeriesValues = (_data_ = data[0]) === null || _data_ === void 0 ? void 0 : _data_.values;
     const closestTimestamp = (0, _utils.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
     if (closestTimestamp === null) {
-        return [];
+        return _tooltipmodel.EMPTY_TOOLTIP_DATA;
     }
     // find the timestamp with data that is closest to cursorX
     for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
@@ -259,8 +260,8 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
     }
     return currentNearbySeriesData;
 }
-function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , chart , format , showAllSeries =false  }) {
-    if (chart === undefined || mousePos === null) return [];
+function getNearbySeriesData({ mousePos, pinnedPos, data, seriesMapping, chart, format, showAllSeries = false }) {
+    if (chart === undefined || mousePos === null) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
     if (mousePos.target !== null) {
@@ -280,8 +281,9 @@ function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , cha
         mousePos = pinnedPos;
         cursorTargetMatchesChart = true;
     }
-    if (cursorTargetMatchesChart === false) return [];
-    if (chart['_model'] === undefined || data === null) return [];
+    if (cursorTargetMatchesChart === false || data === null || chart['_model'] === undefined) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
+    // mousemove position undefined when not hovering over chart canvas
+    if (mousePos.plotCanvas.x === undefined || mousePos.plotCanvas.y === undefined) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
     const pointInGrid = (0, _utils.getPointInGrid)(mousePos.plotCanvas.x, mousePos.plotCanvas.y, chart);
     if (pointInGrid !== null) {
         const chartModel = chart['_model'];
@@ -294,9 +296,10 @@ function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , cha
         });
         return checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format);
     }
-    return [];
+    // no nearby series found
+    return _tooltipmodel.EMPTY_TOOLTIP_DATA;
 }
-function legacyGetNearbySeriesData({ mousePos , pinnedPos , chartData , chart , format , showAllSeries =false  }) {
+function legacyGetNearbySeriesData({ mousePos, pinnedPos, chartData, chart, format, showAllSeries = false }) {
     if (chart === undefined || mousePos === null) return [];
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
@@ -340,13 +343,13 @@ function legacyGetNearbySeriesData({ mousePos , pinnedPos , chartData , chart ,
     }
     return [];
 }
-function isWithinPercentageRange({ valueToCheck , baseValue , percentage  }) {
+function isWithinPercentageRange({ valueToCheck, baseValue, percentage }) {
     const range = percentage / 100 * baseValue;
     const lowerBound = baseValue - range;
     const upperBound = baseValue + range;
     return valueToCheck >= lowerBound && valueToCheck <= upperBound;
 }
-function getYBuffer({ yInterval , totalSeries , showAllSeries =false  }) {
+function getYBuffer({ yInterval, totalSeries, showAllSeries = false }) {
     if (showAllSeries) {
         return yInterval * 10; // roughly correlates with grid so entire canvas is searched
     }