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

package/dist/cjs/Drawer/Drawer.js

@@ -36,7 +36,7 @@ const Drawer = ({ anchor = 'right', isOpen, onClose, PaperProps, children, ...re
             sx: (0, _utils.combineSx)({
                 width: isSmaller ? '100%' : `${DRAWER_DEFAULT_WIDTH}px`,
                 overflow: 'hidden'
-            }, PaperProps === null || PaperProps === void 0 ? void 0 : PaperProps.sx)
+            }, PaperProps?.sx)
         },
         children: children
     });

package/dist/cjs/EChart/EChart.js

@@ -56,11 +56,11 @@ const EChart = /*#__PURE__*/ (0, _react.memo)(function EChart({ option, theme, r
     (0, _react.useLayoutEffect)(()=>{
         if (containerRef.current === null || chartElement.current !== null) return;
         chartElement.current = (0, _core.init)(containerRef.current, theme, {
-            renderer: renderer !== null && renderer !== void 0 ? renderer : 'canvas'
+            renderer: renderer ?? 'canvas'
         });
         if (chartElement.current === undefined) return;
         chartElement.current.setOption(initialOption.current, true);
-        onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chartElement.current);
+        onChartInitialized?.(chartElement.current);
         if (_instance !== undefined) {
             _instance.current = chartElement.current;
         }
@@ -160,8 +160,7 @@ function bindEvents(instance, events) {
     }
     for(const eventName in events){
         if (Object.prototype.hasOwnProperty.call(events, eventName)) {
-            var _events_eventName;
-            const customEvent = (_events_eventName = events[eventName]) !== null && _events_eventName !== void 0 ? _events_eventName : null;
+            const customEvent = events[eventName] ?? null;
             if (customEvent) {
                 bindEvent(eventName, customEvent);
             }

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -51,11 +51,9 @@ function GaugeChart(props) {
     const chartsTheme = (0, _context.useChartsTheme)();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{
-        var _chartsTheme_echartsTheme_textStyle;
         if (data.value === undefined) return chartsTheme.noDataOption;
         // adjusts fontSize depending on number of characters
         const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);
-        var _chartsTheme_echartsTheme_textStyle_color;
         return {
             title: {
                 show: false
@@ -185,7 +183,7 @@ function GaugeChart(props) {
                             // https://echarts.apache.org/en/option.html#series-gauge.data.title
                             title: {
                                 show: true,
-                                color: (_chartsTheme_echartsTheme_textStyle_color = (_chartsTheme_echartsTheme_textStyle = chartsTheme.echartsTheme.textStyle) === null || _chartsTheme_echartsTheme_textStyle === void 0 ? void 0 : _chartsTheme_echartsTheme_textStyle.color) !== null && _chartsTheme_echartsTheme_textStyle_color !== void 0 ? _chartsTheme_echartsTheme_textStyle_color : 'inherit',
+                                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit',
                                 offsetCenter: [
                                     0,
                                     '55%'
@@ -223,8 +221,7 @@ function getResponsiveValueSize(value, format, width, height) {
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
     const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, format) : `${value}`;
-    var _formattedValue_length;
-    const valueCharacters = (_formattedValue_length = formattedValue.length) !== null && _formattedValue_length !== void 0 ? _formattedValue_length : 2;
+    const valueCharacters = formattedValue.length ?? 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
     return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
 }

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -35,13 +35,13 @@ const InfoTooltip = ({ id, title, description, placement, children, enterDelay,
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement !== null && placement !== void 0 ? placement : 'top',
+        placement: placement ?? 'top',
         title: /*#__PURE__*/ (0, _jsxruntime.jsx)(TooltipContent, {
             title: title,
             description: description
         }),
-        enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
-        enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
+        enterDelay: enterDelay ?? 500,
+        enterNextDelay: enterNextDelay ?? 500,
         children: wrappedChildren
     });
 };
@@ -59,7 +59,8 @@ const TooltipContent = ({ title, description })=>{
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                 variant: "caption",
                 sx: (theme)=>({
-                        color: theme.palette.text.primary
+                        color: theme.palette.text.primary,
+                        whiteSpace: 'pre-line'
                     }),
                 children: description
             })

package/dist/cjs/Legend/ListLegendItem.js

@@ -38,9 +38,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }
     }
     const handleClick = (e)=>{
-        var _item_onClick;
         onClick(e, item.id);
-        (_item_onClick = item.onClick) === null || _item_onClick === void 0 ? void 0 : _item_onClick.call(item, e);
+        item.onClick?.(e);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ListItemButton, {
         ...others,
@@ -51,11 +50,11 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }, sx),
         dense: true,
         onClick: handleClick,
-        onMouseOver: (e)=>onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+        onMouseOver: (e)=>onMouseOver?.(e, {
                 id: item.id,
                 index
             }),
-        onMouseOut: (e)=>onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+        onMouseOut: (e)=>onMouseOut?.(e, {
                 id: item.id,
                 index
             }),

package/dist/cjs/LineChart/LineChart.js

@@ -45,7 +45,6 @@ const _utils = require("../utils");
     _renderers.CanvasRenderer
 ]);
 const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height, data, yAxis, format, grid, legend, tooltipConfig = _TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
-    var _option_tooltip;
     const chartsTheme = (0, _context.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -84,10 +83,8 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
-                var _params_batch__startValue;
-                const startIndex = (_params_batch__startValue = params.batch[0].startValue) !== null && _params_batch__startValue !== void 0 ? _params_batch__startValue : 0;
-                var _params_batch__endValue;
-                const endIndex = (_params_batch__endValue = params.batch[0].endValue) !== null && _params_batch__endValue !== void 0 ? _params_batch__endValue : data.xAxis.length - 1;
+                const startIndex = params.batch[0].startValue ?? 0;
+                const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;
                 const xAxisStartValue = data.xAxis[startIndex];
                 const xAxisEndValue = data.xAxis[endIndex];
                 if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
@@ -115,8 +112,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
         if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
-        var _data_rangeMs;
-        const rangeMs = (_data_rangeMs = data.rangeMs) !== null && _data_rangeMs !== void 0 ? _data_rangeMs : (0, _utils.getDateRange)(data.xAxis);
+        const rangeMs = data.rangeMs ?? (0, _utils.getDateRange)(data.xAxis);
         const option = {
             series: data.timeSeries,
             xAxis: {
@@ -250,7 +246,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ 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.LineChartTooltip, {
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,

package/dist/cjs/LinksEditor/LinksEditor.js

@@ -94,56 +94,47 @@ function LinkControl({ control, index }) {
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         control: control,
                         name: `panelDefinition.spec.links.${index}.url`,
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                 ...field,
                                 required: true,
                                 fullWidth: true,
                                 label: "URL",
                                 error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                helperText: fieldState.error?.message,
                                 onChange: (event)=>{
                                     field.onChange(event);
                                 }
-                            });
-                        }
+                            })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         control: control,
                         name: `panelDefinition.spec.links.${index}.name`,
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                 ...field,
                                 fullWidth: true,
                                 label: "Name",
                                 defaultValue: "",
                                 error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                helperText: fieldState.error?.message,
                                 onChange: (event)=>{
                                     field.onChange(event);
                                 }
-                            });
-                        }
+                            })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         control: control,
                         name: `panelDefinition.spec.links.${index}.tooltip`,
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                 ...field,
                                 fullWidth: true,
                                 label: "Tooltip",
                                 defaultValue: "",
                                 error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                helperText: fieldState.error?.message,
                                 onChange: (event)=>{
                                     field.onChange(event);
                                 }
-                            });
-                        }
+                            })
                     })
                 ]
             }),

package/dist/cjs/Overlay/Overlay.js

@@ -59,7 +59,7 @@ function LoadingOverlay(props) {
             height: '100%',
             alignItems: 'center',
             justifyContent: 'center',
-            padding: '0 10px'
+            px: 1
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
             variant: variant,

package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js

@@ -26,8 +26,7 @@ function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (
         ...params
     }), ...otherProps }) {
     const getOptionLabel = (option)=>{
-        var _option_label;
-        return (_option_label = option.label) !== null && _option_label !== void 0 ? _option_label : option.id;
+        return option.label ?? option.id;
     };
     // Note: this component currently is not virtualized because it is specific
     // to being used for settings, which generally have a pretty small list of

package/dist/cjs/StatChart/StatChart.js

@@ -22,22 +22,22 @@ Object.defineProperty(exports, "StatChart", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _material = require("@mui/material");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
-const _core1 = require("echarts/core");
+const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _context = require("../context");
 const _EChart = require("../EChart");
 const _calculateFontSize = require("./calculateFontSize");
+const _formatStatChartValue = require("./utils/formatStatChartValue");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-(0, _core1.use)([
+(0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,
     _components.DatasetComponent,
@@ -49,21 +49,15 @@ const LINE_HEIGHT = 1.2;
 const SERIES_NAME_MAX_FONT_SIZE = 30;
 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 StatChart = (props)=>{
+    const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
     const chartsTheme = (0, _context.useChartsTheme)();
-    let formattedValue = '';
-    if (data.calculatedValue === null) {
-        formattedValue = 'null';
-    } else if (typeof data.calculatedValue === 'number') {
-        formattedValue = (0, _core.formatValue)(data.calculatedValue, format);
-    }
+    const color = data.color;
+    const formattedValue = (0, _formatStatChartValue.formatStatChartValue)(data.calculatedValue, format);
     const containerPadding = chartsTheme.container.padding.default;
-    var _data_seriesData_name;
     // calculate series name font size and height
     let seriesNameFontSize = (0, _calculateFontSize.useOptimalFontSize)({
-        text: (_data_seriesData_name = data === null || data === void 0 ? void 0 : (_data_seriesData = data.seriesData) === null || _data_seriesData === void 0 ? void 0 : _data_seriesData.name) !== null && _data_seriesData_name !== void 0 ? _data_seriesData_name : '',
+        text: data?.seriesData?.name ?? '',
         fontWeight: SERIES_NAME_FONT_WEIGHT,
         width,
         height: height * 0.125,
@@ -162,7 +156,7 @@ function StatChart(props) {
             showSeriesName && /*#__PURE__*/ (0, _jsxruntime.jsx)(SeriesName, {
                 padding: containerPadding,
                 fontSize: seriesNameFontSize,
-                children: (_data_seriesData1 = data.seriesData) === null || _data_seriesData1 === void 0 ? void 0 : _data_seriesData1.name
+                children: data.seriesData?.name
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(Value, {
                 variant: "h3",
@@ -182,7 +176,7 @@ function StatChart(props) {
             })
         ]
     });
-}
+};
 const SeriesName = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
 })(({ theme, padding, fontSize })=>({
@@ -196,7 +190,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 })=>({
-        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
+        color: color ?? theme.palette.text.primary,
         fontSize: `${fontSize}px`,
         padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
         whiteSpace: 'nowrap',

package/dist/cjs/StatChart/calculateFontSize.js

@@ -39,10 +39,8 @@ function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSi
         return Number(fontSizeOverride);
     }
     const textStyle = echartsTheme.textStyle;
-    var _Number;
-    const fontSize = (_Number = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && _Number !== void 0 ? _Number : 12;
-    var _textStyle_fontFamily;
-    const fontFamily = (_textStyle_fontFamily = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontFamily) !== null && _textStyle_fontFamily !== void 0 ? _textStyle_fontFamily : 'Lato';
+    const fontSize = Number(textStyle?.fontSize) ?? 12;
+    const fontFamily = textStyle?.fontFamily ?? 'Lato';
     // set the font on the canvas context
     const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
     ctx.font = fontStyle;

package/dist/cjs/StatChart/utils/formatStatChartValue.js

@@ -0,0 +1,34 @@
+// Copyright 2024 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, "formatStatChartValue", {
+    enumerable: true,
+    get: function() {
+        return formatStatChartValue;
+    }
+});
+const _core = require("@perses-dev/core");
+const formatStatChartValue = (value, format)=>{
+    if (value === null) {
+        return 'null';
+    } else if (typeof value === 'number') {
+        return (0, _core.formatValue)(value, format);
+    } else if (value === undefined) {
+        return '';
+    } else {
+        return value;
+    }
+};

package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js

@@ -26,10 +26,9 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _core = require("echarts/core");
 const _renderers = require("echarts/renderers");
-const _react = require("react");
-const _context = require("../context");
+const _ChartsProvider = require("../context/ChartsProvider");
+const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _EChart = require("../EChart");
-const _getcolor = require("./utils/get-color");
 const _getformattedaxislabel = require("./get-formatted-axis-label");
 const _StatusHistoryTooltip = require("./StatusHistoryTooltip");
 (0, _core.use)([
@@ -41,34 +40,18 @@ const _StatusHistoryTooltip = require("./StatusHistoryTooltip");
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-function StatusHistoryChart(props) {
-    const { height, data, xAxisCategories, yAxisCategories, timeScale } = props;
-    const { timeZone } = (0, _context.useTimeZone)();
-    const chartsTheme = (0, _context.useChartsTheme)();
+const StatusHistoryChart = (props)=>{
+    const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;
+    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
+    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     const theme = (0, _material.useTheme)();
-    const uniqueValues = (0, _react.useMemo)(()=>[
-            ...new Set(data.map((item)=>item[2]))
-        ].filter((value)=>value !== undefined), [
-        data
-    ]);
-    // get colors from theme and generate colors if not provided
-    const pieces = (0, _react.useMemo)(()=>{
-        const themeColors = Array.isArray(chartsTheme.echartsTheme.color) ? chartsTheme.echartsTheme.color.filter((color)=>typeof color === 'string') : [];
-        return uniqueValues.map((value, index)=>({
-                value,
-                color: (0, _getcolor.getColorsForValues)(uniqueValues, themeColors)[index]
-            }));
-    }, [
-        uniqueValues,
-        chartsTheme.echartsTheme.color
-    ]);
-    var _timeScale_rangeMs;
     const option = {
         tooltip: {
             appendToBody: true,
             formatter: (params)=>{
                 return (0, _StatusHistoryTooltip.generateTooltipHTML)({
-                    data: params.data,
+                    data: params.data.value,
+                    label: params.data.label,
                     marker: params.marker,
                     xAxisCategories,
                     yAxisCategories,
@@ -91,7 +74,7 @@ function StatusHistoryChart(props) {
             },
             axisLabel: {
                 hideOverlap: true,
-                formatter: (0, _getformattedaxislabel.getFormattedStatusHistoryAxisLabel)((_timeScale_rangeMs = timeScale === null || timeScale === void 0 ? void 0 : timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0, timeZone)
+                formatter: (0, _getformattedaxislabel.getFormattedStatusHistoryAxisLabel)(timeScale?.rangeMs ?? 0, timeZone)
             }
         },
         yAxis: {
@@ -114,7 +97,7 @@ function StatusHistoryChart(props) {
         visualMap: {
             show: false,
             type: 'piecewise',
-            pieces
+            pieces: colors
         },
         series: [
             {
@@ -154,4 +137,4 @@ function StatusHistoryChart(props) {
             theme: chartsTheme.echartsTheme
         })
     });
-}
+};

package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js

@@ -22,8 +22,8 @@ Object.defineProperty(exports, "generateTooltipHTML", {
 });
 const _material = require("@mui/material");
 const _utils = require("../utils");
-function generateTooltipHTML({ data, marker, xAxisCategories, yAxisCategories, theme }) {
-    const [x, y, value] = data;
+function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme }) {
+    const [x, y] = data;
     const xAxisLabel = xAxisCategories[x];
     const { formattedDate, formattedTime } = (0, _utils.getDateAndTime)(xAxisLabel);
     const tooltipHeader = (0, _material.css)`
@@ -47,7 +47,7 @@ function generateTooltipHTML({ data, marker, xAxisCategories, yAxisCategories, t
           <strong>${yAxisCategories[y]}</strong>
         </div>
         <div>
-          ${value}
+          ${label}
         </div>
       </div>
     </div>

package/dist/cjs/StatusHistoryChart/utils/get-color.js

@@ -21,8 +21,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    fallbackColor: function() {
-        return fallbackColor;
+    FALLBACK_COLOR: function() {
+        return FALLBACK_COLOR;
     },
     getColorForValue: function() {
         return getColorForValue;
@@ -37,11 +37,11 @@ _export(exports, {
         return hslToHex;
     }
 });
-const fallbackColor = '#1f77b4';
+const FALLBACK_COLOR = '#1f77b4';
 function getColorForValue(value, baseColor) {
     // Validate base color
     if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {
-        baseColor = fallbackColor;
+        baseColor = FALLBACK_COLOR;
     }
     try {
         const [baseH, baseS, baseL] = hexToHSL(baseColor);
@@ -66,7 +66,7 @@ function getColorForValue(value, baseColor) {
         }
         return color;
     } catch (_) {
-        return fallbackColor;
+        return FALLBACK_COLOR;
     }
 }
 function getColorsForValues(uniqueValues, themeColors) {
@@ -77,9 +77,9 @@ function getColorsForValues(uniqueValues, themeColors) {
     // Use theme colors first, then generate additional ones
     return uniqueValues.map((value, index)=>{
         if (index < themeColors.length) {
-            return themeColors[index] || fallbackColor;
+            return themeColors[index] || FALLBACK_COLOR;
         }
-        return getColorForValue(value, themeColors[0] || fallbackColor);
+        return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);
     });
 }
 function hexToHSL(hex) {

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,