@perses-dev/components 0.50.1 → 0.51.0-beta.0

package/dist/ValueMappingEditor/ValueMappingEditor.js

@@ -18,8 +18,6 @@ import { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';
 const ConditionEditor = ({ mapping, onChange, ...props })=>{
     switch(mapping.kind){
         case 'Value':
-            var _mapping_spec;
-            var _mapping_spec_value;
             return /*#__PURE__*/ _jsx(Stack, {
                 gap: 1,
                 direction: "row",
@@ -27,7 +25,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 children: /*#__PURE__*/ _jsx(TextField, {
                     label: "Value",
                     placeholder: "Exact value",
-                    value: (_mapping_spec_value = (_mapping_spec = mapping.spec) === null || _mapping_spec === void 0 ? void 0 : _mapping_spec.value) !== null && _mapping_spec_value !== void 0 ? _mapping_spec_value : '',
+                    value: mapping.spec?.value ?? '',
                     onChange: (e)=>onChange({
                             ...mapping,
                             spec: {
@@ -39,8 +37,6 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 })
             });
         case 'Range':
-            var _mapping_spec1, _mapping_spec2;
-            var _mapping_spec_from, _mapping_spec_to;
             return /*#__PURE__*/ _jsxs(Stack, {
                 gap: 1,
                 direction: "row",
@@ -49,7 +45,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                     /*#__PURE__*/ _jsx(TextField, {
                         label: "From",
                         placeholder: "Start of range",
-                        value: (_mapping_spec_from = (_mapping_spec1 = mapping.spec) === null || _mapping_spec1 === void 0 ? void 0 : _mapping_spec1.from) !== null && _mapping_spec_from !== void 0 ? _mapping_spec_from : '',
+                        value: mapping.spec?.from ?? '',
                         onChange: (e)=>onChange({
                                 ...mapping,
                                 spec: {
@@ -62,7 +58,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                     /*#__PURE__*/ _jsx(TextField, {
                         label: "To",
                         placeholder: "End of range (inclusive)",
-                        value: (_mapping_spec_to = (_mapping_spec2 = mapping.spec) === null || _mapping_spec2 === void 0 ? void 0 : _mapping_spec2.to) !== null && _mapping_spec_to !== void 0 ? _mapping_spec_to : '',
+                        value: mapping.spec?.to ?? '',
                         onChange: (e)=>onChange({
                                 ...mapping,
                                 spec: {
@@ -75,8 +71,6 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 ]
             });
         case 'Regex':
-            var _mapping_spec3;
-            var _mapping_spec_pattern;
             return /*#__PURE__*/ _jsx(Stack, {
                 gap: 1,
                 direction: "row",
@@ -84,7 +78,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 children: /*#__PURE__*/ _jsx(TextField, {
                     label: "Regular Expression",
                     placeholder: "JavaScript regular expression",
-                    value: (_mapping_spec_pattern = (_mapping_spec3 = mapping.spec) === null || _mapping_spec3 === void 0 ? void 0 : _mapping_spec3.pattern) !== null && _mapping_spec_pattern !== void 0 ? _mapping_spec_pattern : '',
+                    value: mapping.spec?.pattern ?? '',
                     onChange: (e)=>onChange({
                             ...mapping,
                             spec: {
@@ -96,8 +90,6 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 })
             });
         case 'Misc':
-            var _mapping_spec4;
-            var _mapping_spec_value1;
             return /*#__PURE__*/ _jsx(Stack, {
                 gap: 1,
                 direction: "row",
@@ -105,7 +97,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 children: /*#__PURE__*/ _jsxs(TextField, {
                     select: true,
                     label: "Value",
-                    value: (_mapping_spec_value1 = (_mapping_spec4 = mapping.spec) === null || _mapping_spec4 === void 0 ? void 0 : _mapping_spec4.value) !== null && _mapping_spec_value1 !== void 0 ? _mapping_spec_value1 : '',
+                    value: mapping.spec?.value ?? '',
                     onChange: (e)=>onChange({
                             ...mapping,
                             spec: {
@@ -210,7 +202,6 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
     }
 };
 export const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
-    var _mapping_spec_result, _mapping_spec, _mapping_spec_result1, _mapping_spec1;
     const handleColorChange = (color)=>{
         onChange({
             ...mapping,
@@ -223,7 +214,6 @@ export const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
             }
         });
     };
-    var _mapping_spec_result_value, _mapping_spec_result_color;
     return /*#__PURE__*/ _jsxs(Grid, {
         container: true,
         spacing: 2,
@@ -326,20 +316,17 @@ export const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
                 },
                 children: /*#__PURE__*/ _jsx(TextField, {
                     label: "Display text",
-                    value: (_mapping_spec_result_value = (_mapping_spec = mapping.spec) === null || _mapping_spec === void 0 ? void 0 : (_mapping_spec_result = _mapping_spec.result) === null || _mapping_spec_result === void 0 ? void 0 : _mapping_spec_result.value) !== null && _mapping_spec_result_value !== void 0 ? _mapping_spec_result_value : '',
-                    onChange: (e)=>{
-                        var _mapping_spec;
-                        return onChange({
+                    value: mapping.spec?.result?.value ?? '',
+                    onChange: (e)=>onChange({
                             ...mapping,
                             spec: {
                                 ...mapping.spec,
                                 result: {
-                                    ...(_mapping_spec = mapping.spec) === null || _mapping_spec === void 0 ? void 0 : _mapping_spec.result,
+                                    ...mapping.spec?.result,
                                     value: e.target.value
                                 }
                             }
-                        });
-                    },
+                        }),
                     fullWidth: true
                 })
             }),
@@ -351,9 +338,9 @@ export const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
                     direction: "row",
                     justifyContent: "center",
                     gap: 1,
-                    children: ((_mapping_spec1 = mapping.spec) === null || _mapping_spec1 === void 0 ? void 0 : (_mapping_spec_result1 = _mapping_spec1.result) === null || _mapping_spec_result1 === void 0 ? void 0 : _mapping_spec_result1.color) ? /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                    children: mapping.spec?.result?.color ? /*#__PURE__*/ _jsx(OptionsColorPicker, {
                         label: "Color",
-                        color: (_mapping_spec_result_color = mapping.spec.result.color) !== null && _mapping_spec_result_color !== void 0 ? _mapping_spec_result_color : '#000',
+                        color: mapping.spec.result.color ?? '#000',
                         onColorChange: handleColorChange,
                         onClear: ()=>handleColorChange(undefined)
                     }) : /*#__PURE__*/ _jsx(IconButton, {

package/dist/ValueMappingEditor/ValueMappingEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingEditor.tsx"],"sourcesContent":["// Copyright 2024 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 {\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core';\nimport { FC } from 'react';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\n\ninterface ValueMappingConditionEditorProps extends Omit<StackProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (condition: ValueMapping) => void;\n}\n\nconst ConditionEditor: FC<ValueMappingConditionEditorProps> = ({ mapping, onChange, ...props }) => {\n  switch (mapping.kind) {\n    case 'Value':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Value\"\n            placeholder=\"Exact value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, value: e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Range':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"From\"\n            placeholder=\"Start of range\"\n            value={mapping.spec?.from ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, from: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n          <TextField\n            label=\"To\"\n            placeholder=\"End of range (inclusive)\"\n            value={mapping.spec?.to ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, to: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Regex':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Regular Expression\"\n            placeholder=\"JavaScript regular expression\"\n            value={mapping.spec?.pattern ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { ...mapping.spec, pattern: e.target.value } })}\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Misc':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            select\n            label=\"Value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { value: e.target.value } } as ValueMapping)}\n            SelectProps={{\n              renderValue: (selected) => {\n                switch (selected) {\n                  case 'empty':\n                    return 'Empty';\n                  case 'null':\n                    return 'Null';\n                  case 'NaN':\n                    return 'NaN';\n                  case 'true':\n                    return 'True';\n                  case 'false':\n                    return 'False';\n                  default:\n                    return String(selected);\n                }\n              },\n            }}\n            fullWidth\n          >\n            <MenuItem value=\"empty\">\n              <Stack>\n                <Typography>Empty</Typography>\n                <Typography variant=\"caption\">Matches empty string</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"null\">\n              <Stack>\n                <Typography>Null</Typography>\n                <Typography variant=\"caption\">Matches null or undefined</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"NaN\">\n              <Stack>\n                <Typography>NaN</Typography>\n                <Typography variant=\"caption\">Matches Not a Number value</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"true\">\n              <Stack>\n                <Typography>True</Typography>\n                <Typography variant=\"caption\">Matches true boolean</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"false\">\n              <Stack>\n                <Typography>False</Typography>\n                <Typography variant=\"caption\">Matches false boolean</Typography>\n              </Stack>\n            </MenuItem>\n          </TextField>\n        </Stack>\n      );\n    default:\n      return null;\n  }\n};\nexport interface ValueMappingEditorProps extends Omit<GridProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (mapping: ValueMapping) => void;\n  onDelete: () => void;\n}\n\nexport const ValueMappingEditor: FC<ValueMappingEditorProps> = ({ mapping, onChange, onDelete, ...props }) => {\n  const handleColorChange = (color?: string): void => {\n    onChange({\n      ...mapping,\n      spec: {\n        ...mapping.spec,\n        result: {\n          ...mapping.spec.result,\n          color,\n        },\n      },\n    } as ValueMapping);\n  };\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={mapping.kind}\n            onChange={(e) => onChange({ ...mapping, kind: e.target.value } as ValueMapping)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {mapping.kind !== 'Value' && <Typography variant=\"caption\">Matches an exact text value</Typography>}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {mapping.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {mapping.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {mapping.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          <ConditionEditor\n            width=\"100%\"\n            mapping={mapping}\n            onChange={(updatedMapping) => onChange({ ...mapping, ...updatedMapping })}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <TextField\n          label=\"Display text\"\n          value={mapping.spec?.result?.value ?? ''}\n          onChange={(e) =>\n            onChange({\n              ...mapping,\n              spec: {\n                ...mapping.spec,\n                result: {\n                  ...mapping.spec?.result,\n                  value: e.target.value,\n                },\n              },\n            } as ValueMapping)\n          }\n          fullWidth\n        />\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {mapping.spec?.result?.color ? (\n            <OptionsColorPicker\n              label=\"Color\"\n              color={mapping.spec.result.color ?? '#000'}\n              onColorChange={handleColorChange}\n              onClear={() => handleColorChange(undefined)}\n            />\n          ) : (\n            <IconButton onClick={() => handleColorChange('#000')}>\n              <PlusIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove mapping settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","PlusIcon","OptionsColorPicker","ConditionEditor","mapping","onChange","props","kind","gap","direction","label","placeholder","value","spec","e","target","fullWidth","from","undefined","to","pattern","select","SelectProps","renderValue","selected","String","variant","ValueMappingEditor","onDelete","handleColorChange","color","result","container","spacing","size","xs","width","required","sx","updatedMapping","justifyContent","onColorChange","onClear","onClick","textAlign","title","placement","marginLeft"],"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,SAEEA,UAAU,EACVC,QAAQ,EACRC,KAAK,EAELC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAASC,IAAI,QACR,gBAAgB;AACvB,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,cAAc,uBAAuB;AAG5C,SAASC,kBAAkB,QAAQ,oCAAoC;AAOvE,MAAMC,kBAAwD,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,OAAO;IAC5F,OAAQF,QAAQG,IAAI;QAClB,KAAK;gBAMUH;gBAAAA;YALb,qBACE,KAACV;gBAAMc,KAAK;gBAAGC,WAAU;gBAAO,GAAGH,KAAK;0BACtC,cAAA,KAACX;oBACCe,OAAM;oBACNC,aAAY;oBACZC,OAAOR,CAAAA,uBAAAA,gBAAAA,QAAQS,IAAI,cAAZT,oCAAAA,cAAcQ,KAAK,cAAnBR,iCAAAA,sBAAuB;oBAC9BC,UAAU,CAACS,IACTT,SAAS;4BACP,GAAGD,OAAO;4BACVS,MAAM;gCAAE,GAAGT,QAAQS,IAAI;gCAAED,OAAOE,EAAEC,MAAM,CAACH,KAAK;4BAAC;wBACjD;oBAEFI,SAAS;;;QAIjB,KAAK;gBAMUZ,gBAYAA;gBAZAA,oBAYAA;YAjBb,qBACE,MAACV;gBAAMc,KAAK;gBAAGC,WAAU;gBAAO,GAAGH,KAAK;;kCACtC,KAACX;wBACCe,OAAM;wBACNC,aAAY;wBACZC,OAAOR,CAAAA,sBAAAA,iBAAAA,QAAQS,IAAI,cAAZT,qCAAAA,eAAca,IAAI,cAAlBb,gCAAAA,qBAAsB;wBAC7BC,UAAU,CAACS,IACTT,SAAS;gCACP,GAAGD,OAAO;gCACVS,MAAM;oCAAE,GAAGT,QAAQS,IAAI;oCAAEI,MAAMH,EAAEC,MAAM,CAACH,KAAK,KAAK,KAAKM,YAAY,CAACJ,EAAEC,MAAM,CAACH,KAAK;gCAAC;4BACrF;wBAEFI,SAAS;;kCAEX,KAACrB;wBACCe,OAAM;wBACNC,aAAY;wBACZC,OAAOR,CAAAA,oBAAAA,iBAAAA,QAAQS,IAAI,cAAZT,qCAAAA,eAAce,EAAE,cAAhBf,8BAAAA,mBAAoB;wBAC3BC,UAAU,CAACS,IACTT,SAAS;gCACP,GAAGD,OAAO;gCACVS,MAAM;oCAAE,GAAGT,QAAQS,IAAI;oCAAEM,IAAIL,EAAEC,MAAM,CAACH,KAAK,KAAK,KAAKM,YAAY,CAACJ,EAAEC,MAAM,CAACH,KAAK;gCAAC;4BACnF;wBAEFI,SAAS;;;;QAIjB,KAAK;gBAMUZ;gBAAAA;YALb,qBACE,KAACV;gBAAMc,KAAK;gBAAGC,WAAU;gBAAO,GAAGH,KAAK;0BACtC,cAAA,KAACX;oBACCe,OAAM;oBACNC,aAAY;oBACZC,OAAOR,CAAAA,yBAAAA,iBAAAA,QAAQS,IAAI,cAAZT,qCAAAA,eAAcgB,OAAO,cAArBhB,mCAAAA,wBAAyB;oBAChCC,UAAU,CAACS,IAAMT,SAAS;4BAAE,GAAGD,OAAO;4BAAES,MAAM;gCAAE,GAAGT,QAAQS,IAAI;gCAAEO,SAASN,EAAEC,MAAM,CAACH,KAAK;4BAAC;wBAAE;oBAC3FI,SAAS;;;QAIjB,KAAK;gBAMUZ;gBAAAA;YALb,qBACE,KAACV;gBAAMc,KAAK;gBAAGC,WAAU;gBAAO,GAAGH,KAAK;0BACtC,cAAA,MAACX;oBACC0B,MAAM;oBACNX,OAAM;oBACNE,OAAOR,CAAAA,wBAAAA,iBAAAA,QAAQS,IAAI,cAAZT,qCAAAA,eAAcQ,KAAK,cAAnBR,kCAAAA,uBAAuB;oBAC9BC,UAAU,CAACS,IAAMT,SAAS;4BAAE,GAAGD,OAAO;4BAAES,MAAM;gCAAED,OAAOE,EAAEC,MAAM,CAACH,KAAK;4BAAC;wBAAE;oBACxEU,aAAa;wBACXC,aAAa,CAACC;4BACZ,OAAQA;gCACN,KAAK;oCACH,OAAO;gCACT,KAAK;oCACH,OAAO;gCACT,KAAK;oCACH,OAAO;gCACT,KAAK;oCACH,OAAO;gCACT,KAAK;oCACH,OAAO;gCACT;oCACE,OAAOC,OAAOD;4BAClB;wBACF;oBACF;oBACAR,SAAS;;sCAET,KAACvB;4BAASmB,OAAM;sCACd,cAAA,MAAClB;;kDACC,KAACG;kDAAW;;kDACZ,KAACA;wCAAW6B,SAAQ;kDAAU;;;;;sCAGlC,KAACjC;4BAASmB,OAAM;sCACd,cAAA,MAAClB;;kDACC,KAACG;kDAAW;;kDACZ,KAACA;wCAAW6B,SAAQ;kDAAU;;;;;sCAGlC,KAACjC;4BAASmB,OAAM;sCACd,cAAA,MAAClB;;kDACC,KAACG;kDAAW;;kDACZ,KAACA;wCAAW6B,SAAQ;kDAAU;;;;;sCAGlC,KAACjC;4BAASmB,OAAM;sCACd,cAAA,MAAClB;;kDACC,KAACG;kDAAW;;kDACZ,KAACA;wCAAW6B,SAAQ;kDAAU;;;;;sCAGlC,KAACjC;4BAASmB,OAAM;sCACd,cAAA,MAAClB;;kDACC,KAACG;kDAAW;;kDACZ,KAACA;wCAAW6B,SAAQ;kDAAU;;;;;;;;QAM1C;YACE,OAAO;IACX;AACF;AAOA,OAAO,MAAMC,qBAAkD,CAAC,EAAEvB,OAAO,EAAEC,QAAQ,EAAEuB,QAAQ,EAAE,GAAGtB,OAAO;QAkExFF,sBAAAA,eAkBNA,uBAAAA;IAnFT,MAAMyB,oBAAoB,CAACC;QACzBzB,SAAS;YACP,GAAGD,OAAO;YACVS,MAAM;gBACJ,GAAGT,QAAQS,IAAI;gBACfkB,QAAQ;oBACN,GAAG3B,QAAQS,IAAI,CAACkB,MAAM;oBACtBD;gBACF;YACF;QACF;IACF;QAsDe1B,4BAqBIA;IA1EnB,qBACE,MAACL;QAAKiC,SAAS;QAACC,SAAS;QAAI,GAAG3B,KAAK;;0BACnC,KAACP;gBAAKmC,MAAM;oBAAEC,IAAI;gBAAE;0BAClB,cAAA,MAACzC;oBAAMe,WAAU;oBAAMD,KAAK;oBAAG4B,OAAM;;sCACnC,MAACzC;4BACC0B,MAAM;4BACNX,OAAM;4BACNE,OAAOR,QAAQG,IAAI;4BACnBF,UAAU,CAACS,IAAMT,SAAS;oCAAE,GAAGD,OAAO;oCAAEG,MAAMO,EAAEC,MAAM,CAACH,KAAK;gCAAC;4BAC7DyB,QAAQ;4BACRC,IAAI;gCAAEF,OAAO;4BAAQ;;8CAErB,KAAC3C;oCAASmB,OAAM;8CACd,cAAA,MAAClB;;0DACC,KAACG;0DAAW;;4CACXO,QAAQG,IAAI,KAAK,yBAAW,KAACV;gDAAW6B,SAAQ;0DAAU;;;;;8CAG/D,KAACjC;oCAASmB,OAAM;8CACd,cAAA,MAAClB;;0DACC,KAACG;0DAAW;;4CACXO,QAAQG,IAAI,KAAK,yBAChB,KAACV;gDAAW6B,SAAQ;0DAAU;;;;;8CAIpC,KAACjC;oCAASmB,OAAM;8CACd,cAAA,MAAClB;;0DACC,KAACG;0DAAW;;4CACXO,QAAQG,IAAI,KAAK,yBAChB,KAACV;gDAAW6B,SAAQ;0DAAU;;;;;8CAIpC,KAACjC;oCAASmB,OAAM;8CACd,cAAA,MAAClB;;0DACC,KAACG;0DAAW;;4CACXO,QAAQG,IAAI,KAAK,wBAChB,KAACV;gDAAW6B,SAAQ;0DAAU;;;;;;;sCAKtC,KAACvB;4BACCiC,OAAM;4BACNhC,SAASA;4BACTC,UAAU,CAACkC,iBAAmBlC,SAAS;oCAAE,GAAGD,OAAO;oCAAE,GAAGmC,cAAc;gCAAC;;;;;0BAI7E,KAACxC;gBAAKmC,MAAM;oBAAEC,IAAI;gBAAE;0BAClB,cAAA,KAACxC;oBACCe,OAAM;oBACNE,OAAOR,CAAAA,8BAAAA,gBAAAA,QAAQS,IAAI,cAAZT,qCAAAA,uBAAAA,cAAc2B,MAAM,cAApB3B,2CAAAA,qBAAsBQ,KAAK,cAA3BR,wCAAAA,6BAA+B;oBACtCC,UAAU,CAACS;4BAMAV;+BALTC,SAAS;4BACP,GAAGD,OAAO;4BACVS,MAAM;gCACJ,GAAGT,QAAQS,IAAI;gCACfkB,QAAQ;wCACH3B,gBAAAA,QAAQS,IAAI,cAAZT,oCAAAA,cAAc2B,MAAM,AAAvB;oCACAnB,OAAOE,EAAEC,MAAM,CAACH,KAAK;gCACvB;4BACF;wBACF;;oBAEFI,SAAS;;;0BAGb,KAACjB;gBAAKmC,MAAM;oBAAEC,IAAI;gBAAE;0BAClB,cAAA,KAACzC;oBAAMe,WAAU;oBAAM+B,gBAAe;oBAAShC,KAAK;8BACjDJ,EAAAA,iBAAAA,QAAQS,IAAI,cAAZT,sCAAAA,wBAAAA,eAAc2B,MAAM,cAApB3B,4CAAAA,sBAAsB0B,KAAK,kBAC1B,KAAC5B;wBACCQ,OAAM;wBACNoB,OAAO1B,CAAAA,6BAAAA,QAAQS,IAAI,CAACkB,MAAM,CAACD,KAAK,cAAzB1B,wCAAAA,6BAA6B;wBACpCqC,eAAeZ;wBACfa,SAAS,IAAMb,kBAAkBX;uCAGnC,KAAC1B;wBAAWmD,SAAS,IAAMd,kBAAkB;kCAC3C,cAAA,KAAC5B;;;;0BAKT,KAACF;gBAAKmC,MAAM;oBAAEC,IAAI;gBAAE;gBAAGS,WAAU;0BAC/B,cAAA,KAAChD;oBAAQiD,OAAM;oBAA0BC,WAAU;8BACjD,cAAA,KAACtD;wBAAW0C,MAAK;wBAAQI,IAAI;4BAAES,YAAY;wBAAO;wBAAGJ,SAASf;kCAC5D,cAAA,KAAC5B;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingEditor.tsx"],"sourcesContent":["// Copyright 2024 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 {\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core';\nimport { FC } from 'react';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\n\ninterface ValueMappingConditionEditorProps extends Omit<StackProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (condition: ValueMapping) => void;\n}\n\nconst ConditionEditor: FC<ValueMappingConditionEditorProps> = ({ mapping, onChange, ...props }) => {\n  switch (mapping.kind) {\n    case 'Value':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Value\"\n            placeholder=\"Exact value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, value: e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Range':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"From\"\n            placeholder=\"Start of range\"\n            value={mapping.spec?.from ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, from: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n          <TextField\n            label=\"To\"\n            placeholder=\"End of range (inclusive)\"\n            value={mapping.spec?.to ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, to: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Regex':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Regular Expression\"\n            placeholder=\"JavaScript regular expression\"\n            value={mapping.spec?.pattern ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { ...mapping.spec, pattern: e.target.value } })}\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Misc':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            select\n            label=\"Value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { value: e.target.value } } as ValueMapping)}\n            SelectProps={{\n              renderValue: (selected) => {\n                switch (selected) {\n                  case 'empty':\n                    return 'Empty';\n                  case 'null':\n                    return 'Null';\n                  case 'NaN':\n                    return 'NaN';\n                  case 'true':\n                    return 'True';\n                  case 'false':\n                    return 'False';\n                  default:\n                    return String(selected);\n                }\n              },\n            }}\n            fullWidth\n          >\n            <MenuItem value=\"empty\">\n              <Stack>\n                <Typography>Empty</Typography>\n                <Typography variant=\"caption\">Matches empty string</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"null\">\n              <Stack>\n                <Typography>Null</Typography>\n                <Typography variant=\"caption\">Matches null or undefined</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"NaN\">\n              <Stack>\n                <Typography>NaN</Typography>\n                <Typography variant=\"caption\">Matches Not a Number value</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"true\">\n              <Stack>\n                <Typography>True</Typography>\n                <Typography variant=\"caption\">Matches true boolean</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"false\">\n              <Stack>\n                <Typography>False</Typography>\n                <Typography variant=\"caption\">Matches false boolean</Typography>\n              </Stack>\n            </MenuItem>\n          </TextField>\n        </Stack>\n      );\n    default:\n      return null;\n  }\n};\nexport interface ValueMappingEditorProps extends Omit<GridProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (mapping: ValueMapping) => void;\n  onDelete: () => void;\n}\n\nexport const ValueMappingEditor: FC<ValueMappingEditorProps> = ({ mapping, onChange, onDelete, ...props }) => {\n  const handleColorChange = (color?: string): void => {\n    onChange({\n      ...mapping,\n      spec: {\n        ...mapping.spec,\n        result: {\n          ...mapping.spec.result,\n          color,\n        },\n      },\n    } as ValueMapping);\n  };\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={mapping.kind}\n            onChange={(e) => onChange({ ...mapping, kind: e.target.value } as ValueMapping)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {mapping.kind !== 'Value' && <Typography variant=\"caption\">Matches an exact text value</Typography>}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {mapping.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {mapping.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {mapping.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          <ConditionEditor\n            width=\"100%\"\n            mapping={mapping}\n            onChange={(updatedMapping) => onChange({ ...mapping, ...updatedMapping })}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <TextField\n          label=\"Display text\"\n          value={mapping.spec?.result?.value ?? ''}\n          onChange={(e) =>\n            onChange({\n              ...mapping,\n              spec: {\n                ...mapping.spec,\n                result: {\n                  ...mapping.spec?.result,\n                  value: e.target.value,\n                },\n              },\n            } as ValueMapping)\n          }\n          fullWidth\n        />\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {mapping.spec?.result?.color ? (\n            <OptionsColorPicker\n              label=\"Color\"\n              color={mapping.spec.result.color ?? '#000'}\n              onColorChange={handleColorChange}\n              onClear={() => handleColorChange(undefined)}\n            />\n          ) : (\n            <IconButton onClick={() => handleColorChange('#000')}>\n              <PlusIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove mapping settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","PlusIcon","OptionsColorPicker","ConditionEditor","mapping","onChange","props","kind","gap","direction","label","placeholder","value","spec","e","target","fullWidth","from","undefined","to","pattern","select","SelectProps","renderValue","selected","String","variant","ValueMappingEditor","onDelete","handleColorChange","color","result","container","spacing","size","xs","width","required","sx","updatedMapping","justifyContent","onColorChange","onClear","onClick","textAlign","title","placement","marginLeft"],"mappings":"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"}

package/dist/cjs/ColorPicker/ColorPicker.js

@@ -36,7 +36,7 @@ const ColorPicker = ({ color, onChange, onClear, palette })=>{
     const [value, setValue] = (0, _react.useState)(color);
     const handleColorChange = (color)=>{
         setValue(color);
-        onChange === null || onChange === void 0 ? void 0 : onChange(color);
+        onChange?.(color);
     };
     // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved
     const handleInputChange = (e)=>{
@@ -44,7 +44,7 @@ const ColorPicker = ({ color, onChange, onClear, palette })=>{
         setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format
         // only set color if input value is a valid hex color
         if (isValidHex(e.target.value)) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+            onChange?.(e.target.value);
         }
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {

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

@@ -48,7 +48,7 @@ const PANEL_HEIGHT_LG_BREAKPOINT = 300;
 const LEGEND_HEIGHT_SM = 40;
 const LEGEND_HEIGHT_LG = 100;
 function getContentWithLegendLayout({ width, height, legendProps, legendSize, minChildrenHeight, minChildrenWidth, spacing, theme }) {
-    const legendOptions = legendProps === null || legendProps === void 0 ? void 0 : legendProps.options;
+    const legendOptions = legendProps?.options;
     const hasLegend = !!legendOptions;
     const noLegendLayout = {
         legend: {
@@ -84,10 +84,9 @@ function getContentWithLegendLayout({ width, height, legendProps, legendSize, mi
             legendHeight = LEGEND_HEIGHT_LG;
         }
     } else {
-        var _legendProps_tableProps;
         // Table mode
         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 tableColumns = legendProps?.tableProps?.columns || [];
         const columnsWidth = tableColumns.reduce((total, col)=>{
             if (typeof col.width === 'number') {
                 total += col.width;

package/dist/cjs/DragAndDrop/DragButton.js

@@ -64,7 +64,7 @@ function handleMoveDown(element, elements) {
     newElements.splice(index + 1, 0, element);
     return newElements;
 }
-function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
+const DragButton = /*#__PURE__*/ (0, _react.forwardRef)(function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }, ref) {
     const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
     const open = Boolean(anchorEl);
     function handleClick(event) {
@@ -72,11 +72,13 @@ function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
     }
     function handleMove(callback) {
         setAnchorEl(null);
-        callback === null || callback === void 0 ? void 0 : callback();
+        callback?.();
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                ...otherProps,
+                ref: ref,
                 "aria-label": "move",
                 "aria-haspopup": true,
                 "aria-expanded": open,
@@ -118,4 +120,4 @@ function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
             })
         ]
     });
-}
+});

package/dist/cjs/Drawer/Drawer.js

@@ -36,7 +36,7 @@ const Drawer = ({ anchor = 'right', isOpen, onClose, PaperProps, children, ...re
             sx: (0, _utils.combineSx)({
                 width: isSmaller ? '100%' : `${DRAWER_DEFAULT_WIDTH}px`,
                 overflow: 'hidden'
-            }, PaperProps === null || PaperProps === void 0 ? void 0 : PaperProps.sx)
+            }, PaperProps?.sx)
         },
         children: children
     });

package/dist/cjs/EChart/EChart.js

@@ -56,11 +56,11 @@ const EChart = /*#__PURE__*/ (0, _react.memo)(function EChart({ option, theme, r
     (0, _react.useLayoutEffect)(()=>{
         if (containerRef.current === null || chartElement.current !== null) return;
         chartElement.current = (0, _core.init)(containerRef.current, theme, {
-            renderer: renderer !== null && renderer !== void 0 ? renderer : 'canvas'
+            renderer: renderer ?? 'canvas'
         });
         if (chartElement.current === undefined) return;
         chartElement.current.setOption(initialOption.current, true);
-        onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chartElement.current);
+        onChartInitialized?.(chartElement.current);
         if (_instance !== undefined) {
             _instance.current = chartElement.current;
         }
@@ -160,8 +160,7 @@ function bindEvents(instance, events) {
     }
     for(const eventName in events){
         if (Object.prototype.hasOwnProperty.call(events, eventName)) {
-            var _events_eventName;
-            const customEvent = (_events_eventName = events[eventName]) !== null && _events_eventName !== void 0 ? _events_eventName : null;
+            const customEvent = events[eventName] ?? null;
             if (customEvent) {
                 bindEvent(eventName, customEvent);
             }

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -51,11 +51,9 @@ function GaugeChart(props) {
     const chartsTheme = (0, _context.useChartsTheme)();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{
-        var _chartsTheme_echartsTheme_textStyle;
         if (data.value === undefined) return chartsTheme.noDataOption;
         // adjusts fontSize depending on number of characters
         const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);
-        var _chartsTheme_echartsTheme_textStyle_color;
         return {
             title: {
                 show: false
@@ -185,7 +183,7 @@ function GaugeChart(props) {
                             // https://echarts.apache.org/en/option.html#series-gauge.data.title
                             title: {
                                 show: true,
-                                color: (_chartsTheme_echartsTheme_textStyle_color = (_chartsTheme_echartsTheme_textStyle = chartsTheme.echartsTheme.textStyle) === null || _chartsTheme_echartsTheme_textStyle === void 0 ? void 0 : _chartsTheme_echartsTheme_textStyle.color) !== null && _chartsTheme_echartsTheme_textStyle_color !== void 0 ? _chartsTheme_echartsTheme_textStyle_color : 'inherit',
+                                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit',
                                 offsetCenter: [
                                     0,
                                     '55%'
@@ -223,8 +221,7 @@ function getResponsiveValueSize(value, format, width, height) {
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
     const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, format) : `${value}`;
-    var _formattedValue_length;
-    const valueCharacters = (_formattedValue_length = formattedValue.length) !== null && _formattedValue_length !== void 0 ? _formattedValue_length : 2;
+    const valueCharacters = formattedValue.length ?? 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
     return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
 }

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -35,13 +35,13 @@ const InfoTooltip = ({ id, title, description, placement, children, enterDelay,
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement !== null && placement !== void 0 ? placement : 'top',
+        placement: placement ?? 'top',
         title: /*#__PURE__*/ (0, _jsxruntime.jsx)(TooltipContent, {
             title: title,
             description: description
         }),
-        enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
-        enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
+        enterDelay: enterDelay ?? 500,
+        enterNextDelay: enterNextDelay ?? 500,
         children: wrappedChildren
     });
 };
@@ -59,7 +59,8 @@ const TooltipContent = ({ title, description })=>{
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                 variant: "caption",
                 sx: (theme)=>({
-                        color: theme.palette.text.primary
+                        color: theme.palette.text.primary,
+                        whiteSpace: 'pre-line'
                     }),
                 children: description
             })

package/dist/cjs/Legend/ListLegendItem.js

@@ -38,9 +38,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }
     }
     const handleClick = (e)=>{
-        var _item_onClick;
         onClick(e, item.id);
-        (_item_onClick = item.onClick) === null || _item_onClick === void 0 ? void 0 : _item_onClick.call(item, e);
+        item.onClick?.(e);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ListItemButton, {
         ...others,
@@ -51,11 +50,11 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }, sx),
         dense: true,
         onClick: handleClick,
-        onMouseOver: (e)=>onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+        onMouseOver: (e)=>onMouseOver?.(e, {
                 id: item.id,
                 index
             }),
-        onMouseOut: (e)=>onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+        onMouseOut: (e)=>onMouseOut?.(e, {
                 id: item.id,
                 index
             }),

package/dist/cjs/LineChart/LineChart.js

@@ -45,7 +45,6 @@ const _utils = require("../utils");
     _renderers.CanvasRenderer
 ]);
 const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height, data, yAxis, format, grid, legend, tooltipConfig = _TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
-    var _option_tooltip;
     const chartsTheme = (0, _context.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -84,10 +83,8 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
-                var _params_batch__startValue;
-                const startIndex = (_params_batch__startValue = params.batch[0].startValue) !== null && _params_batch__startValue !== void 0 ? _params_batch__startValue : 0;
-                var _params_batch__endValue;
-                const endIndex = (_params_batch__endValue = params.batch[0].endValue) !== null && _params_batch__endValue !== void 0 ? _params_batch__endValue : data.xAxis.length - 1;
+                const startIndex = params.batch[0].startValue ?? 0;
+                const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;
                 const xAxisStartValue = data.xAxis[startIndex];
                 const xAxisEndValue = data.xAxis[endIndex];
                 if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
@@ -115,8 +112,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
         if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
-        var _data_rangeMs;
-        const rangeMs = (_data_rangeMs = data.rangeMs) !== null && _data_rangeMs !== void 0 ? _data_rangeMs : (0, _utils.getDateRange)(data.xAxis);
+        const rangeMs = data.rangeMs ?? (0, _utils.getDateRange)(data.xAxis);
         const option = {
             series: data.timeSeries,
             xAxis: {
@@ -250,7 +246,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             }
         },
         children: [
-            showTooltip === true && ((_option_tooltip = option.tooltip) === null || _option_tooltip === void 0 ? void 0 : _option_tooltip.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.LineChartTooltip, {
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,

package/dist/cjs/LinksEditor/LinksEditor.js

@@ -94,56 +94,47 @@ function LinkControl({ control, index }) {
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         control: control,
                         name: `panelDefinition.spec.links.${index}.url`,
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                 ...field,
                                 required: true,
                                 fullWidth: true,
                                 label: "URL",
                                 error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                helperText: fieldState.error?.message,
                                 onChange: (event)=>{
                                     field.onChange(event);
                                 }
-                            });
-                        }
+                            })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         control: control,
                         name: `panelDefinition.spec.links.${index}.name`,
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                 ...field,
                                 fullWidth: true,
                                 label: "Name",
                                 defaultValue: "",
                                 error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                helperText: fieldState.error?.message,
                                 onChange: (event)=>{
                                     field.onChange(event);
                                 }
-                            });
-                        }
+                            })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         control: control,
                         name: `panelDefinition.spec.links.${index}.tooltip`,
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                 ...field,
                                 fullWidth: true,
                                 label: "Tooltip",
                                 defaultValue: "",
                                 error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                helperText: fieldState.error?.message,
                                 onChange: (event)=>{
                                     field.onChange(event);
                                 }
-                            });
-                        }
+                            })
                     })
                 ]
             }),

package/dist/cjs/Overlay/Overlay.js

@@ -59,7 +59,7 @@ function LoadingOverlay(props) {
             height: '100%',
             alignItems: 'center',
             justifyContent: 'center',
-            padding: '0 10px'
+            px: 1
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
             variant: variant,

package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js

@@ -26,8 +26,7 @@ function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (
         ...params
     }), ...otherProps }) {
     const getOptionLabel = (option)=>{
-        var _option_label;
-        return (_option_label = option.label) !== null && _option_label !== void 0 ? _option_label : option.id;
+        return option.label ?? option.id;
     };
     // Note: this component currently is not virtualized because it is specific
     // to being used for settings, which generally have a pretty small list of

package/dist/cjs/StatChart/StatChart.js

@@ -50,16 +50,14 @@ const SERIES_NAME_MAX_FONT_SIZE = 30;
 const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
 const StatChart = (props)=>{
-    var _data_seriesData, _data_seriesData1;
     const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
     const chartsTheme = (0, _context.useChartsTheme)();
     const color = data.color;
     const formattedValue = (0, _formatStatChartValue.formatStatChartValue)(data.calculatedValue, format);
     const containerPadding = chartsTheme.container.padding.default;
-    var _data_seriesData_name;
     // calculate series name font size and height
     let seriesNameFontSize = (0, _calculateFontSize.useOptimalFontSize)({
-        text: (_data_seriesData_name = data === null || data === void 0 ? void 0 : (_data_seriesData = data.seriesData) === null || _data_seriesData === void 0 ? void 0 : _data_seriesData.name) !== null && _data_seriesData_name !== void 0 ? _data_seriesData_name : '',
+        text: data?.seriesData?.name ?? '',
         fontWeight: SERIES_NAME_FONT_WEIGHT,
         width,
         height: height * 0.125,
@@ -158,7 +156,7 @@ const StatChart = (props)=>{
             showSeriesName && /*#__PURE__*/ (0, _jsxruntime.jsx)(SeriesName, {
                 padding: containerPadding,
                 fontSize: seriesNameFontSize,
-                children: (_data_seriesData1 = data.seriesData) === null || _data_seriesData1 === void 0 ? void 0 : _data_seriesData1.name
+                children: data.seriesData?.name
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(Value, {
                 variant: "h3",
@@ -192,7 +190,7 @@ const SeriesName = (0, _material.styled)(_material.Typography, {
 const Value = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
 })(({ theme, color, padding, fontSize, sparkline })=>({
-        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
+        color: color ?? theme.palette.text.primary,
         fontSize: `${fontSize}px`,
         padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
         whiteSpace: 'nowrap',

package/dist/cjs/StatChart/calculateFontSize.js

@@ -39,10 +39,8 @@ function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSi
         return Number(fontSizeOverride);
     }
     const textStyle = echartsTheme.textStyle;
-    var _Number;
-    const fontSize = (_Number = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && _Number !== void 0 ? _Number : 12;
-    var _textStyle_fontFamily;
-    const fontFamily = (_textStyle_fontFamily = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontFamily) !== null && _textStyle_fontFamily !== void 0 ? _textStyle_fontFamily : 'Lato';
+    const fontSize = Number(textStyle?.fontSize) ?? 12;
+    const fontFamily = textStyle?.fontFamily ?? 'Lato';
     // set the font on the canvas context
     const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
     ctx.font = fontStyle;

package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js

@@ -45,7 +45,6 @@ const StatusHistoryChart = (props)=>{
     const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     const theme = (0, _material.useTheme)();
-    var _timeScale_rangeMs;
     const option = {
         tooltip: {
             appendToBody: true,
@@ -75,7 +74,7 @@ const StatusHistoryChart = (props)=>{
             },
             axisLabel: {
                 hideOverlap: true,
-                formatter: (0, _getformattedaxislabel.getFormattedStatusHistoryAxisLabel)((_timeScale_rangeMs = timeScale === null || timeScale === void 0 ? void 0 : timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0, timeZone)
+                formatter: (0, _getformattedaxislabel.getFormattedStatusHistoryAxisLabel)(timeScale?.rangeMs ?? 0, timeZone)
             }
         },
         yAxis: {