@perses-dev/components 0.53.0-rc.0 → 0.53.0-rc.2

package/dist/cjs/ModeSelector/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -36,8 +36,10 @@ const OptionsEditorControl = ({ label, control, description })=>{
     // controls for a11y.
     const generatedControlId = (0, _utils.useId)('EditorSectionControl');
     const controlId = `${generatedControlId}-control`;
+    const labelId = `${generatedControlId}-label`;
     const controlProps = {
-        id: controlId
+        id: controlId,
+        'aria-labelledby': labelId
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
@@ -51,6 +53,7 @@ const OptionsEditorControl = ({ label, control, description })=>{
                     justifyContent: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormLabel, {
+                            id: labelId,
                             htmlFor: controlId,
                             children: label
                         }),

package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/OptionsEditorLayout/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/Overlay/Overlay.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 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

package/dist/cjs/Overlay/index.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 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

package/dist/cjs/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/RefreshIntervalPicker/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -24,10 +24,23 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
         ...params
-    }), ...otherProps }) {
+    }), id, 'aria-labelledby': ariaLabelledby, ...otherProps }) {
     const getOptionLabel = (option)=>{
         return option.label ?? option.id;
     };
+    // Merge id and aria-labelledby props into the input element for proper accessibility
+    // and form association, while still allowing custom renderInput implementations.
+    const handleRenderInput = (params)=>{
+        const mergedParams = {
+            ...params,
+            inputProps: {
+                ...params.inputProps,
+                id,
+                'aria-labelledby': ariaLabelledby
+            }
+        };
+        return renderInput(mergedParams);
+    };
     // Note: this component currently is not virtualized because it is specific
     // to being used for settings, which generally have a pretty small list of
     // options. If this changes to include values with many options, virtualization
@@ -37,7 +50,7 @@ function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (
         getOptionDisabled: (option)=>!!option.disabled,
         getOptionLabel: getOptionLabel,
         options: options,
-        renderInput: renderInput,
+        renderInput: handleRenderInput,
         renderOption: ({ key, ...props }, option)=>{
             return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
                 ...props,

package/dist/cjs/SettingsAutocomplete/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/SortSelector/SortSelector.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/SortSelector/SortSelectorButtons.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 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

package/dist/cjs/SortSelector/index.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 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

package/dist/cjs/Table/InnerTable.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/Table/Table.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -21,11 +21,11 @@ Object.defineProperty(exports, "Table", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _reacttable = require("@tanstack/react-table");
 const _material = require("@mui/material");
+const _reacttable = require("@tanstack/react-table");
 const _react = require("react");
-const _VirtualizedTable = require("./VirtualizedTable");
 const _TableCheckbox = require("./TableCheckbox");
+const _VirtualizedTable = require("./VirtualizedTable");
 const _tablemodel = require("./model/table-model");
 const DEFAULT_GET_ROW_ID = (data, index)=>{
     return `${index}`;
@@ -35,7 +35,7 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
 // does not do deep equality checking for objects and arrays.
 const DEFAULT_ROW_SELECTION = {};
 const DEFAULT_SORTING = [];
-function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, pagination, onPaginationChange, rowSelectionVariant = 'standard', ...otherProps }) {
+function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant = 'standard', ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
@@ -73,6 +73,25 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;
         onSortingChange?.(newSorting);
     };
+    const actionsColumn = (0, _react.useMemo)(()=>{
+        return {
+            id: 'itemActions',
+            header: 'Actions',
+            cell: ({ row })=>{
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    children: getItemActions?.({
+                        id: row.id,
+                        data: row.original
+                    })
+                });
+            },
+            enableSorting: false
+        };
+    }, [
+        getItemActions
+    ]);
     const checkboxColumn = (0, _react.useMemo)(()=>{
         return {
             id: 'checkboxRowSelect',
@@ -107,6 +126,9 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
     ]);
     const tableColumns = (0, _react.useMemo)(()=>{
         const initTableColumns = (0, _tablemodel.persesColumnsToTanstackColumns)(columns);
+        if (hasItemActions) {
+            initTableColumns.unshift(actionsColumn);
+        }
         if (checkboxSelection) {
             initTableColumns.unshift(checkboxColumn);
         }
@@ -114,7 +136,9 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
     }, [
         checkboxColumn,
         checkboxSelection,
-        columns
+        columns,
+        hasItemActions,
+        actionsColumn
     ]);
     const table = (0, _reacttable.useReactTable)({
         data,

package/dist/cjs/Table/TableBody.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/Table/TableCell.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -23,6 +23,7 @@ Object.defineProperty(exports, "TableCell", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
+const _datafieldinterpolation = require("../utils/data-field-interpolation");
 const _tablemodel = require("./model/table-model");
 const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
         padding: 0,
@@ -39,7 +40,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme }
             borderRadius: 0
         }
     }));
-function TableCell({ children, density, variant, width, defaultColumnHeight, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, align, color, backgroundColor, ...otherProps }) {
+function TableCell({ children, density, variant, width, defaultColumnHeight, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, align, color, backgroundColor, dataLink, adjacentCellsValuesMap, ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const elRef = (0, _react.useRef)();
     const isHeader = variant === 'head';
@@ -67,6 +68,22 @@ function TableCell({ children, density, variant, width, defaultColumnHeight, foc
         // tabindex and focuses to the right cell.
         onFocusTrigger?.(e);
     };
+    const modifiedDataLink = (0, _react.useMemo)(()=>{
+        if (!dataLink) return undefined;
+        if (adjacentCellsValuesMap && (0, _datafieldinterpolation.hasDataFieldPatterns)(dataLink.url)) {
+            const { text } = (0, _datafieldinterpolation.replaceDataFields)(dataLink.url, adjacentCellsValuesMap, {
+                urlEncode: true
+            });
+            return {
+                ...dataLink,
+                url: text
+            };
+        }
+        return dataLink;
+    }, [
+        dataLink,
+        adjacentCellsValuesMap
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledMuiTableCell, {
         ...otherProps,
         // Modify the tab index based on the currently focused cell. It's important
@@ -125,7 +142,12 @@ function TableCell({ children, density, variant, width, defaultColumnHeight, foc
             title: description,
             "aria-label": description,
             textAlign: align,
-            children: children
+            children: modifiedDataLink ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Link, {
+                href: modifiedDataLink.url,
+                target: modifiedDataLink.targetBlank ? '_blank' : '_self',
+                rel: modifiedDataLink.targetBlank ? 'noopener noreferrer' : undefined,
+                children: children
+            }) : children
         })
     });
 }

package/dist/cjs/Table/TableCheckbox.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/Table/TableFoot.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

package/dist/cjs/Table/TableHead.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/Table/TableHeaderCell.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/Table/TableRow.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/Table/VirtualizedTable.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -188,7 +188,6 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
                     children: row.getVisibleCells().map((cell, i, cells)=>{
                         const position = {
-                            // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
@@ -196,7 +195,13 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
                         const cellConfig = cellConfigs?.[cellContext.cell.id];
                         const cellRenderFn = cell.column.columnDef.cell;
                         const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
-                        const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
+                        /* 
+                   IMPORTANT:
+                   If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)
+                   Components have no access to any context (Which is intentional and correct)
+                   We may want to add parameters to a link from neighboring cells in the future as well.
+                   If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)
+                */ const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
                         let description = undefined;
                         if (typeof cellDescriptionDef === 'function') {
                             // If the cell description is a function, set the value using
@@ -208,6 +213,15 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
                             // cell content.
                             description = cellContent;
                         }
+                        /* this has been specifically added for the data link, 
+                   therefore, non string and numeric values should be excluded
+                */ const adjacentCellsValuesMap = Object.entries(row.original)?.filter(([_, value])=>[
+                                'string',
+                                'number'
+                            ].includes(typeof value)).reduce((acc, [key, value])=>({
+                                ...acc,
+                                [key]: String(value)
+                            }), {});
                         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCell.TableCell, {
                             "data-testid": cell.id,
                             title: description || cellConfig?.text || cellContent,
@@ -222,6 +236,8 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
                             description: description,
                             color: cellConfig?.textColor ?? undefined,
                             backgroundColor: cellConfig?.backgroundColor ?? undefined,
+                            dataLink: cell.column.columnDef.meta?.dataLink,
+                            adjacentCellsValuesMap: adjacentCellsValuesMap,
                             children: cellConfig?.text || cellContent
                         }, cell.id);
                     })

package/dist/cjs/Table/VirtualizedTableContainer.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/Table/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -79,7 +79,7 @@ function getTableCellLayout(theme, density, { isHeader, isLastColumn, isFirstCol
     };
 }
 function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps })=>{
+    const tableCols = columns.map(({ width, align, headerDescription, cellDescription, enableSorting, dataLink, ...otherProps })=>{
         // Tanstack Table does not support an "auto" value to naturally size to fit
         // the space in a table. We translate our custom "auto" setting to 0 size
         // for these columns, so it is easy to fall back to auto when rendering.
@@ -104,7 +104,8 @@ function persesColumnsToTanstackColumns(columns) {
             meta: {
                 align,
                 headerDescription,
-                cellDescription
+                cellDescription,
+                dataLink
             }
         };
         return result;

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/ThresholdsEditor/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

package/dist/cjs/TimeRangeSelector/DateTimeRangePicker.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 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
@@ -25,42 +25,31 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _xdatepickers = require("@mui/x-date-pickers");
 const _AdapterDateFnsV3 = require("@mui/x-date-pickers/AdapterDateFnsV3");
-const _context = require("../context");
 const _ErrorBoundary = require("../ErrorBoundary");
 const _ErrorAlert = require("../ErrorAlert");
+const _format = require("../utils/format");
 const _utils = require("./utils");
-const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
-    const { formatWithUserTimeZone } = (0, _context.useTimeZone)();
+const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })=>{
     // 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, _utils.DATE_TIME_FORMAT),
-        end: formatWithUserTimeZone(initialTimeRange.end, _utils.DATE_TIME_FORMAT)
-    });
+    const timeRangeInputs = (0, _react.useMemo)(()=>{
+        return {
+            start: (0, _format.formatWithTimeZone)(timeRange.start, _utils.DATE_TIME_FORMAT, timeZone),
+            end: (0, _format.formatWithTimeZone)(timeRange.end, _utils.DATE_TIME_FORMAT, timeZone)
+        };
+    }, [
+        timeRange.start,
+        timeRange.end,
+        timeZone
+    ]);
     const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
     const changeTimeRange = (newTime, segment)=>{
-        const isInputChange = typeof newTime === 'string';
-        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, _utils.DATE_TIME_FORMAT);
-        setTimeRangeInputs((prevTimeRangeInputs)=>{
+        setTimeRange((prevTimeRange)=>{
             return {
-                ...prevTimeRangeInputs,
-                [segment]: newInputTime
+                ...prevTimeRange,
+                [segment]: newTime
             };
         });
-        // When the change is a string from an input, do not try to convert it to
-        // a date because there are likely to be interim stages of editing where it
-        // is not valid as a date. When the change is a Date from the calendar/clock
-        // interface, we can be sure it is a date.
-        if (!isInputChange) {
-            setTimeRange((prevTimeRange)=>{
-                return {
-                    ...prevTimeRange,
-                    [segment]: newTime
-                };
-            });
-        }
     };
     const onChangeStartTime = (newStartTime)=>{
         changeTimeRange(newStartTime, 'start');
@@ -70,12 +59,11 @@ const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
     };
     const updateDateRange = ()=>{
         const newDates = {
-            start: new Date(timeRangeInputs.start),
-            end: new Date(timeRangeInputs.end)
+            start: timeRange.start,
+            end: timeRange.end
         };
         const isValidDateRange = (0, _utils.validateDateRange)(newDates.start, newDates.end);
         if (isValidDateRange) {
-            setTimeRange(newDates);
             return newDates;
         }
     };
@@ -111,7 +99,7 @@ const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
                             displayStaticWrapperAs: "desktop",
                             openTo: "day",
                             disableHighlightToday: true,
-                            value: initialTimeRange.start,
+                            value: timeRange.start,
                             onChange: (newValue)=>{
                                 if (newValue === null) return;
                                 onChangeStartTime(newValue);
@@ -139,7 +127,7 @@ const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
                             displayStaticWrapperAs: "desktop",
                             openTo: "day",
                             disableHighlightToday: true,
-                            value: initialTimeRange.end,
+                            value: timeRange.end,
                             minDateTime: timeRange.start,
                             onChange: (newValue)=>{
                                 if (newValue === null) return;