@perses-dev/components 0.55.1 → 0.56.0-beta.1

package/dist/ThresholdsEditor/ThresholdInput.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright 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.
@@ -15,53 +16,142 @@ import { Stack, FormLabel, TextField, IconButton, Box } from "@mui/material";
 import DeleteIcon from "mdi-material-ui/DeleteOutline";
 import { useState } from "react";
 import { OptionsColorPicker } from "../ColorPicker/OptionsColorPicker.js";
-export function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete }) {
-    const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter
-    return /*#__PURE__*/ _jsxs(Stack, {
-        flex: 1,
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        spacing: 1,
-        children: [
-            /*#__PURE__*/ _jsx(OptionsColorPicker, {
-                label: label,
-                color: color,
-                onColorChange: onColorChange
-            }),
-            /*#__PURE__*/ _jsx(FormLabel, {
-                htmlFor: label,
-                children: label
-            }),
-            /*#__PURE__*/ _jsx(TextField, {
-                id: label,
-                inputRef: inputRef,
-                type: "number",
-                value: value === 0 ? '' : value,
-                placeholder: "0",
-                onChange: onChange,
-                onBlur: onBlur,
-                onKeyDown: (e)=>{
-                    if (e.key === 'Enter') {
-                        onBlur();
-                        setKey(key + 1);
-                    }
-                },
-                InputProps: {
-                    endAdornment: mode === 'percent' ? /*#__PURE__*/ _jsx(Box, {
-                        paddingX: 1,
-                        children: "%"
-                    }) : undefined
-                }
-            }, key),
-            /*#__PURE__*/ _jsx(IconButton, {
-                "aria-label": `delete threshold ${label}`,
-                size: "small",
-                onClick: onDelete,
-                children: /*#__PURE__*/ _jsx(DeleteIcon, {})
-            })
-        ]
-    });
+export function ThresholdInput(t0) {
+    const $ = _c(31);
+    const { inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete } = t0;
+    const [key, setKey] = useState(0);
+    let t1;
+    if ($[0] !== color || $[1] !== label || $[2] !== onColorChange) {
+        t1 = /*#__PURE__*/ _jsx(OptionsColorPicker, {
+            label: label,
+            color: color,
+            onColorChange: onColorChange
+        });
+        $[0] = color;
+        $[1] = label;
+        $[2] = onColorChange;
+        $[3] = t1;
+    } else {
+        t1 = $[3];
+    }
+    let t2;
+    if ($[4] !== label) {
+        t2 = /*#__PURE__*/ _jsx(FormLabel, {
+            htmlFor: label,
+            children: label
+        });
+        $[4] = label;
+        $[5] = t2;
+    } else {
+        t2 = $[5];
+    }
+    const t3 = value === 0 ? "" : value;
+    let t4;
+    if ($[6] !== key || $[7] !== onBlur) {
+        t4 = (e)=>{
+            if (e.key === "Enter") {
+                onBlur();
+                setKey(key + 1);
+            }
+        };
+        $[6] = key;
+        $[7] = onBlur;
+        $[8] = t4;
+    } else {
+        t4 = $[8];
+    }
+    let t5;
+    if ($[9] !== mode) {
+        t5 = mode === "percent" ? /*#__PURE__*/ _jsx(Box, {
+            paddingX: 1,
+            children: "%"
+        }) : undefined;
+        $[9] = mode;
+        $[10] = t5;
+    } else {
+        t5 = $[10];
+    }
+    let t6;
+    if ($[11] !== t5) {
+        t6 = {
+            endAdornment: t5
+        };
+        $[11] = t5;
+        $[12] = t6;
+    } else {
+        t6 = $[12];
+    }
+    let t7;
+    if ($[13] !== inputRef || $[14] !== key || $[15] !== label || $[16] !== onBlur || $[17] !== onChange || $[18] !== t3 || $[19] !== t4 || $[20] !== t6) {
+        t7 = /*#__PURE__*/ _jsx(TextField, {
+            id: label,
+            inputRef: inputRef,
+            type: "number",
+            value: t3,
+            placeholder: "0",
+            onChange: onChange,
+            onBlur: onBlur,
+            onKeyDown: t4,
+            InputProps: t6
+        }, key);
+        $[13] = inputRef;
+        $[14] = key;
+        $[15] = label;
+        $[16] = onBlur;
+        $[17] = onChange;
+        $[18] = t3;
+        $[19] = t4;
+        $[20] = t6;
+        $[21] = t7;
+    } else {
+        t7 = $[21];
+    }
+    const t8 = `delete threshold ${label}`;
+    let t9;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+        t9 = /*#__PURE__*/ _jsx(DeleteIcon, {});
+        $[22] = t9;
+    } else {
+        t9 = $[22];
+    }
+    let t10;
+    if ($[23] !== onDelete || $[24] !== t8) {
+        t10 = /*#__PURE__*/ _jsx(IconButton, {
+            "aria-label": t8,
+            size: "small",
+            onClick: onDelete,
+            children: t9
+        });
+        $[23] = onDelete;
+        $[24] = t8;
+        $[25] = t10;
+    } else {
+        t10 = $[25];
+    }
+    let t11;
+    if ($[26] !== t1 || $[27] !== t10 || $[28] !== t2 || $[29] !== t7) {
+        t11 = /*#__PURE__*/ _jsxs(Stack, {
+            flex: 1,
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            spacing: 1,
+            children: [
+                t1,
+                t2,
+                t7,
+                t10
+            ]
+        });
+        $[26] = t1;
+        $[27] = t10;
+        $[28] = t2;
+        $[29] = t7;
+        $[30] = t11;
+    } else {
+        t11 = $[30];
+    }
+    return t11;
 }
 
 //# sourceMappingURL=ThresholdInput.js.map

package/dist/ThresholdsEditor/ThresholdInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"sourcesContent":["// Copyright 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 { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport type { ReactElement, RefObject } from 'react';\nimport { useState } from 'react';\n\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport type { ThresholdOptions } from '../model';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps): ReactElement {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <OptionsColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? '' : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n        InputProps={{\n          endAdornment: mode === 'percent' ? <Box paddingX={1}>%</Box> : undefined,\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["Stack","FormLabel","TextField","IconButton","Box","DeleteIcon","useState","OptionsColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","aria-label","size","onClick"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AAEvD,SAASC,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,kBAAkB,QAAQ,uCAAoC;AAevE,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACY;IACpB,MAAM,CAACC,KAAKC,OAAO,GAAGb,SAAS,IAAI,2DAA2D;IAC9F,qBACE,MAACN;QAAMoB,MAAM;QAAGC,WAAU;QAAMC,YAAW;QAASC,gBAAe;QAAgBC,SAAS;;0BAC1F,KAACjB;gBAAmBG,OAAOA;gBAAOC,OAAOA;gBAAOI,eAAeA;;0BAC/D,KAACd;gBAAUwB,SAASf;0BAAQA;;0BAC5B,KAACR;gBACCwB,IAAIhB;gBAEJD,UAAUA;gBACVkB,MAAK;gBACLf,OAAOA,UAAU,IAAI,KAAKA;gBAC1BgB,aAAY;gBACZd,UAAUA;gBACVE,QAAQA;gBACRa,WAAW,CAACC;oBACV,IAAIA,EAAEZ,GAAG,KAAK,SAAS;wBACrBF;wBACAG,OAAOD,MAAM;oBACf;gBACF;gBACAa,YAAY;oBACVC,cAAcnB,SAAS,0BAAY,KAACT;wBAAI6B,UAAU;kCAAG;yBAAUC;gBACjE;eAfKhB;0BAiBP,KAACf;gBAAWgC,cAAY,CAAC,iBAAiB,EAAEzB,OAAO;gBAAE0B,MAAK;gBAAQC,SAASpB;0BACzE,cAAA,KAACZ;;;;AAIT"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"sourcesContent":["// Copyright 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 { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport type { ReactElement, RefObject } from 'react';\nimport { useState } from 'react';\n\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport type { ThresholdOptions } from '../model';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps): ReactElement {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <OptionsColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? '' : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n        InputProps={{\n          endAdornment: mode === 'percent' ? <Box paddingX={1}>%</Box> : undefined,\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["Stack","FormLabel","TextField","IconButton","Box","DeleteIcon","useState","OptionsColorPicker"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AAEvD,SAASC,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,kBAAkB,QAAQ,uCAAoC;AAevE,OAAO"}