@perses-dev/components 0.46.0-rc1 → 0.47.0-rc0

package/dist/DateTimeRangePicker/TimeRangeSelector.js

@@ -1,67 +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 { MenuItem, Select } from '@mui/material';
-import Calendar from 'mdi-material-ui/Calendar';
-import { isRelativeTimeRange } from '@perses-dev/core';
-import { useTimeZone } from '../context/TimeZoneProvider';
-import { formatAbsoluteRange } from './utils';
-const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
-export function TimeRangeSelector(props) {
-    const { value, timeOptions, onSelectChange, onCustomClick, height } = props;
-    const { timeZone } = useTimeZone();
-    const formattedValue = !isRelativeTimeRange(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
-    return /*#__PURE__*/ _jsxs(Select, {
-        value: formattedValue,
-        onChange: onSelectChange,
-        IconComponent: Calendar,
-        inputProps: {
-            'aria-label': `Select time range. Currently set to ${formattedValue}`
-        },
-        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__*/ _jsx(MenuItem, {
-                    value: item.value.pastDuration,
-                    children: item.display
-                }, idx)),
-            isRelativeTimeRange(value) ? /*#__PURE__*/ _jsx(MenuItem, {
-                onClick: ()=>{
-                    onCustomClick();
-                },
-                children: "Custom time range"
-            }) : /*#__PURE__*/ _jsx(MenuItem, {
-                value: formattedValue,
-                onClick: ()=>{
-                    onCustomClick();
-                },
-                children: formattedValue
-            })
-        ]
-    });
-}
-
-//# sourceMappingURL=TimeRangeSelector.js.map

package/dist/DateTimeRangePicker/TimeRangeSelector.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { TimeOption } from '../model';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      inputProps={{\n        'aria-label': `Select time range. Currently set to ${formattedValue}`,\n      }}\n      sx={{\n        // `transform: none` prevents calendar icon from flipping over when menu is open\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n          transform: 'none',\n        },\n        // paddingRight creates more space for the calendar icon (it's a bigger icon)\n        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n          paddingRight: '36px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","inputProps","sx","marginTop","transform","paddingRight","lineHeight","paddingY","map","item","idx","display","onClick"],"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,QAAQ,EAAEC,MAAM,QAA2B,gBAAgB;AACpE,OAAOC,cAAc,2BAA2B;AAChD,SAAyBC,mBAAmB,QAAQ,mBAAmB;AACvE,SAASC,WAAW,QAAQ,8BAA8B;AAE1D,SAASC,mBAAmB,QAAQ,UAAU;AAE9C,MAAMC,mBAAmB;AAUzB,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,cAAc,EAAEC,aAAa,EAAEC,MAAM,EAAE,GAAGL;IACtE,MAAM,EAAEM,QAAQ,EAAE,GAAGV;IACrB,MAAMW,iBAAiB,CAACZ,oBAAoBM,SACxCJ,oBAAoBI,OAAOH,kBAAkBQ,YAC7CL,MAAMO,YAAY;IACtB,qBACE,MAACf;QACCQ,OAAOM;QACPE,UAAUN;QACVO,eAAehB;QACfiB,YAAY;YACV,cAAc,CAAC,oCAAoC,EAAEJ,eAAe,CAAC;QACvE;QACAK,IAAI;YACF,gFAAgF;YAChF,mBAAmB;gBACjBC,WAAW;gBACXC,WAAW;YACb;YACA,6EAA6E;YAC7E,2DAA2D;gBACzDC,cAAc;YAChB;YACA,qBAAqBV,SAAS;gBAAEW,YAAYX;gBAAQY,UAAU;YAAE,IAAI,CAAC;QACvE;;YAECf,YAAYgB,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAAC5B;oBAAmBS,OAAOkB,KAAKlB,KAAK,CAACO,YAAY;8BAC/CW,KAAKE,OAAO;mBADAD;YAKhBzB,oBAAoBM,uBACnB,KAACT;gBACC8B,SAAS;oBACPlB;gBACF;0BACD;+BAID,KAACZ;gBACCS,OAAOM;gBACPe,SAAS;oBACPlB;gBACF;0BAECG;;;;AAKX"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/DateTimeRangePicker/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/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 './DateTimeRangePicker';\nexport * from './TimeRangeSelector';\nexport * from './AbsoluteTimePicker';\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,wBAAwB;AACtC,cAAc,sBAAsB;AACpC,cAAc,uBAAuB"}

package/dist/DateTimeRangePicker/utils.d.ts

@@ -1,7 +0,0 @@
-import { AbsoluteTimeRange } from '@perses-dev/core';
-export declare function validateDateRange(startDate: Date, endDate: Date): boolean;
-/**
- * Format start and end time based on provided date format
- */
-export declare function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string, timeZone?: string): string;
-//# sourceMappingURL=utils.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/utils.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,WAW/D;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,UAItG"}

package/dist/DateTimeRangePicker/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/utils.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 { isBefore, isValid } from 'date-fns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { formatWithTimeZone } from '../utils';\n\n/*\n * Date validation and check if end is after start\n */\nexport function validateDateRange(startDate: Date, endDate: Date) {\n  // TODO: display error as helperText\n  if (!isValid(startDate) || !isValid(endDate)) {\n    console.error('Invalid Date');\n    return false;\n  }\n  if (!isBefore(startDate, endDate)) {\n    console.error('End Time is before Start Time');\n    return false;\n  }\n  return true;\n}\n\n/**\n * Format start and end time based on provided date format\n */\nexport function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string, timeZone?: string) {\n  const formattedStart = formatWithTimeZone(timeRange.start, dateFormat, timeZone);\n  const formattedEnd = formatWithTimeZone(timeRange.end, dateFormat, timeZone);\n  return `${formattedStart} - ${formattedEnd}`;\n}\n"],"names":["isBefore","isValid","formatWithTimeZone","validateDateRange","startDate","endDate","console","error","formatAbsoluteRange","timeRange","dateFormat","timeZone","formattedStart","start","formattedEnd","end"],"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,QAAQ,EAAEC,OAAO,QAAQ,WAAW;AAE7C,SAASC,kBAAkB,QAAQ,WAAW;AAE9C;;CAEC,GACD,OAAO,SAASC,kBAAkBC,SAAe,EAAEC,OAAa;IAC9D,oCAAoC;IACpC,IAAI,CAACJ,QAAQG,cAAc,CAACH,QAAQI,UAAU;QAC5CC,QAAQC,KAAK,CAAC;QACd,OAAO;IACT;IACA,IAAI,CAACP,SAASI,WAAWC,UAAU;QACjCC,QAAQC,KAAK,CAAC;QACd,OAAO;IACT;IACA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,SAASC,oBAAoBC,SAA4B,EAAEC,UAAkB,EAAEC,QAAiB;IACrG,MAAMC,iBAAiBV,mBAAmBO,UAAUI,KAAK,EAAEH,YAAYC;IACvE,MAAMG,eAAeZ,mBAAmBO,UAAUM,GAAG,EAAEL,YAAYC;IACnE,OAAO,CAAC,EAAEC,eAAe,GAAG,EAAEE,aAAa,CAAC;AAC9C"}

package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts

@@ -1,3 +0,0 @@
-import { ThresholdInputProps } from './ThresholdInput';
-export declare function ThresholdColorPicker({ color, onColorChange, label, }: Pick<ThresholdInputProps, 'color' | 'onColorChange' | 'label'>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ThresholdColorPicker.d.ts.map

package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThresholdColorPicker.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdColorPicker.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,aAAa,EACb,KAAK,GACN,EAAE,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,eAAe,GAAG,OAAO,CAAC,2CA8ChE"}

package/dist/ThresholdsEditor/ThresholdColorPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdColorPicker.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 React from 'react';\nimport { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { ColorPicker } from '../ColorPicker';\nimport { ThresholdInputProps } from './ThresholdInput';\n\nexport function ThresholdColorPicker({\n  color,\n  onColorChange,\n  label,\n}: Pick<ThresholdInputProps, 'color' | 'onColorChange' | 'label'>) {\n  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = () => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size=\"small\"\n        aria-label={`change threshold ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"threshold color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        PaperProps={{ sx: { padding: (theme) => theme.spacing(2) } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} onChange={onColorChange} palette={[defaultColor, ...palette]} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["React","styled","IconButton","Popover","CircleIcon","useChartsTheme","ColorPicker","ThresholdColorPicker","color","onColorChange","label","anchorEl","setAnchorEl","useState","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","size","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","PaperProps","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"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,OAAOA,WAAW,QAAQ;AAC1B,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,iBAAiB;AAG7C,OAAO,SAASC,qBAAqB,EACnCC,KAAK,EACLC,aAAa,EACbC,KAAK,EAC0D;IAC/D,MAAM,CAACC,UAAUC,YAAY,GAAGZ,MAAMa,QAAQ,CAA2B;IACzE,MAAMC,SAASC,QAAQJ;IAEvB,MAAMK,kBAAkB,CAACC;QACvBL,YAAYK,MAAMC,aAAa;IACjC;IAEA,MAAMC,mBAAmB;QACvBP,YAAY;IACd;IAEA,MAAM,EACJQ,YAAY,EAAEC,YAAY,EAAEC,OAAO,EAAE,EACtC,GAAGjB;IAEJ,qBACE;;0BACE,KAACkB;gBACCC,MAAK;gBACLC,cAAY,CAAC,iBAAiB,EAAEf,MAAM,MAAM,CAAC;gBAC7CgB,YAAYZ;gBACZa,WAAWnB;gBACXoB,SAASZ;0BAET,cAAA,KAACZ;;0BAEH,KAACD;gBACC0B,eAAY;gBACZC,MAAMhB;gBACNH,UAAUA;gBACVoB,SAASZ;gBACTa,YAAY;oBAAEC,IAAI;wBAAEC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;oBAAG;gBAAE;gBAC3DC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAACjC;oBAAYE,OAAOA;oBAAOiC,UAAUhC;oBAAea,SAAS;wBAACD;2BAAiBC;qBAAQ;;;;;AAI/F;AAEA,MAAMC,kBAAkBtB,OAAOC,YAAY;IACzCwC,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEhB,SAAS,EAAED,UAAU,EAAE,GAAM,CAAA;QACjCkB,iBAAiBlB,cAAcC,YAAY,CAAC,EAAEA,UAAU,EAAE,CAAC,GAAG;QAC9DnB,OAAOmB;IACT,CAAA"}

package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,88 +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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "DateTimeRangePicker", {
-    enumerable: true,
-    get: function() {
-        return 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);
-                    },
-                    onCancel: ()=>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

@@ -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.
-"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 _TimeZoneProvider = require("../context/TimeZoneProvider");
-const _utils = require("./utils");
-function _interop_require_default(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,
-        inputProps: {
-            'aria-label': `Select time range. Currently set to ${formattedValue}`
-        },
-        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: 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
-            })
-        ]
-    });
-}