@perses-dev/components 0.46.0 → 0.47.0

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)) {

package/dist/cjs/{DateTimeRangePicker → TimeRangeSelector}/utils.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
@@ -21,15 +21,32 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    DATE_TIME_FORMAT: function() {
+        return DATE_TIME_FORMAT;
+    },
+    buildCustomTimeOption: function() {
+        return buildCustomTimeOption;
+    },
     formatAbsoluteRange: function() {
         return formatAbsoluteRange;
     },
+    formatTimeRange: function() {
+        return formatTimeRange;
+    },
     validateDateRange: function() {
         return validateDateRange;
     }
 });
 const _datefns = require("date-fns");
+const _core = require("@perses-dev/core");
 const _utils = require("../utils");
+const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+function buildCustomTimeOption(value, timeZone) {
+    return {
+        value,
+        display: formatTimeRange(value, timeZone)
+    };
+}
 function validateDateRange(startDate, endDate) {
     // TODO: display error as helperText
     if (!(0, _datefns.isValid)(startDate) || !(0, _datefns.isValid)(endDate)) {
@@ -47,3 +64,9 @@ function formatAbsoluteRange(timeRange, dateFormat, timeZone) {
     const formattedEnd = (0, _utils.formatWithTimeZone)(timeRange.end, dateFormat, timeZone);
     return `${formattedStart} - ${formattedEnd}`;
 }
+function formatTimeRange(value, timeZone) {
+    if (!value) {
+        return 'Custom Time Range';
+    }
+    return !(0, _core.isRelativeTimeRange)(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
+}

package/dist/cjs/index.js

@@ -14,11 +14,12 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_export_star(require("./AlignSelector"), exports);
 _export_star(require("./BarChart"), exports);
 _export_star(require("./ColorPicker"), exports);
 _export_star(require("./ContentWithLegend"), exports);
-_export_star(require("./DateTimeRangePicker"), exports);
 _export_star(require("./Dialog"), exports);
+_export_star(require("./DensitySelector"), exports);
 _export_star(require("./Drawer"), exports);
 _export_star(require("./EChart"), exports);
 _export_star(require("./ErrorAlert"), exports);
@@ -32,12 +33,14 @@ _export_star(require("./LineChart"), exports);
 _export_star(require("./LinksEditor"), exports);
 _export_star(require("./ModeSelector"), exports);
 _export_star(require("./OptionsEditorLayout"), exports);
+_export_star(require("./Overlay"), exports);
 _export_star(require("./SettingsAutocomplete"), exports);
 _export_star(require("./SortSelector"), exports);
 _export_star(require("./StatChart"), exports);
 _export_star(require("./Table"), exports);
 _export_star(require("./ThresholdsEditor"), exports);
 _export_star(require("./TimeChart"), exports);
+_export_star(require("./TimeRangeSelector"), exports);
 _export_star(require("./TimeSeriesTooltip"), exports);
 _export_star(require("./ToolbarIconButton"), exports);
 _export_star(require("./FormatControls"), exports);

package/dist/cjs/model/timeOption.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,3 +14,21 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "buildRelativeTimeOption", {
+    enumerable: true,
+    get: function() {
+        return buildRelativeTimeOption;
+    }
+});
+const _core = require("@perses-dev/core");
+const _datefns = require("date-fns");
+function buildRelativeTimeOption(duration) {
+    return {
+        value: {
+            pastDuration: duration
+        },
+        display: `Last ${(0, _datefns.formatDuration)((0, _core.parseDurationString)(duration), {
+            delimiter: ', '
+        })}`
+    };
+}

package/dist/index.d.ts

@@ -1,8 +1,9 @@
+export * from './AlignSelector';
 export * from './BarChart';
 export * from './ColorPicker';
 export * from './ContentWithLegend';
-export * from './DateTimeRangePicker';
 export * from './Dialog';
+export * from './DensitySelector';
 export * from './Drawer';
 export * from './EChart';
 export * from './ErrorAlert';
@@ -16,12 +17,14 @@ export * from './LineChart';
 export * from './LinksEditor';
 export * from './ModeSelector';
 export * from './OptionsEditorLayout';
+export * from './Overlay';
 export * from './SettingsAutocomplete';
 export * from './SortSelector';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';
 export * from './TimeChart';
+export * from './TimeRangeSelector';
 export * from './TimeSeriesTooltip';
 export * from './ToolbarIconButton';
 export * from './FormatControls';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -10,11 +10,12 @@
 // 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.
+export * from './AlignSelector';
 export * from './BarChart';
 export * from './ColorPicker';
 export * from './ContentWithLegend';
-export * from './DateTimeRangePicker';
 export * from './Dialog';
+export * from './DensitySelector';
 export * from './Drawer';
 export * from './EChart';
 export * from './ErrorAlert';
@@ -28,12 +29,14 @@ export * from './LineChart';
 export * from './LinksEditor';
 export * from './ModeSelector';
 export * from './OptionsEditorLayout';
+export * from './Overlay';
 export * from './SettingsAutocomplete';
 export * from './SortSelector';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';
 export * from './TimeChart';
+export * from './TimeRangeSelector';
 export * from './TimeSeriesTooltip';
 export * from './ToolbarIconButton';
 export * from './FormatControls';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './BarChart';\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './LinksEditor';\nexport * from './ModeSelector';\nexport * from './OptionsEditorLayout';\nexport * from './SettingsAutocomplete';\nexport * from './SortSelector';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeChart';\nexport * from './TimeSeriesTooltip';\nexport * from './ToolbarIconButton';\nexport * from './FormatControls';\nexport * from './YAxisLabel';\nexport * from './context';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa;AAC3B,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,wBAAwB;AACtC,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,qBAAqB;AACnC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,wBAAwB;AACtC,cAAc,yBAAyB;AACvC,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,0BAA0B"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './AlignSelector';\nexport * from './BarChart';\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './Dialog';\nexport * from './DensitySelector';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './LinksEditor';\nexport * from './ModeSelector';\nexport * from './OptionsEditorLayout';\nexport * from './Overlay';\nexport * from './SettingsAutocomplete';\nexport * from './SortSelector';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeChart';\nexport * from './TimeRangeSelector';\nexport * from './TimeSeriesTooltip';\nexport * from './ToolbarIconButton';\nexport * from './FormatControls';\nexport * from './YAxisLabel';\nexport * from './context';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB;AAChC,cAAc,aAAa;AAC3B,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,qBAAqB;AACnC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,wBAAwB;AACtC,cAAc,YAAY;AAC1B,cAAc,yBAAyB;AACvC,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,0BAA0B"}

package/dist/model/timeOption.d.ts

@@ -1,6 +1,7 @@
-import { RelativeTimeRange } from '@perses-dev/core';
+import { DurationString, RelativeTimeRange } from '@perses-dev/core';
 export interface TimeOption {
     value: RelativeTimeRange;
     display: string;
 }
+export declare function buildRelativeTimeOption(duration: DurationString): TimeOption;
 //# sourceMappingURL=timeOption.d.ts.map

package/dist/model/timeOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeOption.d.ts","sourceRoot":"","sources":["../../src/model/timeOption.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"timeOption.d.ts","sourceRoot":"","sources":["../../src/model/timeOption.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAuB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,cAAc,GAAG,UAAU,CAK5E"}

package/dist/model/timeOption.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
@@ -10,6 +10,17 @@
 // 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.
-export { };
+import { parseDurationString } from '@perses-dev/core';
+import { formatDuration } from 'date-fns';
+export function buildRelativeTimeOption(duration) {
+    return {
+        value: {
+            pastDuration: duration
+        },
+        display: `Last ${formatDuration(parseDurationString(duration), {
+            delimiter: ', '
+        })}`
+    };
+}
 
 //# sourceMappingURL=timeOption.js.map

package/dist/model/timeOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/timeOption.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { RelativeTimeRange } from '@perses-dev/core';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,WAGC"}
+{"version":3,"sources":["../../src/model/timeOption.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/core';\nimport { formatDuration } from 'date-fns';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\nexport function buildRelativeTimeOption(duration: DurationString): TimeOption {\n  return {\n    value: { pastDuration: duration },\n    display: `Last ${formatDuration(parseDurationString(duration), { delimiter: ', ' })}`,\n  };\n}\n"],"names":["parseDurationString","formatDuration","buildRelativeTimeOption","duration","value","pastDuration","display","delimiter"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAyBA,mBAAmB,QAA2B,mBAAmB;AAC1F,SAASC,cAAc,QAAQ,WAAW;AAO1C,OAAO,SAASC,wBAAwBC,QAAwB;IAC9D,OAAO;QACLC,OAAO;YAAEC,cAAcF;QAAS;QAChCG,SAAS,CAAC,KAAK,EAAEL,eAAeD,oBAAoBG,WAAW;YAAEI,WAAW;QAAK,GAAG,CAAC;IACvF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -36,8 +36,8 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^6.12.1",
-    "@perses-dev/core": "0.46.0",
-    "@tanstack/react-table": "^8.9.1",
+    "@perses-dev/core": "0.47.0",
+    "@tanstack/react-table": "^8.19.2",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",
     "date-fns-tz": "^1.3.7",
@@ -49,13 +49,14 @@
     "react-colorful": "^5.6.1",
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.51.3",
-    "react-virtuoso": "^4.3.6"
+    "react-virtuoso": "^4.3.6",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.46.0"
+    "@perses-dev/storybook": "0.47.0"
   },
   "peerDependencies": {
-    "@mui/material": "^5.10.0",
+    "@mui/material": "^5.15.20",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },

package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts

@@ -1,9 +0,0 @@
-import { AbsoluteTimeRange } from '@perses-dev/core';
-interface AbsoluteTimeFormProps {
-    initialTimeRange: AbsoluteTimeRange;
-    onChange: (timeRange: AbsoluteTimeRange) => void;
-    onCancel: () => void;
-}
-export declare const AbsoluteTimePicker: ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=AbsoluteTimePicker.d.ts.map

package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AbsoluteTimePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,eAAO,MAAM,kBAAkB,6CAA8C,qBAAqB,4CAsKjG,CAAC"}

package/dist/DateTimeRangePicker/AbsoluteTimePicker.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Box, Stack, TextField, Typography, Button } from '@mui/material';\nimport { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { validateDateRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\ninterface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n}\n\ntype AbsoluteTimeRangeInputValue = {\n  [Property in keyof AbsoluteTimeRange]: string;\n};\n\nexport const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps) => {\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  // Time range values as dates that can be used as a time range.\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n\n  // Time range values as strings used to populate the text inputs. May not\n  // be valid as dates when the user is typing.\n  const [timeRangeInputs, setTimeRangeInputs] = useState<AbsoluteTimeRangeInputValue>({\n    start: formatWithUserTimeZone(initialTimeRange.start, DATE_TIME_FORMAT),\n    end: formatWithUserTimeZone(initialTimeRange.end, DATE_TIME_FORMAT),\n  });\n\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: string | Date, segment: keyof AbsoluteTimeRange) => {\n    const isInputChange = typeof newTime === 'string';\n    const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, DATE_TIME_FORMAT);\n\n    setTimeRangeInputs((prevTimeRangeInputs) => {\n      return {\n        ...prevTimeRangeInputs,\n        [segment]: newInputTime,\n      };\n    });\n\n    // When the change is a string from an input, do not try to convert it to\n    // a date because there are likely to be interim stages of editing where it\n    // is not valid as a date. When the change is a Date from the calendar/clock\n    // interface, we can be sure it is a date.\n    if (!isInputChange) {\n      setTimeRange((prevTimeRange) => {\n        return {\n          ...prevTimeRange,\n          [segment]: newTime,\n        };\n      });\n    }\n  };\n\n  const onChangeStartTime = (newStartTime: string | Date) => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: string | Date) => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = () => {\n    const newDates = {\n      start: new Date(timeRangeInputs.start),\n      end: new Date(timeRangeInputs.end),\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\n      setTimeRange(newDates);\n      return newDates;\n    }\n  };\n\n  const onApply = () => {\n    const newDates = updateDateRange();\n    if (newDates) {\n      onChange(newDates);\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.end}\n              minDateTime={timeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              // TODO: add helperText, fix validation after we decide on form state solution\n              onChangeStartTime(event.target.value);\n            }}\n            onBlur={() => updateDateRange()}\n            value={timeRangeInputs.start}\n            label=\"Start Time\"\n            placeholder={DATE_TIME_FORMAT}\n            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590\n            type=\"tel\"\n          />\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              onChangeEndTime(event.target.value);\n            }}\n            onBlur={() => updateDateRange()}\n            value={timeRangeInputs.end}\n            label=\"End Time\"\n            placeholder={DATE_TIME_FORMAT}\n            type=\"tel\"\n          />\n        </Stack>\n        <Stack direction=\"row\" sx={{ padding: (theme) => theme.spacing(0, 1) }} gap={1}>\n          <Button variant=\"contained\" onClick={() => onApply()} fullWidth>\n            Apply\n          </Button>\n          <Button variant=\"outlined\" onClick={() => onCancel()} fullWidth>\n            Cancel\n          </Button>\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["useState","Box","Stack","TextField","Typography","Button","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useTimeZone","validateDateRange","DATE_TIME_FORMAT","AbsoluteTimePicker","initialTimeRange","onChange","onCancel","formatWithUserTimeZone","timeRange","setTimeRange","timeRangeInputs","setTimeRangeInputs","start","end","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","isInputChange","newInputTime","prevTimeRangeInputs","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","Date","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","variant","paddingLeft","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","minDateTime","direction","alignItems","gap","pl","pr","event","target","onBlur","label","placeholder","type","onClick","fullWidth"],"mappings":"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"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -1,11 +0,0 @@
-import { TimeRangeValue } from '@perses-dev/core';
-import { TimeOption } from '../model';
-interface DateTimeRangePickerProps {
-    value: TimeRangeValue;
-    onChange: (value: TimeRangeValue) => void;
-    timeOptions: TimeOption[];
-    height?: string;
-}
-export declare function DateTimeRangePicker(props: DateTimeRangePickerProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=DateTimeRangePicker.d.ts.map

package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAeA,OAAO,EAML,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,wBAAwB;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAwDlE"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,80 +0,0 @@
-// Copyright 2023 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.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useMemo } from 'react';
-import { Box, FormControl, Popover, Stack } from '@mui/material';
-import { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';
-import { AbsoluteTimePicker } from './AbsoluteTimePicker';
-import { TimeRangeSelector } from './TimeRangeSelector';
-export function DateTimeRangePicker(props) {
-    const { value, onChange, timeOptions, height } = props;
-    const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
-    const anchorEl = useRef();
-    const convertedTimeRange = useMemo(()=>{
-        return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;
-    }, [
-        value
-    ]);
-    return /*#__PURE__*/ _jsxs(Stack, {
-        direction: "row",
-        spacing: 1,
-        height: height,
-        children: [
-            /*#__PURE__*/ _jsx(Popover, {
-                anchorEl: anchorEl.current,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'center'
-                },
-                open: showCustomDateSelector,
-                onClose: ()=>setShowCustomDateSelector(false),
-                sx: (theme)=>({
-                        padding: theme.spacing(2)
-                    }),
-                children: /*#__PURE__*/ _jsx(AbsoluteTimePicker, {
-                    initialTimeRange: convertedTimeRange,
-                    onChange: (value)=>{
-                        onChange(value);
-                        setShowCustomDateSelector(false);
-                    },
-                    onCancel: ()=>setShowCustomDateSelector(false)
-                })
-            }),
-            /*#__PURE__*/ _jsx(FormControl, {
-                fullWidth: true,
-                children: /*#__PURE__*/ _jsx(Box, {
-                    ref: anchorEl,
-                    children: /*#__PURE__*/ _jsx(TimeRangeSelector, {
-                        timeOptions: timeOptions,
-                        value: value,
-                        height: height,
-                        onSelectChange: (event)=>{
-                            const duration = event.target.value;
-                            const relativeTimeInput = {
-                                pastDuration: duration,
-                                end: new Date()
-                            };
-                            onChange(relativeTimeInput);
-                            setShowCustomDateSelector(false);
-                        },
-                        onCustomClick: ()=>{
-                            setShowCustomDateSelector(true);
-                        }
-                    })
-                })
-            })
-        ]
-    });
-}
-
-//# sourceMappingURL=DateTimeRangePicker.js.map

package/dist/DateTimeRangePicker/DateTimeRangePicker.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  TimeRangeValue,\n} from '@perses-dev/core';\nimport { TimeOption } from '../model';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector } from './TimeRangeSelector';\n\ninterface DateTimeRangePickerProps {\n  value: TimeRangeValue;\n  onChange: (value: TimeRangeValue) => void;\n  timeOptions: TimeOption[];\n  height?: string;\n}\n\nexport function DateTimeRangePicker(props: DateTimeRangePickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  return (\n    <Stack direction=\"row\" spacing={1} height={height}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={timeOptions}\n            value={value}\n            height={height}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              onChange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","isRelativeTimeRange","toAbsoluteTimeRange","AbsoluteTimePicker","TimeRangeSelector","DateTimeRangePicker","props","value","onChange","timeOptions","height","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onCancel","fullWidth","ref","onSelectChange","event","duration","target","relativeTimeInput","pastDuration","end","Date","onCustomClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,QAAQ;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,gBAAgB;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,mBAAmB;AAE1B,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AASxD,OAAO,SAASC,oBAAoBC,KAA+B;IACjE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGJ;IAEjD,MAAM,CAACK,wBAAwBC,0BAA0B,GAAGjB,SAAS;IACrE,MAAMkB,WAAWnB;IAEjB,MAAMoB,qBAAqBlB,QAAQ;QACjC,OAAOK,oBAAoBM,SAASL,oBAAoBK,SAASA;IACnE,GAAG;QAACA;KAAM;IAEV,qBACE,MAACP;QAAMe,WAAU;QAAMC,SAAS;QAAGN,QAAQA;;0BACzC,KAACX;gBACCc,UAAUA,SAASI,OAAO;gBAC1BC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,MAAMV;gBACNW,SAAS,IAAMV,0BAA0B;gBACzCW,IAAI,CAACC,QAAW,CAAA;wBACdC,SAASD,MAAMR,OAAO,CAAC;oBACzB,CAAA;0BAEA,cAAA,KAACb;oBACCuB,kBAAkBZ;oBAClBN,UAAU,CAACD;wBACTC,SAASD;wBACTK,0BAA0B;oBAC5B;oBACAe,UAAU,IAAMf,0BAA0B;;;0BAG9C,KAACd;gBAAY8B,SAAS;0BACpB,cAAA,KAAC/B;oBAAIgC,KAAKhB;8BACR,cAAA,KAACT;wBACCK,aAAaA;wBACbF,OAAOA;wBACPG,QAAQA;wBACRoB,gBAAgB,CAACC;4BACf,MAAMC,WAAWD,MAAME,MAAM,CAAC1B,KAAK;4BACnC,MAAM2B,oBAAuC;gCAC3CC,cAAcH;gCACdI,KAAK,IAAIC;4BACX;4BACA7B,SAAS0B;4BACTtB,0BAA0B;wBAC5B;wBACA0B,eAAe;4BACb1B,0BAA0B;wBAC5B;;;;;;AAMZ"}

package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts

@@ -1,13 +0,0 @@
-import { SelectChangeEvent } from '@mui/material';
-import { TimeRangeValue } from '@perses-dev/core';
-import { TimeOption } from '../model';
-interface TimeRangeSelectorProps {
-    value: TimeRangeValue;
-    timeOptions: TimeOption[];
-    onSelectChange: (event: SelectChangeEvent<string>) => void;
-    onCustomClick: () => void;
-    height?: string;
-}
-export declare function TimeRangeSelector(props: TimeRangeSelectorProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=TimeRangeSelector.d.ts.map

package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAqD9D"}