@perses-dev/components 0.0.0-snapshot-time-range-height-80d08fc

package/dist/UnitSelector/UnitSelector.test.js

@@ -0,0 +1,205 @@
+// Copyright 2022 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 } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UnitSelector } from './UnitSelector';
+describe('UnitSelector', ()=>{
+    const renderUnitSelector = (value, onChange = jest.fn())=>{
+        render(/*#__PURE__*/ _jsx("div", {
+            children: /*#__PURE__*/ _jsx(UnitSelector, {
+                value: value,
+                onChange: onChange
+            })
+        }));
+    };
+    const getUnitSelector = ()=>{
+        return screen.getByRole('combobox', {
+            name: 'Units'
+        });
+    };
+    const getDecimalSelector = ()=>{
+        return screen.getByRole('combobox', {
+            name: 'Decimal'
+        });
+    };
+    const getAbbreviateSwitch = ()=>{
+        return screen.getByRole('checkbox', {
+            name: 'Abbreviate'
+        });
+    };
+    it('can change the unit kind by clicking', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Minutes'
+        }, onChange);
+        const unitSelector = getUnitSelector();
+        userEvent.click(unitSelector);
+        const decimalOption = screen.getByRole('option', {
+            name: 'Decimal'
+        });
+        userEvent.click(decimalOption);
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal'
+        });
+    });
+    it('can change the unit kind using a keyboard', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Bytes'
+        }, onChange);
+        const unitSelector = getUnitSelector();
+        // Note that this tab order can change depending on the type because the
+        // abbreviate comes first and is disabled in some cases.
+        userEvent.tab();
+        expect(unitSelector).toHaveFocus();
+        userEvent.clear(unitSelector);
+        userEvent.keyboard('years');
+        screen.getByRole('option', {
+            name: 'Years'
+        });
+        userEvent.keyboard('{arrowup}{enter}');
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Years'
+        });
+    });
+    it('can change the decimal places by clicking', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal',
+            decimal_places: 0,
+            abbreviate: true
+        }, onChange);
+        userEvent.click(getDecimalSelector());
+        const decimalOption = screen.getByRole('option', {
+            name: '1'
+        });
+        userEvent.click(decimalOption);
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal',
+            decimal_places: 1,
+            abbreviate: true
+        });
+    });
+    it('can change the decimal places using a keyboard', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Percent'
+        }, onChange);
+        const decimalSelector = getDecimalSelector();
+        userEvent.tab();
+        userEvent.tab();
+        expect(decimalSelector).toHaveFocus();
+        userEvent.clear(decimalSelector);
+        userEvent.keyboard('3');
+        screen.getByRole('option', {
+            name: '3'
+        });
+        userEvent.keyboard('{arrowup}{enter}');
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Percent',
+            decimal_places: 3
+        });
+    });
+    it('can change abbreviate by clicking', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal',
+            decimal_places: 3,
+            abbreviate: true
+        }, onChange);
+        userEvent.click(getAbbreviateSwitch());
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal',
+            decimal_places: 3,
+            abbreviate: false
+        });
+    });
+    it('can change abbreviate using a keyboard', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal',
+            decimal_places: 0
+        }, onChange);
+        userEvent.tab();
+        userEvent.keyboard('{space}');
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal',
+            decimal_places: 0,
+            abbreviate: true
+        });
+    });
+    describe('with a time unit selected', ()=>{
+        it('does not allow the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'Minutes'
+            });
+            expect(getAbbreviateSwitch()).toBeDisabled();
+        });
+    });
+    describe('with a percent unit selected', ()=>{
+        it('allows the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Percent'
+            });
+            expect(getDecimalSelector()).toBeEnabled();
+        });
+        it('does not allow the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'PercentDecimal'
+            });
+            expect(getAbbreviateSwitch()).toBeDisabled();
+        });
+    });
+    describe('with a decimal unit selected', ()=>{
+        it('allows the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Decimal'
+            });
+            expect(getDecimalSelector()).toBeEnabled();
+        });
+        it('allows the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'Decimal'
+            });
+            expect(getAbbreviateSwitch()).toBeEnabled();
+        });
+    });
+    describe('with a bytes unit selected', ()=>{
+        it('allows the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Bytes'
+            });
+            expect(getDecimalSelector()).toBeEnabled();
+        });
+        it('does not allow the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'Bytes'
+            });
+            expect(getAbbreviateSwitch()).toBeDisabled();
+        });
+    });
+    it('should not show an option for disabled units', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal'
+        }, onChange);
+        userEvent.click(getUnitSelector());
+        const percentShorthandOption = screen.queryByRole('option', {
+            name: '%'
+        });
+        expect(percentShorthandOption).not.toBeInTheDocument();
+    });
+});
+
+//# sourceMappingURL=UnitSelector.test.js.map

package/dist/UnitSelector/UnitSelector.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/UnitSelector/UnitSelector.test.tsx"],"sourcesContent":["// Copyright 2022 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 { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { UnitOptions } from '../model';\nimport { UnitSelector } from './UnitSelector';\n\ndescribe('UnitSelector', () => {\n  const renderUnitSelector = (value: UnitOptions, onChange = jest.fn()) => {\n    render(\n      <div>\n        <UnitSelector value={value} onChange={onChange} />\n      </div>\n    );\n  };\n\n  const getUnitSelector = () => {\n    return screen.getByRole('combobox', { name: 'Units' });\n  };\n\n  const getDecimalSelector = () => {\n    return screen.getByRole('combobox', { name: 'Decimal' });\n  };\n\n  const getAbbreviateSwitch = () => {\n    return screen.getByRole('checkbox', { name: 'Abbreviate' });\n  };\n\n  it('can change the unit kind by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Minutes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    userEvent.click(unitSelector);\n    const decimalOption = screen.getByRole('option', {\n      name: 'Decimal',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n    });\n  });\n\n  it('can change the unit kind using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Bytes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    // Note that this tab order can change depending on the type because the\n    // abbreviate comes first and is disabled in some cases.\n    userEvent.tab();\n    expect(unitSelector).toHaveFocus();\n\n    userEvent.clear(unitSelector);\n    userEvent.keyboard('years');\n    screen.getByRole('option', {\n      name: 'Years',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Years',\n    });\n  });\n\n  it('can change the decimal places by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0, abbreviate: true }, onChange);\n\n    userEvent.click(getDecimalSelector());\n    const decimalOption = screen.getByRole('option', {\n      name: '1',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 1,\n      abbreviate: true,\n    });\n  });\n\n  it('can change the decimal places using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Percent' }, onChange);\n\n    const decimalSelector = getDecimalSelector();\n    userEvent.tab();\n    userEvent.tab();\n    expect(decimalSelector).toHaveFocus();\n\n    userEvent.clear(decimalSelector);\n    userEvent.keyboard('3');\n    screen.getByRole('option', {\n      name: '3',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Percent',\n      decimal_places: 3,\n    });\n  });\n\n  it('can change abbreviate by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 3, abbreviate: true }, onChange);\n\n    userEvent.click(getAbbreviateSwitch());\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 3,\n      abbreviate: false,\n    });\n  });\n\n  it('can change abbreviate using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0 }, onChange);\n\n    userEvent.tab();\n    userEvent.keyboard('{space}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 0,\n      abbreviate: true,\n    });\n  });\n\n  describe('with a time unit selected', () => {\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Minutes' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a percent unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Percent' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'PercentDecimal' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a decimal unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('allows the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getAbbreviateSwitch()).toBeEnabled();\n    });\n  });\n\n  describe('with a bytes unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  it('should not show an option for disabled units', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal' }, onChange);\n\n    userEvent.click(getUnitSelector());\n    const percentShorthandOption = screen.queryByRole('option', {\n      name: '%',\n    });\n    expect(percentShorthandOption).not.toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","userEvent","UnitSelector","describe","renderUnitSelector","value","onChange","jest","fn","div","getUnitSelector","getByRole","name","getDecimalSelector","getAbbreviateSwitch","it","kind","unitSelector","click","decimalOption","expect","toHaveBeenCalledWith","tab","toHaveFocus","clear","keyboard","decimal_places","abbreviate","decimalSelector","toBeDisabled","toBeEnabled","percentShorthandOption","queryByRole","not","toBeInTheDocument"],"mappings":"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"}

package/dist/UnitSelector/index.d.ts

@@ -0,0 +1,2 @@
+export * from './UnitSelector';
+//# sourceMappingURL=index.d.ts.map

package/dist/UnitSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/UnitSelector/index.ts"],"names":[],"mappings":"AAaA,cAAc,gBAAgB,CAAC"}

package/dist/UnitSelector/index.js

@@ -0,0 +1,15 @@
+// Copyright 2022 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.
+export * from './UnitSelector';
+
+//# sourceMappingURL=index.js.map

package/dist/UnitSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/UnitSelector/index.ts"],"sourcesContent":["// Copyright 2022 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 './UnitSelector';\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,gBAAgB,CAAC"}

package/dist/YAxisLabel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface YAxisLabelProps {
+    name: string;
+    height: number;
+}
+export declare function YAxisLabel({ name, height }: YAxisLabelProps): JSX.Element;
+export {};
+//# sourceMappingURL=YAxisLabel.d.ts.map

package/dist/YAxisLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YAxisLabel.d.ts","sourceRoot":"","sources":["../src/YAxisLabel.tsx"],"names":[],"mappings":";AAeA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,eAAe,eA0B3D"}

package/dist/YAxisLabel.js

@@ -0,0 +1,39 @@
+// Copyright 2022 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 } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+export function YAxisLabel({ name , height  }) {
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'inline-block',
+            maxWidth: height,
+            position: 'absolute',
+            top: '45%',
+            transform: 'translateX(-50%) rotate(-90deg)',
+            transformOrigin: 'top',
+            textAlign: 'center',
+            zIndex: 1
+        },
+        children: /*#__PURE__*/ _jsx(Typography, {
+            variant: "body1",
+            sx: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: name
+        })
+    });
+}
+
+//# sourceMappingURL=YAxisLabel.js.map

package/dist/YAxisLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 2022 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 { Box, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: '45%',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","whiteSpace","overflow","textOverflow"],"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;AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAOhD,OAAO,SAASC,UAAU,CAAC,EAAEC,IAAI,CAAA,EAAEC,MAAM,CAAA,EAAmB,EAAE;IAC5D,qBACE,KAACJ,GAAG;QACFK,EAAE,EAAE;YACFC,OAAO,EAAE,cAAc;YACvBC,QAAQ,EAAEH,MAAM;YAChBI,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,SAAS,EAAE,iCAAiC;YAC5CC,eAAe,EAAE,KAAK;YACtBC,SAAS,EAAE,QAAQ;YACnBC,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACZ,UAAU;YACTa,OAAO,EAAC,OAAO;YACfT,EAAE,EAAE;gBACFU,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEAd,IAAI;UACM;MACT,CACN;AACJ,CAAC"}

package/dist/cjs/DateTimeRangePicker/AbsoluteTimePicker.js

@@ -0,0 +1,187 @@
+// Copyright 2022 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, "AbsoluteTimePicker", {
+    enumerable: true,
+    get: ()=>AbsoluteTimePicker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _xDatePickers = require("@mui/x-date-pickers");
+const _adapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
+const _utils = require("./utils");
+const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
+    const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
+    const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
+    const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    // validate start and end time, propagate changes
+    const updateDateRange = (input, isStartDate)=>{
+        const newDate = new Date(input);
+        if (isStartDate === true) {
+            const isValidDateRange = (0, _utils.validateDateRange)(newDate, timeRange.end);
+            if (isValidDateRange === true) {
+                setTimeRange((current)=>{
+                    const updatedRange = {
+                        start: newDate,
+                        end: current.end
+                    };
+                    onChange(updatedRange);
+                    return updatedRange;
+                });
+            }
+        } else {
+            const isValidDateRange1 = (0, _utils.validateDateRange)(timeRange.start, newDate);
+            if (isValidDateRange1 === true) {
+                setTimeRange((current)=>{
+                    const updatedRange = {
+                        start: current.start,
+                        end: newDate
+                    };
+                    onChange(updatedRange);
+                    return updatedRange;
+                });
+            }
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.LocalizationProvider, {
+        dateAdapter: _adapterDateFns.AdapterDateFns,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            sx: (theme)=>({
+                    padding: theme.spacing(1, 0, 2)
+                }),
+            children: [
+                showStartCalendar && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: (theme)=>({
+                            // TODO: create separate reusable calendar component
+                            '.MuiPickerStaticWrapper-content': {
+                                backgroundColor: theme.palette.background.default
+                            },
+                            // reposition AM and PM buttons
+                            '.MuiIconButton-sizeMedium': {
+                                top: 80,
+                                bottom: 'auto',
+                                margin: theme.spacing(0, 3)
+                            }
+                        }),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "h3",
+                            padding: 1,
+                            children: "Select Start Time"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.StaticDateTimePicker, {
+                            displayStaticWrapperAs: "desktop",
+                            openTo: "day",
+                            disableHighlightToday: true,
+                            value: initialTimeRange.start,
+                            onChange: (newValue)=>{
+                                if (newValue === null) return;
+                                setTimeRange((current)=>{
+                                    return {
+                                        start: newValue,
+                                        end: current.end
+                                    };
+                                });
+                            },
+                            onAccept: ()=>{
+                                setShowStartCalendar(false);
+                            },
+                            renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    ...params
+                                })
+                        })
+                    ]
+                }),
+                !showStartCalendar && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: (theme)=>({
+                            '.MuiPickerStaticWrapper-content': {
+                                backgroundColor: theme.palette.background.default
+                            },
+                            // reposition AM and PM buttons
+                            '.MuiIconButton-sizeMedium': {
+                                top: 80,
+                                bottom: 'auto',
+                                margin: theme.spacing(0, 3)
+                            }
+                        }),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "h3",
+                            padding: 1,
+                            children: "Select End Time"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.StaticDateTimePicker, {
+                            displayStaticWrapperAs: "desktop",
+                            openTo: "day",
+                            disableHighlightToday: true,
+                            value: initialTimeRange.end,
+                            minDateTime: timeRange.start,
+                            onChange: (newValue)=>{
+                                if (newValue === null) return;
+                                setTimeRange((current)=>{
+                                    return {
+                                        start: current.start,
+                                        end: newValue
+                                    };
+                                });
+                            },
+                            onAccept: ()=>{
+                                setShowStartCalendar(true);
+                                onChange(timeRange);
+                            },
+                            renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    ...params
+                                })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    gap: 1,
+                    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
+                                updateDateRange(event.target.value, true);
+                            },
+                            value: formatWithUserTimeZone(timeRange.start, DATE_TIME_FORMAT),
+                            label: "Start Time",
+                            placeholder: "mm/dd/yyyy hh:mm",
+                            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
+                            type: "tel"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            onChange: (event)=>{
+                                updateDateRange(event.target.value, false);
+                            },
+                            value: formatWithUserTimeZone(timeRange.end, DATE_TIME_FORMAT),
+                            label: "End Time",
+                            placeholder: "mm/dd/yyyy hh:mm",
+                            type: "tel"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};

package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js

@@ -0,0 +1,85 @@
+// Copyright 2022 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, "DateTimeRangePicker", {
+    enumerable: true,
+    get: ()=>DateTimeRangePicker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+const _absoluteTimePicker = require("./AbsoluteTimePicker");
+const _timeRangeSelector = require("./TimeRangeSelector");
+function DateTimeRangePicker(props) {
+    const { value , onChange , timeOptions , height  } = props;
+    const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
+    const anchorEl = (0, _react.useRef)();
+    const convertedTimeRange = (0, _react.useMemo)(()=>{
+        return (0, _core.isRelativeTimeRange)(value) ? (0, _core.toAbsoluteTimeRange)(value) : value;
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        height: height,
+        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)(_absoluteTimePicker.AbsoluteTimePicker, {
+                    initialTimeRange: convertedTimeRange,
+                    onChange: (value)=>{
+                        onChange(value);
+                        setShowCustomDateSelector(false);
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                fullWidth: true,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    ref: anchorEl,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeSelector.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);
+                        }
+                    })
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/DateTimeRangePicker/TimeRangeSelector.js

@@ -0,0 +1,69 @@
+// Copyright 2022 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: ()=>TimeRangeSelector
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _calendar = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Calendar"));
+const _core = require("@perses-dev/core");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
+const _utils = require("./utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+function TimeRangeSelector(props) {
+    const { value , timeOptions , onSelectChange , onCustomClick , height  } = props;
+    const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const formattedValue = !(0, _core.isRelativeTimeRange)(value) ? (0, _utils.formatAbsoluteRange)(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+        value: formattedValue,
+        onChange: onSelectChange,
+        IconComponent: _calendar.default,
+        sx: {
+            '.MuiSelect-icon': {
+                marginTop: '1px'
+            },
+            '.MuiSelect-select': height ? {
+                lineHeight: height,
+                paddingY: 0
+            } : {}
+        },
+        children: [
+            timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                    value: item.value.pastDuration,
+                    children: item.display
+                }, idx)),
+            (0, _core.isRelativeTimeRange)(value) ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                onClick: ()=>{
+                    onCustomClick();
+                },
+                children: "Custom time range"
+            }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                value: formattedValue,
+                onClick: ()=>{
+                    onCustomClick();
+                },
+                children: formattedValue
+            })
+        ]
+    });
+}