@perses-dev/components 0.50.1 → 0.51.0-beta.0

package/dist/cjs/Table/Table.js

@@ -39,7 +39,7 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
     const theme = (0, _material.useTheme)();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
-        onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
+        onRowSelectionChange?.(newRowSelection);
     };
     const handleRowSelectionEvent = (0, _react.useCallback)((table, row, isModified)=>{
         if (rowSelectionVariant === 'standard' || isModified) {
@@ -53,7 +53,7 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
                 table.toggleAllRowsSelected();
             } else {
                 // Focus the selected row.
-                onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange({
+                onRowSelectionChange?.({
                     [row.id]: true
                 });
             }
@@ -64,14 +64,14 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
     ]);
     const handleCheckboxChange = (0, _react.useCallback)((e, table, row)=>{
         const nativePointerEvent = e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent) ? e.nativeEvent : undefined;
-        const isModifed = !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.metaKey) || !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.shiftKey);
+        const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;
         handleRowSelectionEvent(table, row, isModifed);
     }, [
         handleRowSelectionEvent
     ]);
     const handleSortingChange = (sortingUpdater)=>{
         const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;
-        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
+        onSortingChange?.(newSorting);
     };
     const checkboxColumn = (0, _react.useMemo)(()=>{
         return {
@@ -93,7 +93,7 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
                     onChange: (e)=>{
                         handleCheckboxChange(e, table, row);
                     },
-                    color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
+                    color: getCheckboxColor?.(row.original),
                     density: density
                 });
             },

package/dist/cjs/Table/TableCell.js

@@ -51,9 +51,8 @@ function TableCell({ children, density, variant, width, focusState = 'none', onF
         focusState
     ]);
     const handleFocus = (e)=>{
-        var _e_currentTarget;
         // From https://zellwk.com/blog/keyboard-focusable-elements/
-        const nestedFocusTarget = (_e_currentTarget = e.currentTarget) === null || _e_currentTarget === void 0 ? void 0 : _e_currentTarget.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
+        const nestedFocusTarget = e.currentTarget?.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
         if (nestedFocusTarget) {
             // If the cell has a focusable child, focus it instead. Mostly used for
             // checkbox cells, but could have other uses.
@@ -66,7 +65,7 @@ function TableCell({ children, density, variant, width, focusState = 'none', onF
         // plays with the triggering of focus with keyboard interactions.
         // These report that a focus event happened, so we can adjust the current
         // tabindex and focuses to the right cell.
-        onFocusTrigger === null || onFocusTrigger === void 0 ? void 0 : onFocusTrigger(e);
+        onFocusTrigger?.(e);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledMuiTableCell, {
         ...otherProps,
@@ -93,7 +92,7 @@ function TableCell({ children, density, variant, width, focusState = 'none', onF
                 minWidth: '100%',
                 whiteSpace: 'nowrap',
                 overflow: 'visible',
-                backgroundColor: `${backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.palette.background.default} !important`,
+                backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,
                 outline: `solid 1px ${theme.palette.info.main}`,
                 outlineOffset: '-1px'
             }
@@ -118,8 +117,8 @@ function TableCell({ children, density, variant, width, focusState = 'none', onF
                 flexDirection: 'inherit'
             },
             style: {
-                backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'inherit',
-                color: color !== null && color !== void 0 ? color : 'inherit'
+                backgroundColor: backgroundColor ?? 'inherit',
+                color: color ?? 'inherit'
             },
             title: description,
             "aria-label": description,

package/dist/cjs/Table/VirtualizedTable.js

@@ -86,10 +86,10 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, onRowCli
                     onClick: (e)=>onRowClick(e, row.id),
                     density: density,
                     onMouseOver: (e)=>{
-                        onRowMouseOver === null || onRowMouseOver === void 0 ? void 0 : onRowMouseOver(e, rowEventOpts);
+                        onRowMouseOver?.(e, rowEventOpts);
                     },
                     onMouseOut: (e)=>{
-                        onRowMouseOut === null || onRowMouseOut === void 0 ? void 0 : onRowMouseOut(e, rowEventOpts);
+                        onRowMouseOut?.(e, rowEventOpts);
                     }
                 });
             },
@@ -123,7 +123,6 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, onRowCli
                         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableRow.TableRow, {
                             density: density,
                             children: headerGroup.headers.map((header, i, headers)=>{
-                                var _column_columnDef_meta, _column_columnDef_meta1;
                                 const column = header.column;
                                 const position = {
                                     row: 0,
@@ -136,10 +135,10 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, onRowCli
                                     sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
                                     nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
                                     width: column.getSize() || defaultColumnWidth,
-                                    align: (_column_columnDef_meta = column.columnDef.meta) === null || _column_columnDef_meta === void 0 ? void 0 : _column_columnDef_meta.align,
+                                    align: column.columnDef.meta?.align,
                                     variant: "head",
                                     density: density,
-                                    description: (_column_columnDef_meta1 = column.columnDef.meta) === null || _column_columnDef_meta1 === void 0 ? void 0 : _column_columnDef_meta1.headerDescription,
+                                    description: column.columnDef.meta?.headerDescription,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                                     isFirstColumn: i === 0,
@@ -158,17 +157,16 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, onRowCli
                 }
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
                     children: row.getVisibleCells().map((cell, i, cells)=>{
-                        var _cell_column_columnDef_meta, _cell_column_columnDef_meta1;
                         const position = {
                             // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
                         const cellContext = cell.getContext();
-                        const cellConfig = cellConfigs === null || cellConfigs === void 0 ? void 0 : cellConfigs[cellContext.cell.id];
+                        const cellConfig = cellConfigs?.[cellContext.cell.id];
                         const cellRenderFn = cell.column.columnDef.cell;
                         const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
-                        const cellDescriptionDef = (_cell_column_columnDef_meta = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : _cell_column_columnDef_meta.cellDescription;
+                        const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
                         let description = undefined;
                         if (typeof cellDescriptionDef === 'function') {
                             // If the cell description is a function, set the value using
@@ -180,21 +178,20 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, onRowCli
                             // cell content.
                             description = cellContent;
                         }
-                        var _cellConfig_textColor, _cellConfig_backgroundColor;
                         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCell.TableCell, {
                             "data-testid": cell.id,
-                            title: description || (cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.text) || cellContent,
+                            title: description || cellConfig?.text || cellContent,
                             width: cell.column.getSize() || defaultColumnWidth,
-                            align: (_cell_column_columnDef_meta1 = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta1 === void 0 ? void 0 : _cell_column_columnDef_meta1.align,
+                            align: cell.column.columnDef.meta?.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                             isFirstColumn: i === 0,
                             isLastColumn: i === cells.length - 1,
                             description: description,
-                            color: (_cellConfig_textColor = cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.textColor) !== null && _cellConfig_textColor !== void 0 ? _cellConfig_textColor : undefined,
-                            backgroundColor: (_cellConfig_backgroundColor = cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.backgroundColor) !== null && _cellConfig_backgroundColor !== void 0 ? _cellConfig_backgroundColor : undefined,
-                            children: (cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.text) || cellContent
+                            color: cellConfig?.textColor ?? undefined,
+                            backgroundColor: cellConfig?.backgroundColor ?? undefined,
+                            children: cellConfig?.text || cellContent
                         }, cell.id);
                     })
                 });

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

@@ -78,7 +78,7 @@ function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
                     column: nextColumn,
                     row: nextRow
                 };
-                const newPosition = (onActiveCellChange === null || onActiveCellChange === void 0 ? void 0 : onActiveCellChange(e, curActiveCell, defaultNewPosition)) || defaultNewPosition;
+                const newPosition = 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.

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

@@ -28,14 +28,12 @@ function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, m
         onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
             const key = e.key;
             const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
-            var _defaultNewPosition_row;
-            const nextRow = (_defaultNewPosition_row = defaultNewPosition === null || defaultNewPosition === void 0 ? void 0 : defaultNewPosition.row) !== null && _defaultNewPosition_row !== void 0 ? _defaultNewPosition_row : currentPosition.row;
+            const nextRow = defaultNewPosition?.row ?? 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 _virtualTable_current;
-                    (_virtualTable_current = virtualTable.current) === null || _virtualTable_current === void 0 ? void 0 : _virtualTable_current.scrollToIndex({
+                    virtualTable.current?.scrollToIndex({
                         index: nextRow - 1,
                         align: 'end'
                     });
@@ -44,28 +42,25 @@ function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, m
                 // 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 _virtualTable_current1;
-                    (_virtualTable_current1 = virtualTable.current) === null || _virtualTable_current1 === void 0 ? void 0 : _virtualTable_current1.scrollToIndex({
+                    virtualTable.current?.scrollToIndex({
                         index: nextRow - 1,
                         align: 'start'
                     });
                 }
             } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
-                var // Use default cell position. Shift the virtual table scroll position
+                // Use default cell position. Shift the virtual table scroll position
                 // when needed to make the active cell visible.
-                _virtualTable_current2;
-                (_virtualTable_current2 = virtualTable.current) === null || _virtualTable_current2 === void 0 ? void 0 : _virtualTable_current2.scrollToIndex({
+                virtualTable.current?.scrollToIndex({
                     index: Math.max(nextRow - 1, 0),
                     align: 'start'
                 });
             } else if (key === 'PageDown') {
-                var _virtualTable_current3;
                 // Full handling of logic for `PageDown` because there is no default.
                 e.preventDefault();
                 let nextRow = currentPosition.row;
                 // Add 1 to account for header
                 nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
-                (_virtualTable_current3 = virtualTable.current) === null || _virtualTable_current3 === void 0 ? void 0 : _virtualTable_current3.scrollToIndex({
+                virtualTable.current?.scrollToIndex({
                     index: nextRow - 1,
                     align: 'start'
                 });
@@ -74,12 +69,11 @@ function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, m
                     column: currentPosition.column
                 };
             } else if (key === 'PageUp') {
-                var _virtualTable_current4;
                 // Full handling of logic for `PageUp` because there is no default.
                 let nextRow = currentPosition.row;
                 // Minus 1 to account for header
                 nextRow = Math.max(0, visibleRange.current.startIndex - 1);
-                (_virtualTable_current4 = virtualTable.current) === null || _virtualTable_current4 === void 0 ? void 0 : _virtualTable_current4.scrollToIndex({
+                virtualTable.current?.scrollToIndex({
                     index: nextRow - 1,
                     align: 'end'
                 });

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

@@ -35,7 +35,7 @@ const DEFAULT_COLUMN_WIDTH = 150;
 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 lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;
     const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
     return lineHeightNum + verticalPaddingNum * 2;
 }

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -81,28 +81,26 @@ const DEFAULT_STEP = 10;
 function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }) {
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     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);
+    const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;
+    const [steps, setSteps] = (0, _react.useState)(thresholds?.steps);
     (0, _react.useEffect)(()=>{
-        setSteps(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
+        setSteps(thresholds?.steps);
     }, [
-        thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps
+        thresholds?.steps
     ]);
     // every time a new threshold is added, we want to focus the recently added input
     const recentlyAddedInputRef = (0, _react.useRef)(null);
     const focusRef = (0, _react.useRef)(false);
     (0, _react.useEffect)(()=>{
-        var _recentlyAddedInputRef_current;
         if (!recentlyAddedInputRef.current || !focusRef.current) return;
-        (_recentlyAddedInputRef_current = recentlyAddedInputRef.current) === null || _recentlyAddedInputRef_current === void 0 ? void 0 : _recentlyAddedInputRef_current.focus();
+        recentlyAddedInputRef.current?.focus();
         focusRef.current = false;
     }, [
-        steps === null || steps === void 0 ? void 0 : steps.length
+        steps?.length
     ]);
     const handleThresholdValueChange = (e, i)=>{
         setSteps((0, _immer.default)(steps, (draft)=>{
-            const step = draft === null || draft === void 0 ? void 0 : draft[i];
+            const step = draft?.[i];
             if (step) {
                 step.value = Number(e.target.value);
             }
@@ -176,14 +174,12 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
         } else {
             onChange((0, _immer.default)(thresholds, (draft)=>{
                 const steps = draft.steps;
-                if (steps === null || steps === void 0 ? void 0 : steps.length) {
+                if (steps?.length) {
                     const lastStep = steps[steps.length - 1];
-                    var _palette_steps_length;
-                    const color = (_palette_steps_length = palette[steps.length]) !== null && _palette_steps_length !== void 0 ? _palette_steps_length : getRandomColor(); // we will assign color from the palette first, then generate random color
-                    var _lastStep_value;
+                    const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color
                     steps.push({
                         color,
-                        value: ((_lastStep_value = lastStep === null || lastStep === void 0 ? void 0 : lastStep.value) !== null && _lastStep_value !== void 0 ? _lastStep_value : 0) + DEFAULT_STEP
+                        value: (lastStep?.value ?? 0) + DEFAULT_STEP
                     }); // set new threshold value to last step value + 10
                 } else if (steps) {
                     steps.push({
@@ -205,7 +201,6 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
             });
         }
     };
-    var _thresholds_mode;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_OptionsEditorLayout.OptionsEditorGroup, {
         title: "Thresholds",
         icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InfoTooltip.InfoTooltip, {
@@ -224,7 +219,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
                 control: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ToggleButtonGroup, {
                     exclusive: true,
                     disabled: disablePercentMode,
-                    value: (_thresholds_mode = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && _thresholds_mode !== void 0 ? _thresholds_mode : 'absolute',
+                    value: thresholds?.mode ?? 'absolute',
                     onChange: handleModeChange,
                     sx: {
                         height: '36px',
@@ -250,14 +245,12 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
                     ]
                 })
             }),
-            steps && steps.map((step, i)=>{
-                var _step_color, _ref;
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ThresholdInput.ThresholdInput, {
+            steps && steps.map((step, i)=>/*#__PURE__*/ (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,
+                    color: step.color ?? palette[i] ?? defaultThresholdColor,
                     value: step.value,
-                    mode: thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode,
+                    mode: thresholds?.mode,
                     onColorChange: (color)=>handleThresholdColorChange(color, i),
                     onChange: (e)=>{
                         handleThresholdValueChange(e, i);
@@ -266,8 +259,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
                         deleteThreshold(i);
                     },
                     onBlur: handleThresholdBlur
-                }, i);
-            }).reverse(),
+                }, i)).reverse(),
             !hideDefault && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_system.Stack, {
                 flex: 1,
                 direction: "row",

package/dist/cjs/TimeChart/TimeChart.js

@@ -57,7 +57,6 @@ function _interop_require_default(obj) {
     _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) {
-    var _option_tooltip;
     const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = (0, _ChartsProvider.useChartsContext)();
     const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = (0, _react.useRef)();
@@ -172,7 +171,6 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             ...seriesMapping,
             pinnedCrosshair
         ] : seriesMapping;
-        var _timeScale_rangeMs;
         const option = {
             dataset: dataset,
             series: updatedSeriesMapping,
@@ -182,7 +180,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 max: isLocalTimeZone ? timeScale.endMs : (0, _datefnstz.utcToZonedTime)(timeScale.endMs, timeZone),
                 axisLabel: {
                     hideOverlap: true,
-                    formatter: (0, _utils.getFormattedAxisLabel)((_timeScale_rangeMs = timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0)
+                    formatter: (0, _utils.getFormattedAxisLabel)(timeScale.rangeMs ?? 0)
                 },
                 axisPointer: {
                     snap: false
@@ -302,10 +300,9 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 setPinnedCrosshair((current)=>{
                     // Only add pinned crosshair line series when there is not one already in seriesMapping.
                     if (current === null) {
-                        var _data_;
                         const cursorX = pointInGrid[0];
                         // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
-                        const firstTimeSeriesValues = (_data_ = data[0]) === null || _data_ === void 0 ? void 0 : _data_.values;
+                        const firstTimeSeriesValues = data[0]?.values;
                         const closestTimestamp = (0, _utils.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
                         // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right
                         const pinnedCrosshair = (0, _merge.default)({}, _model.DEFAULT_PINNED_CROSSHAIR, {
@@ -378,7 +375,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             }
         },
         children: [
-            showTooltip === true && ((_option_tooltip = option.tooltip) === null || _option_tooltip === void 0 ? void 0 : _option_tooltip.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.TimeChartTooltip, {
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.TimeChartTooltip, {
                 containerId: chartsTheme.tooltipPortalContainerId,
                 chartRef: chartRef,
                 data: data,

package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js

@@ -44,8 +44,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
     // 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;
-    var _chart_getWidth;
-    const chartWidth = (_chart_getWidth = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && _chart_getWidth !== void 0 ? _chart_getWidth : _tooltipmodel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
+    const chartWidth = chart?.getWidth() ?? _tooltipmodel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     // Get series nearby the cursor and pass into tooltip content children.
     const nearbySeries = (0, _nearbyseries.legacyGetNearbySeriesData)({
         mousePos,
@@ -63,24 +62,21 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
     // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
     const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
     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);
+        transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);
     }
     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 {
+            sx: (theme)=>({
                     minWidth: _tooltipmodel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
-                    maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : _tooltipmodel.TOOLTIP_MAX_HEIGHT,
+                    maxHeight: maxHeight ?? _tooltipmodel.TOOLTIP_MAX_HEIGHT,
                     padding: 0,
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    backgroundColor: (_theme_palette_designSystem_grey_ = (_theme_palette_designSystem = theme.palette.designSystem) === null || _theme_palette_designSystem === void 0 ? void 0 : _theme_palette_designSystem.grey[800]) !== null && _theme_palette_designSystem_grey_ !== void 0 ? _theme_palette_designSystem_grey_ : _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
+                    backgroundColor: theme.palette.designSystem?.grey[800] ?? _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
                     borderRadius: '6px',
                     color: '#fff',
                     fontSize: '11px',
@@ -93,8 +89,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
                     '&:hover': {
                         overflowY: 'auto'
                     }
-                };
-            },
+                }),
             style: {
                 transform: transform.current,
                 display: transform.current ? 'block' : 'none'

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -31,8 +31,7 @@ function SeriesInfo(props) {
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
     const splitName = seriesName.split('{');
-    var _splitName_;
-    const seriesLabels = (_splitName_ = splitName[1]) !== null && _splitName_ !== void 0 ? _splitName_ : seriesName;
+    const seriesLabels = splitName[1] ?? seriesName;
     // remove curly braces that wrap labels
     const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');
     // determine whether to show labels on separate lines

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -44,13 +44,12 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
     // 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;
-    var _chart_getWidth;
-    const chartWidth = (_chart_getWidth = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && _chart_getWidth !== void 0 ? _chart_getWidth : _tooltipmodel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
+    const chartWidth = chart?.getWidth() ?? _tooltipmodel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const containerElement = containerId ? document.querySelector(containerId) : undefined;
     // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
     const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
     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);
+        transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);
     }
     // Get series nearby the cursor and pass into tooltip content children.
     const nearbySeries = (0, _nearbyseries.getNearbySeriesData)({

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -33,9 +33,7 @@ function _interop_require_default(obj) {
     };
 }
 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;
+    const seriesTimeMs = nearbySeries[0]?.date ?? null;
     if (seriesTimeMs === null) {
         return null;
     }
@@ -63,19 +61,15 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
     const showAllSeriesToggle = enablePinning && totalSeries > 5;
     const pinTooltipHelpText = isTooltipPinned ? _tooltipmodel.UNPIN_TOOLTIP_HELP_TEXT : _tooltipmodel.PIN_TOOLTIP_HELP_TEXT;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: (theme)=>{
-            var _theme_palette_designSystem;
-            var _theme_palette_designSystem_grey_;
-            return {
+        sx: (theme)=>({
                 width: '100%',
                 maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
                 padding: theme.spacing(1.5, 2, 0.5, 2),
-                backgroundColor: (_theme_palette_designSystem_grey_ = (_theme_palette_designSystem = theme.palette.designSystem) === null || _theme_palette_designSystem === void 0 ? void 0 : _theme_palette_designSystem.grey[800]) !== null && _theme_palette_designSystem_grey_ !== void 0 ? _theme_palette_designSystem_grey_ : _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
+                backgroundColor: theme.palette.designSystem?.grey[800] ?? _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
                 position: 'sticky',
                 top: 0,
                 left: 0
-            };
-        },
+            }),
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {

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

@@ -57,12 +57,9 @@ const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show i
 const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
 const SHOW_FEWER_SERIES_LIMIT = 5;
 function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format) {
-    var _data_;
     const currentNearbySeriesData = [];
-    var _pointInGrid_;
-    const cursorX = (_pointInGrid_ = pointInGrid[0]) !== null && _pointInGrid_ !== void 0 ? _pointInGrid_ : null;
-    var _pointInGrid_1;
-    const cursorY = (_pointInGrid_1 = pointInGrid[1]) !== null && _pointInGrid_1 !== void 0 ? _pointInGrid_1 : null;
+    const cursorX = pointInGrid[0] ?? null;
+    const cursorY = pointInGrid[1] ?? null;
     if (cursorX === null || cursorY === null) return currentNearbySeriesData;
     if (chart.dispatchAction === undefined) return currentNearbySeriesData;
     if (!Array.isArray(data)) return currentNearbySeriesData;
@@ -74,7 +71,7 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
     const totalSeries = data.length;
     const yValueCounts = new Map();
     // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
-    const firstTimeSeriesValues = (_data_ = data[0]) === null || _data_ === void 0 ? void 0 : _data_.values;
+    const firstTimeSeriesValues = data[0]?.values;
     const closestTimestamp = (0, _utils.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
     if (closestTimestamp === null) {
         return _tooltipmodel.EMPTY_TOOLTIP_DATA;
@@ -89,8 +86,7 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
         if (currentDatasetValues === undefined || !Array.isArray(currentDatasetValues)) break;
         const lineSeries = currentSeries;
         const currentSeriesName = lineSeries.name ? lineSeries.name.toString() : '';
-        var _lineSeries_color;
-        const markerColor = (_lineSeries_color = lineSeries.color) !== null && _lineSeries_color !== void 0 ? _lineSeries_color : '#000';
+        const markerColor = lineSeries.color ?? '#000';
         if (Array.isArray(data)) {
             for(let datumIdx = 0; datumIdx < currentDatasetValues.length; datumIdx++){
                 const nearbyTimeSeries = currentDatasetValues[datumIdx];
@@ -112,10 +108,9 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
                             if (isClosestToCursor) {
                                 // shows as bold in tooltip, customize 'emphasis' options in getTimeSeries util
                                 emphasizedSeriesIndexes.push(seriesIdx);
-                                var _yValueCounts_get;
                                 // Used to determine which datapoint to apply select styles to.
                                 // Accounts for cases where lines may be rendered directly on top of eachother.
-                                const duplicateValuesCount = (_yValueCounts_get = yValueCounts.get(yValue)) !== null && _yValueCounts_get !== void 0 ? _yValueCounts_get : 0;
+                                const duplicateValuesCount = yValueCounts.get(yValue) ?? 0;
                                 yValueCounts.set(yValue, duplicateValuesCount + 1);
                                 if (duplicateValuesCount > 0) {
                                     duplicateDatapoints.push({
@@ -164,10 +159,8 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
 }
 function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
     const currentNearbySeriesData = [];
-    var _pointInGrid_;
-    const cursorX = (_pointInGrid_ = pointInGrid[0]) !== null && _pointInGrid_ !== void 0 ? _pointInGrid_ : null;
-    var _pointInGrid_1;
-    const cursorY = (_pointInGrid_1 = pointInGrid[1]) !== null && _pointInGrid_1 !== void 0 ? _pointInGrid_1 : null;
+    const cursorX = pointInGrid[0] ?? null;
+    const cursorY = pointInGrid[1] ?? null;
     if (cursorX === null || cursorY === null) {
         return currentNearbySeriesData;
     }
@@ -181,12 +174,10 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
             if (currentSeries === undefined) break;
             if (currentNearbySeriesData.length >= _model.OPTIMIZED_MODE_SERIES_LIMIT) break;
             const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
-            var _currentSeries_color;
-            const markerColor = (_currentSeries_color = currentSeries.color) !== null && _currentSeries_color !== void 0 ? _currentSeries_color : '#000';
+            const markerColor = currentSeries.color ?? '#000';
             if (Array.isArray(currentSeries.data)) {
                 for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
-                    var _data_xAxis_datumIdx;
-                    const xValue = (_data_xAxis_datumIdx = data.xAxis[datumIdx]) !== null && _data_xAxis_datumIdx !== void 0 ? _data_xAxis_datumIdx : 0;
+                    const xValue = data.xAxis[datumIdx] ?? 0;
                     const yValue = currentSeries.data[datumIdx];
                     // ensure null values not displayed in tooltip
                     if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {
@@ -204,7 +195,7 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
                             } else {
                                 nonEmphasizedSeriesIndexes.push(seriesIdx);
                                 // ensure series not close to cursor are not highlighted
-                                if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+                                if (chart?.dispatchAction !== undefined) {
                                     chart.dispatchAction({
                                         type: 'downplay',
                                         seriesIndex: seriesIdx
@@ -232,7 +223,7 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
             }
         }
     }
-    if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+    if (chart?.dispatchAction !== undefined) {
         // Clears emphasis state of all lines that are not emphasized.
         // Emphasized is a subset of just the nearby series that are closest to cursor.
         chart.dispatchAction({
@@ -330,10 +321,9 @@ function legacyGetNearbySeriesData({ mousePos, pinnedPos, chartData, chart, form
         totalSeries,
         showAllSeries
     });
-    var _mousePos_plotCanvas_x, _mousePos_plotCanvas_y;
     const pointInPixel = [
-        (_mousePos_plotCanvas_x = mousePos.plotCanvas.x) !== null && _mousePos_plotCanvas_x !== void 0 ? _mousePos_plotCanvas_x : 0,
-        (_mousePos_plotCanvas_y = mousePos.plotCanvas.y) !== null && _mousePos_plotCanvas_y !== void 0 ? _mousePos_plotCanvas_y : 0
+        mousePos.plotCanvas.x ?? 0,
+        mousePos.plotCanvas.y ?? 0
     ];
     if (chart.containPixel('grid', pointInPixel)) {
         const pointInGrid = chart.convertFromPixel('grid', pointInPixel);