@perses-dev/components 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-histogram-types-78c5104

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

@@ -21,6 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    DEFAULT_COLUMN_HEIGHT: function() {
+        return DEFAULT_COLUMN_HEIGHT;
+    },
+    DEFAULT_COLUMN_WIDTH: function() {
+        return DEFAULT_COLUMN_WIDTH;
+    },
     getTableCellLayout: function() {
         return getTableCellLayout;
     },
@@ -28,39 +34,47 @@ _export(exports, {
         return persesColumnsToTanstackColumns;
     }
 });
+const DEFAULT_COLUMN_WIDTH = 150;
+const DEFAULT_COLUMN_HEIGHT = 40;
 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;
 }
-function getTableCellLayout(theme, density, { isLastColumn, isFirstColumn } = {}) {
+function getTableCellLayout(theme, density, { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight } = {}) {
+    // Density Standard
+    let paddingY = theme.spacing(1);
+    let basePaddingX = theme.spacing(1.25);
+    let edgePaddingX = theme.spacing(2);
+    let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+    let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
+    let lineHeight = theme.typography.body1.lineHeight;
+    let fontSize = theme.typography.body1.fontSize;
     if (density === 'compact') {
-        const paddingY = theme.spacing(0.5);
-        const basePaddingX = theme.spacing(0.5);
-        const edgePaddingX = theme.spacing(1);
-        const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-        const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-        const lineHeight = theme.typography.body2.lineHeight;
-        return {
-            padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
-            height: calculateTableCellHeight(lineHeight, paddingY),
-            fontSize: theme.typography.body2.fontSize,
-            lineHeight: lineHeight
-        };
+        paddingY = theme.spacing(0.5);
+        basePaddingX = theme.spacing(0.5);
+        edgePaddingX = theme.spacing(1);
+        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
+        lineHeight = theme.typography.body2.lineHeight;
+        fontSize = theme.typography.body2.fontSize;
+    }
+    if (density === 'comfortable') {
+        paddingY = theme.spacing(2);
+        basePaddingX = theme.spacing(1.5);
+        edgePaddingX = theme.spacing(2);
+        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
+        lineHeight = theme.typography.body1.lineHeight;
+        fontSize = theme.typography.body1.fontSize;
     }
-    // standard density
-    const paddingY = theme.spacing(1);
-    const basePaddingX = theme.spacing(1.25);
-    const edgePaddingX = theme.spacing(2);
-    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-    const lineHeight = theme.typography.body1.lineHeight;
+    const height = isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto' ? calculateTableCellHeight(lineHeight, paddingY) : defaultColumnHeight;
     return {
         padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
-        height: calculateTableCellHeight(lineHeight, paddingY),
-        fontSize: theme.typography.body1.fontSize,
+        height: height,
+        fontSize: fontSize,
         lineHeight: lineHeight
     };
 }

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
-const _ThresholdColorPicker = require("./ThresholdColorPicker");
+const _OptionsColorPicker = require("../ColorPicker/OptionsColorPicker");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -39,7 +39,7 @@ function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColor
         justifyContent: "space-between",
         spacing: 1,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ThresholdColorPicker.ThresholdColorPicker, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
                 label: label,
                 color: color,
                 onColorChange: onColorChange

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -22,14 +22,14 @@ Object.defineProperty(exports, "ThresholdsEditor", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _immer = /*#__PURE__*/ _interop_require_default(require("immer"));
+const _immer = require("immer");
 const _material = require("@mui/material");
 const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
 const _system = require("@mui/system");
 const _ChartsProvider = require("../context/ChartsProvider");
 const _OptionsEditorLayout = require("../OptionsEditorLayout");
 const _InfoTooltip = require("../InfoTooltip");
-const _ThresholdColorPicker = require("./ThresholdColorPicker");
+const _OptionsColorPicker = require("../ColorPicker/OptionsColorPicker");
 const _ThresholdInput = require("./ThresholdInput");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -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];
+        setSteps((0, _immer.produce)(steps, (draft)=>{
+            const step = draft?.[i];
             if (step) {
                 step.value = Number(e.target.value);
             }
@@ -110,7 +108,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
     };
     const handleThresholdColorChange = (color, i)=>{
         if (thresholds !== undefined) {
-            onChange((0, _immer.default)(thresholds, (draft)=>{
+            onChange((0, _immer.produce)(thresholds, (draft)=>{
                 if (draft.steps !== undefined) {
                     const step = draft.steps[i];
                     if (step) {
@@ -122,7 +120,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
     };
     const handleDefaultColorChange = (color)=>{
         if (thresholds !== undefined) {
-            onChange((0, _immer.default)(thresholds, (draft)=>{
+            onChange((0, _immer.produce)(thresholds, (draft)=>{
                 draft.defaultColor = color;
             }));
         } else {
@@ -139,7 +137,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
             ];
             sortedSteps.sort((a, b)=>a.value - b.value);
             if (thresholds !== undefined) {
-                onChange((0, _immer.default)(thresholds, (draft)=>{
+                onChange((0, _immer.produce)(thresholds, (draft)=>{
                     draft.steps = sortedSteps;
                 }));
             }
@@ -147,7 +145,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
     };
     const deleteThreshold = (i)=>{
         if (thresholds !== undefined) {
-            const updatedThresholds = (0, _immer.default)(thresholds, (draft)=>{
+            const updatedThresholds = (0, _immer.produce)(thresholds, (draft)=>{
                 if (draft.steps) {
                     draft.steps.splice(i, 1);
                 }
@@ -166,7 +164,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
                 ]
             });
         } else if (thresholds && thresholds.steps === undefined) {
-            onChange((0, _immer.default)(thresholds, (draft)=>{
+            onChange((0, _immer.produce)(thresholds, (draft)=>{
                 draft.steps = [
                     {
                         value: DEFAULT_STEP
@@ -174,16 +172,14 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
                 ];
             }));
         } else {
-            onChange((0, _immer.default)(thresholds, (draft)=>{
+            onChange((0, _immer.produce)(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({
@@ -196,7 +192,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
     const handleModeChange = (event, value)=>{
         const mode = value === 'percent' ? 'percent' : undefined;
         if (thresholds !== undefined) {
-            onChange((0, _immer.default)(thresholds, (draft)=>{
+            onChange((0, _immer.produce)(thresholds, (draft)=>{
                 draft.mode = mode;
             }));
         } else {
@@ -205,11 +201,10 @@ 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, {
-            description: 'Add threshold',
+            description: "Add threshold",
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                 size: "small",
                 "aria-label": "add threshold",
@@ -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)=>/*#__PURE__*/ {
-                var _step_color, _ref;
-                return (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,15 +259,14 @@ 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",
                 alignItems: "center",
                 spacing: 1,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_ThresholdColorPicker.ThresholdColorPicker, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
                         label: "default",
                         color: defaultThresholdColor,
                         onColorChange: handleDefaultColorChange

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)();
@@ -153,7 +152,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             const values = d.values.map(([timestamp, value])=>{
                 const val = value === null ? '-' : value; // echarts use '-' to represent null data
                 return [
-                    isLocalTimeZone ? timestamp : (0, _datefnstz.utcToZonedTime)(timestamp, timeZone),
+                    isLocalTimeZone ? timestamp : (0, _datefnstz.toZonedTime)(timestamp, timeZone),
                     val
                 ];
             });
@@ -172,17 +171,16 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             ...seriesMapping,
             pinnedCrosshair
         ] : seriesMapping;
-        var _timeScale_rangeMs;
         const option = {
             dataset: dataset,
             series: updatedSeriesMapping,
             xAxis: {
                 type: 'time',
-                min: isLocalTimeZone ? timeScale.startMs : (0, _datefnstz.utcToZonedTime)(timeScale.startMs, timeZone),
-                max: isLocalTimeZone ? timeScale.endMs : (0, _datefnstz.utcToZonedTime)(timeScale.endMs, timeZone),
+                min: isLocalTimeZone ? timeScale.startMs : (0, _datefnstz.toZonedTime)(timeScale.startMs, timeZone),
+                max: isLocalTimeZone ? timeScale.endMs : (0, _datefnstz.toZonedTime)(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
@@ -196,7 +194,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
                 showContent: isStackedBar,
                 trigger: isStackedBar ? 'item' : 'axis',
-                appendToBody: true
+                appendToBody: isStackedBar
             },
             // https://echarts.apache.org/en/option.html#axisPointer
             axisPointer: {
@@ -255,7 +253,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         seriesMapping
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: {
+        style: {
             height
         },
         // onContextMenu={(e) => {
@@ -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/{DateTimeRangePicker/AbsoluteTimePicker.js → TimeRangeSelector/DateTimeRangePicker.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -14,34 +14,35 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "AbsoluteTimePicker", {
+Object.defineProperty(exports, "DateTimeRangePicker", {
     enumerable: true,
     get: function() {
-        return AbsoluteTimePicker;
+        return DateTimeRangePicker;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _xdatepickers = require("@mui/x-date-pickers");
-const _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
-const _TimeZoneProvider = require("../context/TimeZoneProvider");
+const _AdapterDateFnsV3 = require("@mui/x-date-pickers/AdapterDateFnsV3");
+const _context = require("../context");
+const _ErrorBoundary = require("../ErrorBoundary");
+const _ErrorAlert = require("../ErrorAlert");
 const _utils = require("./utils");
-const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
-const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel })=>{
-    const { formatWithUserTimeZone } = (0, _TimeZoneProvider.useTimeZone)();
+const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
+    const { formatWithUserTimeZone } = (0, _context.useTimeZone)();
     // Time range values as dates that can be used as a time range.
     const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
     // Time range values as strings used to populate the text inputs. May not
     // be valid as dates when the user is typing.
     const [timeRangeInputs, setTimeRangeInputs] = (0, _react.useState)({
-        start: formatWithUserTimeZone(initialTimeRange.start, DATE_TIME_FORMAT),
-        end: formatWithUserTimeZone(initialTimeRange.end, DATE_TIME_FORMAT)
+        start: formatWithUserTimeZone(initialTimeRange.start, _utils.DATE_TIME_FORMAT),
+        end: formatWithUserTimeZone(initialTimeRange.end, _utils.DATE_TIME_FORMAT)
     });
     const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
     const changeTimeRange = (newTime, segment)=>{
         const isInputChange = typeof newTime === 'string';
-        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, DATE_TIME_FORMAT);
+        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, _utils.DATE_TIME_FORMAT);
         setTimeRangeInputs((prevTimeRangeInputs)=>{
             return {
                 ...prevTimeRangeInputs,
@@ -85,7 +86,7 @@ const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel })=>{
         }
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.LocalizationProvider, {
-        dateAdapter: _AdapterDateFns.AdapterDateFns,
+        dateAdapter: _AdapterDateFnsV3.AdapterDateFns,
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
             spacing: 2,
             sx: (theme)=>({
@@ -159,27 +160,33 @@ const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel })=>{
                     pl: 1,
                     pr: 1,
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                            onChange: (event)=>{
-                                // TODO: add helperText, fix validation after we decide on form state solution
-                                onChangeStartTime(event.target.value);
-                            },
-                            onBlur: ()=>updateDateRange(),
-                            value: timeRangeInputs.start,
-                            label: "Start Time",
-                            placeholder: DATE_TIME_FORMAT,
-                            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
-                            type: "tel"
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
+                            FallbackComponent: _ErrorAlert.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                label: "Start Time",
+                                value: new Date(timeRangeInputs.start),
+                                onChange: (event)=>{
+                                    if (event) {
+                                        onChangeStartTime(event);
+                                    }
+                                },
+                                onBlur: ()=>updateDateRange(),
+                                format: _utils.DATE_TIME_FORMAT
+                            })
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                            onChange: (event)=>{
-                                onChangeEndTime(event.target.value);
-                            },
-                            onBlur: ()=>updateDateRange(),
-                            value: timeRangeInputs.end,
-                            label: "End Time",
-                            placeholder: DATE_TIME_FORMAT,
-                            type: "tel"
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
+                            FallbackComponent: _ErrorAlert.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                label: "End Time",
+                                value: new Date(timeRangeInputs.end),
+                                onChange: (event)=>{
+                                    if (event) {
+                                        onChangeEndTime(event);
+                                    }
+                                },
+                                onBlur: ()=>updateDateRange(),
+                                format: _utils.DATE_TIME_FORMAT
+                            })
                         })
                     ]
                 }),

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -0,0 +1,127 @@
+// 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, "TimeRangeSelector", {
+    enumerable: true,
+    get: function() {
+        return TimeRangeSelector;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _Calendar = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Calendar"));
+const _core = require("@perses-dev/core");
+const _react = require("react");
+const _context = require("../context");
+const _DateTimeRangePicker = require("./DateTimeRangePicker");
+const _utils = require("./utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true }) {
+    const { timeZone } = (0, _context.useTimeZone)();
+    const anchorEl = (0, _react.useRef)(); // Used to position the absolute time range picker
+    // Control the open state of the absolute time range picker
+    const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
+    // Build the initial value of the absolute time range picker
+    const convertedTimeRange = (0, _react.useMemo)(()=>{
+        return (0, _core.isRelativeTimeRange)(value) ? (0, _core.toAbsoluteTimeRange)(value) : value;
+    }, [
+        value
+    ]);
+    // Last option is the absolute time range option (custom)
+    // If the value is an absolute time range, we display this time range
+    // If the value is a relative time range, we make a default CustomTimeOption built from undefined value
+    const lastOption = (0, _react.useMemo)(()=>(0, _utils.buildCustomTimeOption)((0, _core.isRelativeTimeRange)(value) ? undefined : value, timeZone), [
+        value,
+        timeZone
+    ]);
+    // Control the open state of the select component to prevent the menu from closing when the custom date picker is
+    // opened.
+    //
+    // Note that the value state of the select is here for display only. The real value (the one from props) is managed
+    // by click events on each menu item.
+    // This is a trick to get around the limitation of select with menu item that doesn't support objects as value...
+    const [open, setOpen] = (0, _react.useState)(false);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
+                anchorEl: anchorEl.current,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                },
+                open: showCustomDateSelector,
+                onClose: ()=>setShowCustomDateSelector(false),
+                sx: (theme)=>({
+                        padding: theme.spacing(2)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DateTimeRangePicker.DateTimeRangePicker, {
+                    initialTimeRange: convertedTimeRange,
+                    onChange: (value)=>{
+                        onChange(value);
+                        setShowCustomDateSelector(false);
+                        setOpen(false);
+                    },
+                    onCancel: ()=>setShowCustomDateSelector(false)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                ref: anchorEl,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
+                    open: open,
+                    value: (0, _utils.formatTimeRange)(value, timeZone),
+                    onClick: ()=>setOpen(!open),
+                    IconComponent: _Calendar.default,
+                    inputProps: {
+                        'aria-label': `Select time range. Currently set to ${value}`
+                    },
+                    sx: {
+                        // `transform: none` prevents calendar icon from flipping over when menu is open
+                        '.MuiSelect-icon': {
+                            marginTop: '1px',
+                            transform: 'none'
+                        },
+                        // paddingRight creates more space for the calendar icon (it's a bigger icon)
+                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
+                            paddingRight: '36px'
+                        },
+                        '.MuiSelect-select': height ? {
+                            lineHeight: height,
+                            paddingY: 0
+                        } : {}
+                    },
+                    children: [
+                        timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                value: (0, _utils.formatTimeRange)(item.value, timeZone),
+                                onClick: ()=>{
+                                    onChange(item.value);
+                                },
+                                children: item.display
+                            }, idx)),
+                        showCustomTimeRange && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: (0, _utils.formatTimeRange)(lastOption.value, timeZone),
+                            onClick: ()=>setShowCustomDateSelector(true),
+                            children: lastOption.display
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/{DateTimeRangePicker → TimeRangeSelector}/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -14,9 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./DateTimeRangePicker"), exports);
 _export_star(require("./TimeRangeSelector"), exports);
-_export_star(require("./AbsoluteTimePicker"), exports);
+_export_star(require("./DateTimeRangePicker"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {