@perses-dev/components 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-scatter-chart-embed-8efdfab

package/dist/YAxisLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/YAxisLabel.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 { 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: `calc(${height}px / 2)`,\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\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","aria-label","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,CAAC,KAAK,EAAEL,MAAM,CAAC,OAAO,CAAC;YAC5BM,SAAS,EAAE,iCAAiC;YAC5CC,eAAe,EAAE,KAAK;YACtBC,SAAS,EAAE,QAAQ;YACnBC,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACZ,UAAU;YACTa,OAAO,EAAC,OAAO;YACfC,YAAU,EAAC,cAAc;YACzBV,EAAE,EAAE;gBACFW,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEAf,IAAI;UACM;MACT,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../src/YAxisLabel.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 { 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: `calc(${height}px / 2)`,\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\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","aria-label","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,SAASA,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AAOhD,OAAO,SAASC,WAAW,EAAEC,KAAI,EAAEC,OAAM,EAAmB;IAC1D,qBACE,KAACJ;QACCK,IAAI;YACFC,SAAS;YACTC,UAAUH;YACVI,UAAU;YACVC,KAAK,CAAC,KAAK,EAAEL,OAAO,OAAO,CAAC;YAC5BM,WAAW;YACXC,iBAAiB;YACjBC,WAAW;YACXC,QAAQ;QACV;kBAEA,cAAA,KAACZ;YACCa,SAAQ;YACRC,cAAW;YACXV,IAAI;gBACFW,YAAY;gBACZC,UAAU;gBACVC,cAAc;YAChB;sBAECf;;;AAIT"}

package/dist/cjs/BarChart/BarChart.js

@@ -16,9 +16,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "BarChart", {
     enumerable: true,
-    get: ()=>BarChart
+    get: function() {
+        return BarChart;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _core = require("@perses-dev/core");
 const _core1 = require("echarts/core");
@@ -26,8 +28,9 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _material = require("@mui/material");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _echart = require("../EChart");
+const _ChartsProvider = require("../context/ChartsProvider");
+const _EChart = require("../EChart");
+const _utils = require("../utils");
 (0, _core1.use)([
     _charts.BarChart,
     _components.GridComponent,
@@ -39,12 +42,12 @@ const _echart = require("../EChart");
 const BAR_WIN_WIDTH = 14;
 const BAR_GAP = 6;
 function BarChart(props) {
-    const { width , height , data , unit ={
-        kind: 'Decimal'
+    const { width , height , data , format ={
+        unit: 'decimal'
     } , mode ='value'  } = props;
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     const option = (0, _react.useMemo)(()=>{
-        if (data == null) return chartsTheme.noDataOption;
+        if (data == null || !data.length) return chartsTheme.noDataOption;
         const source = [];
         data.map((d)=>{
             source.push([
@@ -65,7 +68,7 @@ function BarChart(props) {
                     source: source
                 }
             ],
-            xAxis: {},
+            xAxis: (0, _utils.getFormattedAxis)({}, format),
             yAxis: {
                 type: 'category',
                 splitLine: {
@@ -84,11 +87,11 @@ function BarChart(props) {
                     formatter: (params)=>{
                         if (mode === 'percentage') {
                             return params.data[1] && (0, _core.formatValue)(params.data[1], {
-                                kind: 'Percent',
-                                decimal_places: unit.decimal_places
+                                unit: 'percent',
+                                decimalPlaces: format.decimalPlaces
                             });
                         }
-                        return params.data[1] && (0, _core.formatValue)(params.data[1], unit);
+                        return params.data[1] && (0, _core.formatValue)(params.data[1], format);
                     },
                     barMinWidth: BAR_WIN_WIDTH,
                     barCategoryGap: BAR_GAP
@@ -101,7 +104,12 @@ function BarChart(props) {
             tooltip: {
                 appendToBody: true,
                 confine: true,
-                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${(0, _core.formatValue)(params.data[1], unit)}`
+                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${(0, _core.formatValue)(params.data[1], format)}`
+            },
+            // increase distance between grid and container to prevent y axis labels from getting cut off
+            grid: {
+                left: '5%',
+                right: '5%'
             }
         };
     }, [
@@ -109,15 +117,15 @@ function BarChart(props) {
         chartsTheme,
         width,
         mode,
-        unit
+        format
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             width: width,
             height: height,
             overflow: 'auto'
         },
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
             sx: {
                 minHeight: height,
                 height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%'

package/dist/cjs/BarChart/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./BarChart"), exports);
-function _exportStar(from, to) {
+_export_star(require("./BarChart"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/ColorPicker/ColorPicker.js

@@ -16,14 +16,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ColorPicker", {
     enumerable: true,
-    get: ()=>ColorPicker
+    get: function() {
+        return ColorPicker;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactColorful = require("react-colorful");
-const _circle = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Circle"));
-function _interopRequireDefault(obj) {
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactcolorful = require("react-colorful");
+const _Circle = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Circle"));
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -36,7 +38,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -83,29 +85,29 @@ const ColorPicker = ({ color , onChange , palette  })=>{
             onChange && onChange(e.target.value);
         }
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactColorful.HexColorPicker, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcolorful.HexColorPicker, {
                 color: color,
                 onChange: handleColorChange
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 direction: "row",
                 flexWrap: "wrap",
                 justifyContent: "space-evenly",
                 width: '200px',
-                children: palette && palette.map((color, i)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                children: palette && palette.map((color, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                         size: "small",
                         "aria-label": `change color to ${color}`,
                         sx: {
                             color
                         },
                         onClick: ()=>handleColorChange(color),
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_circle.default, {})
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Circle.default, {})
                     }, i))
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                 inputProps: {
                     'aria-label': 'enter hex color'
                 },

package/dist/cjs/ColorPicker/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./ColorPicker"), exports);
-function _exportStar(from, to) {
+_export_star(require("./ColorPicker"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/ContentWithLegend/ContentWithLegend.js

@@ -16,22 +16,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ContentWithLegend", {
     enumerable: true,
-    get: ()=>ContentWithLegend
+    get: function() {
+        return ContentWithLegend;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
-const _legend = require("../Legend");
-const _contentWithLegendModel = require("./model/content-with-legend-model");
-function _interopRequireDefault(obj) {
+const _Legend = require("../Legend");
+const _contentwithlegendmodel = require("./model/content-with-legend-model");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 function ContentWithLegend({ children , legendProps , width , height , spacing =0 , legendSize , minChildrenWidth =100 , minChildrenHeight =100  }) {
     const theme = (0, _material.useTheme)();
-    const { content , legend , margin  } = (0, _contentWithLegendModel.getContentWithLegendLayout)({
+    const { content , legend , margin  } = (0, _contentwithlegendmodel.getContentWithLegendLayout)({
         width,
         height,
         legendProps,
@@ -41,7 +43,7 @@ function ContentWithLegend({ children , legendProps , width , height , spacing =
         theme,
         legendSize: (0, _core.getLegendSize)(legendSize)
     });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             width,
             height,
@@ -49,7 +51,7 @@ function ContentWithLegend({ children , legendProps , width , height , spacing =
             overflow: 'hidden'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                 sx: {
                     width: content.width,
                     height: content.height,
@@ -62,7 +64,7 @@ function ContentWithLegend({ children , legendProps , width , height , spacing =
                     height: content.height
                 }) : children
             }),
-            legendProps && legend.show && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_legend.Legend, {
+            legendProps && legend.show && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Legend.Legend, {
                 ...legendProps,
                 height: legend.height,
                 width: legend.width

package/dist/cjs/ContentWithLegend/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./ContentWithLegend"), exports);
-function _exportStar(from, to) {
+_export_star(require("./ContentWithLegend"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js

@@ -21,23 +21,27 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TABLE_LEGEND_SIZE: ()=>TABLE_LEGEND_SIZE,
-    getContentWithLegendLayout: ()=>getContentWithLegendLayout
+    TABLE_LEGEND_SIZE: function() {
+        return TABLE_LEGEND_SIZE;
+    },
+    getContentWithLegendLayout: function() {
+        return getContentWithLegendLayout;
+    }
 });
 const _core = require("@perses-dev/core");
-const _table = require("../../Table");
+const _Table = require("../../Table");
 const TABLE_LEGEND_SIZE = {
-    Medium: {
+    medium: {
         // 5 rows plus header. Value to be multiplied by row height in pixels.
-        Bottom: 6,
+        bottom: 6,
         // Pixel value
-        Right: 250
+        right: 250
     },
-    Small: {
+    small: {
         // 3 rows plus header. Value to be multiplied by row height in pixels.
-        Bottom: 4,
+        bottom: 4,
         // Pixel value
-        Right: 150
+        right: 150
     }
 };
 const PANEL_HEIGHT_LG_BREAKPOINT = 300;
@@ -68,36 +72,36 @@ function getContentWithLegendLayout({ width , height , legendProps , legendSize
     const mode = (0, _core.getLegendMode)(legendOptions.mode);
     let legendWidth;
     let legendHeight;
-    if (mode === 'List') {
+    if (mode === 'list') {
         // TODO: normalize list to share similar height options as the table
         // when we add more size options.
-        legendWidth = position === 'Right' ? 200 : width;
+        legendWidth = position === 'right' ? 200 : width;
         // TODO: account for number of legend items returned when adjusting legend spacing
         legendHeight = LEGEND_HEIGHT_SM;
-        if (position === 'Right') {
+        if (position === 'right') {
             legendHeight = height;
         } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {
             legendHeight = LEGEND_HEIGHT_LG;
         }
     } else {
-        var ref;
+        var _legendProps_tableProps;
         // Table mode
-        const tableLayout = (0, _table.getTableCellLayout)(theme, 'compact');
-        const tableColumns = (legendProps === null || legendProps === void 0 ? void 0 : (ref = legendProps.tableProps) === null || ref === void 0 ? void 0 : ref.columns) || [];
+        const tableLayout = (0, _Table.getTableCellLayout)(theme, 'compact');
+        const tableColumns = (legendProps === null || legendProps === void 0 ? void 0 : (_legendProps_tableProps = legendProps.tableProps) === null || _legendProps_tableProps === void 0 ? void 0 : _legendProps_tableProps.columns) || [];
         const columnsWidth = tableColumns.reduce((total, col)=>{
             if (typeof col.width === 'number') {
                 total += col.width;
             }
             return total;
         }, 0);
-        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE[legendSize]['Right'] + columnsWidth : width;
+        legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;
         // Use the smaller of the size-based row count or the number of legend items + 1 for the header.
-        const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['Bottom'], legendProps.data.length + 1);
-        legendHeight = position === 'Bottom' ? rowsToShow * tableLayout.height : height;
+        const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);
+        legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;
     }
-    const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;
-    const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;
-    if (position === 'Right' && contentWidth < minChildrenWidth || position === 'Bottom' && contentHeight < minChildrenHeight) {
+    const contentWidth = position === 'right' ? width - legendWidth - spacing : width;
+    const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;
+    if (position === 'right' && contentWidth < minChildrenWidth || position === 'bottom' && contentHeight < minChildrenHeight) {
         // Legend does not fit. Just show the content.
         return noLegendLayout;
     }
@@ -112,8 +116,8 @@ function getContentWithLegendLayout({ width , height , legendProps , legendSize
             height: contentHeight
         },
         margin: {
-            right: position === 'Right' ? spacing : 0,
-            bottom: position === 'Bottom' ? spacing : 0
+            right: position === 'right' ? spacing : 0,
+            bottom: position === 'bottom' ? spacing : 0
         }
     };
 }

package/dist/cjs/DateTimeRangePicker/AbsoluteTimePicker.js

@@ -16,18 +16,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "AbsoluteTimePicker", {
     enumerable: true,
-    get: ()=>AbsoluteTimePicker
+    get: function() {
+        return AbsoluteTimePicker;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+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 _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 , onCancel  })=>{
-    const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const { formatWithUserTimeZone  } = (0, _TimeZoneProvider.useTimeZone)();
     // Time range values as dates that can be used as a time range.
     const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
     // Time range values as strings used to populate the text inputs. May not
@@ -82,34 +84,29 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=>{
             onChange(newDates);
         }
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.LocalizationProvider, {
-        dateAdapter: _adapterDateFns.AdapterDateFns,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    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, {
+                showStartCalendar && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                     sx: (theme)=>({
                             // TODO: create separate reusable calendar component
-                            '.MuiPickerStaticWrapper-content': {
+                            '.MuiPickersLayout-contentWrapper': {
                                 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, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             variant: "h3",
                             padding: 1,
+                            paddingLeft: 2,
                             children: "Select Start Time"
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.StaticDateTimePicker, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.StaticDateTimePicker, {
                             displayStaticWrapperAs: "desktop",
                             openTo: "day",
                             disableHighlightToday: true,
@@ -120,32 +117,24 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=>{
                             },
                             onAccept: ()=>{
                                 setShowStartCalendar(false);
-                            },
-                            renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    ...params
-                                })
+                            }
                         })
                     ]
                 }),
-                !showStartCalendar && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                !showStartCalendar && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                     sx: (theme)=>({
-                            '.MuiPickerStaticWrapper-content': {
+                            '.MuiPickersLayout-contentWrapper': {
                                 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, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             variant: "h3",
                             padding: 1,
+                            paddingLeft: 2,
                             children: "Select End Time"
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.StaticDateTimePicker, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.StaticDateTimePicker, {
                             displayStaticWrapperAs: "desktop",
                             openTo: "day",
                             disableHighlightToday: true,
@@ -159,21 +148,18 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=>{
                                 if (newValue === null) return;
                                 setShowStartCalendar(true);
                                 onChangeEndTime(newValue);
-                            },
-                            renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    ...params
-                                })
+                            }
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                     direction: "row",
                     alignItems: "center",
                     gap: 1,
                     pl: 1,
                     pr: 1,
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                             onChange: (event)=>{
                                 // TODO: add helperText, fix validation after we decide on form state solution
                                 onChangeStartTime(event.target.value);
@@ -185,7 +171,7 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=>{
                             // 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, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                             onChange: (event)=>{
                                 onChangeEndTime(event.target.value);
                             },
@@ -197,20 +183,20 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=>{
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                     direction: "row",
                     sx: {
                         padding: (theme)=>theme.spacing(0, 1)
                     },
                     gap: 1,
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                             variant: "contained",
                             onClick: ()=>onApply(),
                             fullWidth: true,
                             children: "Apply"
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                             variant: "outlined",
                             onClick: ()=>onCancel(),
                             fullWidth: true,

package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js

@@ -16,14 +16,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DateTimeRangePicker", {
     enumerable: true,
-    get: ()=>DateTimeRangePicker
+    get: function() {
+        return DateTimeRangePicker;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+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");
+const _AbsoluteTimePicker = require("./AbsoluteTimePicker");
+const _TimeRangeSelector = require("./TimeRangeSelector");
 function DateTimeRangePicker(props) {
     const { value , onChange , timeOptions , height  } = props;
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
@@ -33,12 +35,12 @@ function DateTimeRangePicker(props) {
     }, [
         value
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         direction: "row",
         spacing: 1,
         height: height,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
                 anchorEl: anchorEl.current,
                 anchorOrigin: {
                     vertical: 'bottom',
@@ -49,7 +51,7 @@ function DateTimeRangePicker(props) {
                 sx: (theme)=>({
                         padding: theme.spacing(2)
                     }),
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_absoluteTimePicker.AbsoluteTimePicker, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AbsoluteTimePicker.AbsoluteTimePicker, {
                     initialTimeRange: convertedTimeRange,
                     onChange: (value)=>{
                         onChange(value);
@@ -58,11 +60,11 @@ function DateTimeRangePicker(props) {
                     onCancel: ()=>setShowCustomDateSelector(false)
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
                 fullWidth: true,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                     ref: anchorEl,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeSelector.TimeRangeSelector, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeSelector.TimeRangeSelector, {
                         timeOptions: timeOptions,
                         value: value,
                         height: height,