@perses-dev/components 0.38.0 → 0.40.0

package/dist/cjs/ThresholdsEditor/ThresholdColorPicker.js

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ThresholdColorPicker", {
     enumerable: true,
-    get: ()=>ThresholdColorPicker
+    get: function() {
+        return ThresholdColorPicker;
+    }
 });
-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 _circle = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Circle"));
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _colorPicker = require("../ColorPicker");
-function _interopRequireDefault(obj) {
+const _Circle = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Circle"));
+const _ChartsProvider = require("../context/ChartsProvider");
+const _ColorPicker = require("../ColorPicker");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -38,18 +40,18 @@ function ThresholdColorPicker({ color , onColorChange , label  }) {
     const closeColorPicker = ()=>{
         setAnchorEl(null);
     };
-    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsThemeProvider.useChartsTheme)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    const { thresholds: { defaultColor , palette  }  } = (0, _ChartsProvider.useChartsTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(ColorIconButton, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ColorIconButton, {
                 size: "small",
                 "aria-label": `change threshold ${label} color`,
                 isSelected: isOpen,
                 iconColor: color,
                 onClick: openColorPicker,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_circle.default, {})
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Circle.default, {})
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
                 "data-testid": "threshold color picker",
                 open: isOpen,
                 anchorEl: anchorEl,
@@ -67,7 +69,7 @@ function ThresholdColorPicker({ color , onColorChange , label  }) {
                     vertical: 'top',
                     horizontal: 'right'
                 },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_colorPicker.ColorPicker, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorPicker.ColorPicker, {
                     color: color,
                     onChange: onColorChange,
                     palette: [

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -16,37 +16,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ThresholdInput", {
     enumerable: true,
-    get: ()=>ThresholdInput
+    get: function() {
+        return ThresholdInput;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
-const _thresholdColorPicker = require("./ThresholdColorPicker");
-function _interopRequireDefault(obj) {
+const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
+const _ThresholdColorPicker = require("./ThresholdColorPicker");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 function ThresholdInput({ inputRef , label , color , value , mode , onChange , onColorChange , onBlur , onDelete  }) {
     const [key, setKey] = (0, _react.useState)(0); // use key to cause input to lose focus when pressing enter
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         flex: 1,
         direction: "row",
         alignItems: "center",
         justifyContent: "space-between",
         spacing: 1,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_thresholdColorPicker.ThresholdColorPicker, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ThresholdColorPicker.ThresholdColorPicker, {
                 label: label,
                 color: color,
                 onColorChange: onColorChange
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormLabel, {
                 htmlFor: label,
                 children: label
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                 id: label,
                 inputRef: inputRef,
                 type: "number",
@@ -61,17 +63,17 @@ function ThresholdInput({ inputRef , label , color , value , mode , onChange , o
                     }
                 },
                 InputProps: {
-                    endAdornment: mode === 'Percent' ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    endAdornment: mode === 'percent' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         paddingX: 1,
                         children: "%"
                     }) : undefined
                 }
             }, key),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                 "aria-label": `delete threshold ${label}`,
                 size: "small",
                 onClick: onDelete,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
             })
         ]
     });

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -16,20 +16,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ThresholdsEditor", {
     enumerable: true,
-    get: ()=>ThresholdsEditor
+    get: function() {
+        return ThresholdsEditor;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _immer = /*#__PURE__*/ _interopRequireDefault(require("immer"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _immer = /*#__PURE__*/ _interop_require_default(require("immer"));
 const _material = require("@mui/material");
-const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
 const _system = require("@mui/system");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _optionsEditorLayout = require("../OptionsEditorLayout");
-const _infoTooltip = require("../InfoTooltip");
-const _thresholdColorPicker = require("./ThresholdColorPicker");
-const _thresholdInput = require("./ThresholdInput");
-function _interopRequireDefault(obj) {
+const _ChartsProvider = require("../context/ChartsProvider");
+const _OptionsEditorLayout = require("../OptionsEditorLayout");
+const _InfoTooltip = require("../InfoTooltip");
+const _ThresholdColorPicker = require("./ThresholdColorPicker");
+const _ThresholdInput = require("./ThresholdInput");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -42,7 +44,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;
     }
@@ -75,9 +77,10 @@ function _interopRequireWildcard(obj, nodeInterop) {
 }
 const DEFAULT_STEP = 10;
 function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercentMode  }) {
-    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsThemeProvider.useChartsTheme)();
-    var ref;
-    const defaultThresholdColor = (ref = thresholds === null || thresholds === void 0 ? void 0 : thresholds.default_color) !== null && ref !== void 0 ? ref : defaultColor;
+    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
+    const { thresholds: { defaultColor , palette  }  } = chartsTheme;
+    var _thresholds_defaultColor;
+    const defaultThresholdColor = (_thresholds_defaultColor = thresholds === null || thresholds === void 0 ? void 0 : thresholds.defaultColor) !== null && _thresholds_defaultColor !== void 0 ? _thresholds_defaultColor : defaultColor;
     const [steps, setSteps] = (0, _react.useState)(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
     (0, _react.useEffect)(()=>{
         setSteps(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
@@ -88,9 +91,9 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
     const recentlyAddedInputRef = (0, _react.useRef)(null);
     const focusRef = (0, _react.useRef)(false);
     (0, _react.useEffect)(()=>{
-        var ref;
+        var _recentlyAddedInputRef_current;
         if (!recentlyAddedInputRef.current || !focusRef.current) return;
-        (ref = recentlyAddedInputRef.current) === null || ref === void 0 ? void 0 : ref.focus();
+        (_recentlyAddedInputRef_current = recentlyAddedInputRef.current) === null || _recentlyAddedInputRef_current === void 0 ? void 0 : _recentlyAddedInputRef_current.focus();
         focusRef.current = false;
     }, [
         steps === null || steps === void 0 ? void 0 : steps.length
@@ -118,11 +121,11 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
     const handleDefaultColorChange = (color)=>{
         if (thresholds !== undefined) {
             onChange((0, _immer.default)(thresholds, (draft)=>{
-                draft.default_color = color;
+                draft.defaultColor = color;
             }));
         } else {
             onChange({
-                default_color: color
+                defaultColor: color
             });
         }
     };
@@ -173,12 +176,12 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                 const steps = draft.steps;
                 if (steps === null || steps === void 0 ? void 0 : steps.length) {
                     const lastStep = steps[steps.length - 1];
-                    var _length;
-                    const color = (_length = palette[steps.length]) !== null && _length !== void 0 ? _length : getRandomColor(); // we will assign color from the palette first, then generate random color
-                    var ref;
+                    var _palette_steps_length;
+                    const color = (_palette_steps_length = palette[steps.length]) !== null && _palette_steps_length !== void 0 ? _palette_steps_length : getRandomColor(); // we will assign color from the palette first, then generate random color
+                    var _lastStep_value;
                     steps.push({
                         color,
-                        value: ((ref = lastStep === null || lastStep === void 0 ? void 0 : lastStep.value) !== null && ref !== void 0 ? ref : 0) + DEFAULT_STEP
+                        value: ((_lastStep_value = lastStep === null || lastStep === void 0 ? void 0 : lastStep.value) !== null && _lastStep_value !== void 0 ? _lastStep_value : 0) + DEFAULT_STEP
                     }); // set new threshold value to last step value + 10
                 } else if (steps) {
                     steps.push({
@@ -189,7 +192,7 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
         }
     };
     const handleModeChange = (event, value)=>{
-        const mode = value === 'Percent' ? 'Percent' : undefined;
+        const mode = value === 'percent' ? 'percent' : undefined;
         if (thresholds !== undefined) {
             onChange((0, _immer.default)(thresholds, (draft)=>{
                 draft.mode = mode;
@@ -200,43 +203,43 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
             });
         }
     };
-    var ref1, _color, ref2;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_optionsEditorLayout.OptionsEditorGroup, {
+    var _thresholds_mode, _step_color, _ref;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_OptionsEditorLayout.OptionsEditorGroup, {
         title: "Thresholds",
-        icon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
+        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InfoTooltip.InfoTooltip, {
             description: 'Add threshold',
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                 size: "small",
                 "aria-label": "add threshold",
                 onClick: addThresholdInput,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {})
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
             })
         }),
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
                 label: "Mode",
                 description: "Percentage means thresholds relative to min & max",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.ToggleButtonGroup, {
+                control: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ToggleButtonGroup, {
                     exclusive: true,
                     disabled: disablePercentMode,
-                    value: (ref1 = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && ref1 !== void 0 ? ref1 : 'Absolute',
+                    value: (_thresholds_mode = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && _thresholds_mode !== void 0 ? _thresholds_mode : 'absolute',
                     onChange: handleModeChange,
                     sx: {
                         height: '36px',
                         marginLeft: 'auto'
                     },
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ToggleButton, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
                             "aria-label": "absolute",
-                            value: "Absolute",
+                            value: "absolute",
                             sx: {
                                 fontWeight: 500
                             },
                             children: "Absolute"
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ToggleButton, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
                             "aria-label": "percent",
-                            value: "Percent",
+                            value: "percent",
                             sx: {
                                 fontWeight: 500
                             },
@@ -246,10 +249,10 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                 })
             }),
             steps && steps.map((step, i)=>{
-                /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_thresholdInput.ThresholdInput, {
+                /*#__PURE__*/ return (0, _jsxruntime.jsx)(_ThresholdInput.ThresholdInput, {
                     inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
                     label: `T${i + 1}`,
-                    color: (ref2 = (_color = step.color) !== null && _color !== void 0 ? _color : palette[i]) !== null && ref2 !== void 0 ? ref2 : defaultThresholdColor,
+                    color: (_ref = (_step_color = step.color) !== null && _step_color !== void 0 ? _step_color : palette[i]) !== null && _ref !== void 0 ? _ref : defaultThresholdColor,
                     value: step.value,
                     mode: thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode,
                     onColorChange: (color)=>handleThresholdColorChange(color, i),
@@ -262,18 +265,18 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                     onBlur: handleThresholdBlur
                 }, i);
             }).reverse(),
-            !hideDefault && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_system.Stack, {
+            !hideDefault && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_system.Stack, {
                 flex: 1,
                 direction: "row",
                 alignItems: "center",
                 spacing: 1,
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_thresholdColorPicker.ThresholdColorPicker, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_ThresholdColorPicker.ThresholdColorPicker, {
                         label: "default",
                         color: defaultThresholdColor,
                         onColorChange: handleDefaultColorChange
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                         children: "Default"
                     })
                 ]

package/dist/cjs/ThresholdsEditor/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./ThresholdsEditor"), exports);
-function _exportStar(from, to) {
+_export_star(require("./ThresholdsEditor"), 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;
 }