@perses-dev/components 0.46.0 → 0.47.0

package/dist/cjs/DensitySelector/DensitySelector.js

@@ -0,0 +1,54 @@
+// 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, "DensitySelector", {
+    enumerable: true,
+    get: function() {
+        return DensitySelector;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _OptionsEditorLayout = require("../OptionsEditorLayout");
+const _SettingsAutocomplete = require("../SettingsAutocomplete");
+const DENSITY_OPTIONS = [
+    {
+        id: 'compact',
+        label: 'Compact'
+    },
+    {
+        id: 'standard',
+        label: 'Standard'
+    },
+    {
+        id: 'comfortable',
+        label: 'Comfortable'
+    }
+];
+function DensitySelector({ onChange, value = 'standard' }) {
+    const handleSortChange = (_, { id })=>{
+        onChange(id);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
+        label: "Density",
+        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
+            value: DENSITY_OPTIONS.find((o)=>o.id === value),
+            options: DENSITY_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handleSortChange,
+            disableClearable: true
+        })
+    });
+}

package/dist/cjs/DensitySelector/index.js

@@ -0,0 +1,30 @@
+// 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
+});
+_export_star(require("./DensitySelector"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/Dialog/Dialog.js

@@ -34,6 +34,10 @@ const Header = ({ children, onClose, ...props })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
+                style: {
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden'
+                },
                 ...props,
                 children: children
             }),
@@ -46,11 +50,12 @@ const Header = ({ children, onClose, ...props })=>{
         ]
     });
 };
-const Content = ({ children, width = 500, sx, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
+const Content = ({ children, sx, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
         dividers: true,
         ...props,
         sx: (0, _utils.combineSx)({
-            width: `${width}px`
+            minWidth: `500px`,
+            textWrap: 'balance'
         }, sx),
         children: children
     });

package/dist/cjs/LinksEditor/LinksEditor.js

@@ -72,9 +72,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function LinksEditor({ ...props }) {
+function LinksEditor({ control, ...props }) {
     const { fields, append, remove } = (0, _reacthookform.useFieldArray)({
-        name: 'links'
+        control: control,
+        name: 'panelDefinition.spec.links'
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         ...props,
@@ -88,6 +89,7 @@ function LinksEditor({ ...props }) {
                             alignItems: "center",
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(LinkControl, {
+                                    control: control,
                                     index: index
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
@@ -121,7 +123,7 @@ function LinksEditor({ ...props }) {
         ]
     });
 }
-function LinkControl({ index }) {
+function LinkControl({ control, index }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         gap: 2,
         flexGrow: 1,
@@ -131,7 +133,8 @@ function LinkControl({ index }) {
                 gap: 2,
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                        name: `links.${index}.url`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.url`,
                         render: ({ field, fieldState })=>{
                             var _fieldState_error;
                             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
@@ -148,7 +151,8 @@ function LinkControl({ index }) {
                         }
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                        name: `links.${index}.name`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.name`,
                         render: ({ field, fieldState })=>{
                             var _fieldState_error;
                             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
@@ -165,7 +169,8 @@ function LinkControl({ index }) {
                         }
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                        name: `links.${index}.tooltip`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.tooltip`,
                         render: ({ field, fieldState })=>{
                             var _fieldState_error;
                             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
@@ -189,7 +194,8 @@ function LinkControl({ index }) {
                 alignItems: "center",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                        name: `links.${index}.renderVariables`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.renderVariables`,
                         render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
                                 label: "Render Variables",
                                 control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
@@ -200,7 +206,8 @@ function LinkControl({ index }) {
                             })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                        name: `links.${index}.targetBlank`,
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.targetBlank`,
                         render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
                                 label: "Open in new tab",
                                 control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {

package/dist/cjs/Overlay/Overlay.js

@@ -0,0 +1,71 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    LoadingOverlay: function() {
+        return LoadingOverlay;
+    },
+    NoDataOverlay: function() {
+        return NoDataOverlay;
+    },
+    TextOverlay: function() {
+        return TextOverlay;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function TextOverlay(props) {
+    const { message } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        sx: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            children: message
+        })
+    });
+}
+function NoDataOverlay(props) {
+    const { resource } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TextOverlay, {
+        message: `No ${resource}`
+    });
+}
+function LoadingOverlay(props) {
+    const { variant = 'rounded' } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        sx: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '0 10px'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+            variant: variant,
+            width: "100%",
+            height: "30%",
+            "aria-label": "Loading..."
+        })
+    });
+}

package/dist/cjs/Overlay/index.js

@@ -0,0 +1,30 @@
+// 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
+});
+_export_star(require("./Overlay"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/SortSelector/SortSelectorButtons.js

@@ -0,0 +1,53 @@
+// 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, "SortSelectorButtons", {
+    enumerable: true,
+    get: function() {
+        return SortSelectorButtons;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function SortSelectorButtons({ onChange, value, ...props }) {
+    const handleSortChange = (sort)=>{
+        onChange(sort);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ButtonGroup, {
+        "aria-label": "Sort",
+        sx: {
+            margin: 1
+        },
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                onClick: ()=>handleSortChange(undefined),
+                variant: value === undefined ? 'contained' : 'outlined',
+                children: "None"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                onClick: ()=>handleSortChange('asc'),
+                variant: value === 'asc' ? 'contained' : 'outlined',
+                children: "Ascending"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                onClick: ()=>handleSortChange('desc'),
+                variant: value === 'desc' ? 'contained' : 'outlined',
+                children: "Descending"
+            })
+        ]
+    });
+}

package/dist/cjs/SortSelector/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
@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./SortSelector"), exports);
+_export_star(require("./SortSelectorButtons"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/Table/InnerTable.js

@@ -31,7 +31,8 @@ const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme })=>({
     }));
 const TABLE_DENSITY_CONFIG = {
     compact: 'small',
-    standard: 'medium'
+    standard: 'medium',
+    comfortable: 'medium'
 };
 const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density, ...otherProps }, ref) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledMuiTable, {

package/dist/cjs/Table/TableCell.js

@@ -39,7 +39,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme }
             borderRadius: 0
         }
     }));
-function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, ...otherProps }) {
+function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, align, ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const elRef = (0, _react.useRef)();
     const isHeader = variant === 'head';
@@ -101,6 +101,8 @@ function TableCell({ children, density, variant, width, focusState = 'none', onF
                 flexDirection: 'inherit'
             },
             title: description,
+            "aria-label": description,
+            textAlign: align,
             children: children
         })
     });

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

@@ -36,31 +36,36 @@ function calculateTableCellHeight(lineHeight, paddingY) {
     return lineHeightNum + verticalPaddingNum * 2;
 }
 function getTableCellLayout(theme, density, { isLastColumn, isFirstColumn } = {}) {
+    // 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;
     return {
         padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
         height: calculateTableCellHeight(lineHeight, paddingY),
-        fontSize: theme.typography.body1.fontSize,
+        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

@@ -29,7 +29,7 @@ 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 : {
@@ -274,7 +274,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
                 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/{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,10 +14,10 @@
 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");
@@ -25,23 +25,24 @@ 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 _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,
@@ -159,27 +160,35 @@ 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",
+                                // @ts-expect-error: because the value is a Date, but the component expects a string
+                                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",
+                                // @ts-expect-error: because the value is a Date, but the component expects a string
+                                value: new Date(timeRangeInputs.end),
+                                onChange: (event)=>{
+                                    if (event) {
+                                        onChangeEndTime(event);
+                                    }
+                                },
+                                onBlur: ()=>updateDateRange(),
+                                format: _utils.DATE_TIME_FORMAT
+                            })
                         })
                     ]
                 }),