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

package/dist/cjs/TransformsEditor/TransformEditorContainer.js

@@ -35,14 +35,12 @@ function _interop_require_default(obj) {
     };
 }
 function TransformEditorContainer({ index, value, isCollapsed, onChange, onCollapse, onDelete, ...props }) {
-    var _value_spec, _value_spec1;
     function handleTransformDisable() {
-        var _value_spec;
         onChange({
             ...value,
             spec: {
                 ...value.spec,
-                disabled: !((_value_spec = value.spec) === null || _value_spec === void 0 ? void 0 : _value_spec.disabled)
+                disabled: !value.spec?.disabled
             }
         });
     }
@@ -90,7 +88,7 @@ function TransformEditorContainer({ index, value, isCollapsed, onChange, onColla
                             isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-                                        title: ((_value_spec = value.spec) === null || _value_spec === void 0 ? void 0 : _value_spec.disabled) ? 'Enable transformation' : 'Disable transformation',
+                                        title: value.spec?.disabled ? 'Enable transformation' : 'Disable transformation',
                                         placement: "top",
                                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                             size: "small",
@@ -98,7 +96,7 @@ function TransformEditorContainer({ index, value, isCollapsed, onChange, onColla
                                                 marginLeft: 'auto'
                                             },
                                             onClick: handleTransformDisable,
-                                            children: ((_value_spec1 = value.spec) === null || _value_spec1 === void 0 ? void 0 : _value_spec1.disabled) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOffOutline.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOutline.default, {})
+                                            children: value.spec?.disabled ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOffOutline.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOutline.default, {})
                                         })
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {

package/dist/cjs/TransformsEditor/TransformsEditor.js

@@ -81,17 +81,14 @@ function TransformsEditor({ value, onChange, ...props }) {
         gap: 1,
         ...props,
         children: [
-            value.map((transform, i)=>{
-                var _transformsCollapsed_i;
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TransformEditorContainer.TransformEditorContainer, {
+            value.map((transform, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_TransformEditorContainer.TransformEditorContainer, {
                     index: i,
                     value: transform,
-                    isCollapsed: (_transformsCollapsed_i = transformsCollapsed[i]) !== null && _transformsCollapsed_i !== void 0 ? _transformsCollapsed_i : true,
+                    isCollapsed: transformsCollapsed[i] ?? true,
                     onChange: (updatedTransform)=>handleTransformChange(i, updatedTransform),
                     onDelete: ()=>handleTransformDelete(i),
                     onCollapse: (collapsed)=>handleTransformCollapseExpand(i, collapsed)
-                }, i);
-            }),
+                }, i)),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                 variant: "contained",
                 startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),

package/dist/cjs/ValueMappingEditor/ValueMappingEditor.js

@@ -0,0 +1,387 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ValueMappingEditor", {
+    enumerable: true,
+    get: function() {
+        return ValueMappingEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _OptionsColorPicker = require("../ColorPicker/OptionsColorPicker");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ConditionEditor = ({ mapping, onChange, ...props })=>{
+    switch(mapping.kind){
+        case 'Value':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    label: "Value",
+                    placeholder: "Exact value",
+                    value: mapping.spec?.value ?? '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                value: e.target.value
+                            }
+                        }),
+                    fullWidth: true
+                })
+            });
+        case 'Range':
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        label: "From",
+                        placeholder: "Start of range",
+                        value: mapping.spec?.from ?? '',
+                        onChange: (e)=>onChange({
+                                ...mapping,
+                                spec: {
+                                    ...mapping.spec,
+                                    from: e.target.value === '' ? undefined : +e.target.value
+                                }
+                            }),
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        label: "To",
+                        placeholder: "End of range (inclusive)",
+                        value: mapping.spec?.to ?? '',
+                        onChange: (e)=>onChange({
+                                ...mapping,
+                                spec: {
+                                    ...mapping.spec,
+                                    to: e.target.value === '' ? undefined : +e.target.value
+                                }
+                            }),
+                        fullWidth: true
+                    })
+                ]
+            });
+        case 'Regex':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    label: "Regular Expression",
+                    placeholder: "JavaScript regular expression",
+                    value: mapping.spec?.pattern ?? '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                pattern: e.target.value
+                            }
+                        }),
+                    fullWidth: true
+                })
+            });
+        case 'Misc':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                    select: true,
+                    label: "Value",
+                    value: mapping.spec?.value ?? '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                value: e.target.value
+                            }
+                        }),
+                    SelectProps: {
+                        renderValue: (selected)=>{
+                            switch(selected){
+                                case 'empty':
+                                    return 'Empty';
+                                case 'null':
+                                    return 'Null';
+                                case 'NaN':
+                                    return 'NaN';
+                                case 'true':
+                                    return 'True';
+                                case 'false':
+                                    return 'False';
+                                default:
+                                    return String(selected);
+                            }
+                        }
+                    },
+                    fullWidth: true,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "empty",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "Empty"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches empty string"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "null",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "Null"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches null or undefined"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "NaN",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "NaN"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches Not a Number value"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "true",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "True"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches true boolean"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "false",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "False"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches false boolean"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            });
+        default:
+            return null;
+    }
+};
+const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
+    const handleColorChange = (color)=>{
+        onChange({
+            ...mapping,
+            spec: {
+                ...mapping.spec,
+                result: {
+                    ...mapping.spec.result,
+                    color
+                }
+            }
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid2, {
+        container: true,
+        spacing: 2,
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 5
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    gap: 1,
+                    width: "100%",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                            select: true,
+                            label: "Type",
+                            value: mapping.kind,
+                            onChange: (e)=>onChange({
+                                    ...mapping,
+                                    kind: e.target.value
+                                }),
+                            required: true,
+                            sx: {
+                                width: '120px'
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Value",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Value"
+                                            }),
+                                            mapping.kind !== 'Value' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches an exact text value"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Range",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Range"
+                                            }),
+                                            mapping.kind !== 'Range' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a numerical range"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Regex",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Regex"
+                                            }),
+                                            mapping.kind !== 'Regex' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a regular expression"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Misc",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Misc"
+                                            }),
+                                            mapping.kind !== 'Misc' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches against empty, null and NaN values"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(ConditionEditor, {
+                            width: "100%",
+                            mapping: mapping,
+                            onChange: (updatedMapping)=>onChange({
+                                    ...mapping,
+                                    ...updatedMapping
+                                })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 4
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    label: "Display text",
+                    value: mapping.spec?.result?.value ?? '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                result: {
+                                    ...mapping.spec?.result,
+                                    value: e.target.value
+                                }
+                            }
+                        }),
+                    fullWidth: true
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 1
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    justifyContent: "center",
+                    gap: 1,
+                    children: mapping.spec?.result?.color ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
+                        label: "Color",
+                        color: mapping.spec.result.color ?? '#000',
+                        onColorChange: handleColorChange,
+                        onClear: ()=>handleColorChange(undefined)
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        onClick: ()=>handleColorChange('#000'),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 1
+                },
+                textAlign: "end",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                    title: "Remove mapping settings",
+                    placement: "top",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        size: "small",
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        onClick: onDelete,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
+                    })
+                })
+            })
+        ]
+    });
+};

package/dist/cjs/ValueMappingEditor/ValueMappingsEditor.js

@@ -0,0 +1,131 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ValueMappingsEditor", {
+    enumerable: true,
+    get: function() {
+        return ValueMappingsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _ValueMappingEditor = require("./ValueMappingEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ValueMappingsEditor = ({ mappings, onChange })=>{
+    const [valueMappings, setValueMappings] = (0, _react.useState)(mappings);
+    function handleValueMappingChange(index, mapping) {
+        const updatedValueMapings = [
+            ...valueMappings
+        ];
+        updatedValueMapings[index] = mapping;
+        setValueMappings(updatedValueMapings);
+        onChange(updatedValueMapings);
+    }
+    function handleAddValueMappingEditor() {
+        const updatedValueMapings = [
+            ...valueMappings
+        ];
+        updatedValueMapings.push({
+            kind: 'Value',
+            spec: {
+                result: {
+                    value: ''
+                }
+            }
+        });
+        setValueMappings(updatedValueMapings);
+        onChange(updatedValueMapings);
+    }
+    function handleValueMappingDelete(index) {
+        const updatedValueMapings = [
+            ...valueMappings
+        ];
+        updatedValueMapings.splice(index, 1);
+        setValueMappings(updatedValueMapings);
+        onChange(updatedValueMapings);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid2, {
+                container: true,
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                        size: {
+                            xs: 5
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "subtitle1",
+                            children: "Condition"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                        size: {
+                            xs: 4
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "subtitle1",
+                            children: "Display Text"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                        size: {
+                            xs: 1
+                        },
+                        textAlign: "center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "subtitle1",
+                            children: "Color"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                        size: {
+                            xs: 1
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                gap: 1.5,
+                divider: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                    flexItem: true,
+                    orientation: "horizontal"
+                }),
+                children: valueMappings.map((mapping, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_ValueMappingEditor.ValueMappingEditor, {
+                        mapping: mapping,
+                        onChange: (updatedMapping)=>handleValueMappingChange(i, updatedMapping),
+                        onDelete: ()=>handleValueMappingDelete(i)
+                    }, i))
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                variant: "contained",
+                startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                sx: {
+                    marginTop: 1
+                },
+                onClick: handleAddValueMappingEditor,
+                children: "Add value mappings"
+            })
+        ]
+    });
+};

package/dist/cjs/ValueMappingEditor/index.js

@@ -0,0 +1,30 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./ValueMappingsEditor"), 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];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/context/TimeZoneProvider.js

@@ -87,7 +87,7 @@ function useTimeZone() {
     const timeZone = (0, _react.useContext)(TimeZoneContext);
     return {
         // fallback to "local" timezone if TimeZoneProvider is not present in the React tree
-        timeZone: timeZone !== null && timeZone !== void 0 ? timeZone : 'local',
+        timeZone: timeZone ?? 'local',
         formatWithUserTimeZone (date, formatString) {
             return (0, _utils.formatWithTimeZone)(date, formatString, timeZone);
         },

package/dist/cjs/controls/TextField.js

@@ -36,7 +36,7 @@ const TextField = /*#__PURE__*/ (0, _react.forwardRef)(function({ debounceMs = 2
         debounceFn(event.target.value);
     }
     const handleDebounceFn = (0, _react.useCallback)((inputValue)=>{
-        onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
+        onChange?.(inputValue);
     }, [
         onChange
     ]);

package/dist/cjs/index.js

@@ -57,6 +57,7 @@ _export_star(require("./TransformsEditor"), exports);
 _export_star(require("./RefreshIntervalPicker"), exports);
 _export_star(require("./PieChart"), exports);
 _export_star(require("./StatusHistoryChart"), exports);
+_export_star(require("./ValueMappingEditor"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/utils/chart-actions.js

@@ -138,8 +138,7 @@ function batchDispatchNearbySeriesActions(chart, nearbySeriesIndexes, emphasized
     }
 }
 function checkCrosshairPinnedStatus(seriesMapping) {
-    var _seriesMapping_;
-    const isCrosshairPinned = ((_seriesMapping_ = seriesMapping[seriesMapping.length - 1]) === null || _seriesMapping_ === void 0 ? void 0 : _seriesMapping_.name) === _model.PINNED_CROSSHAIR_SERIES_NAME;
+    const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === _model.PINNED_CROSSHAIR_SERIES_NAME;
     return isCrosshairPinned;
 }
 function getClosestTimestamp(timeSeriesValues, cursorX) {

package/dist/cjs/utils/format.js

@@ -60,7 +60,7 @@ function formatWithTimeZone(date, formatString, timeZone) {
    * if timeZone is provided, and is not local|browser,
    * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)
    * otherwise, format without timeZone option, defaulting to browser timeZone setting
-   */ const lowerTimeZone = timeZone === null || timeZone === void 0 ? void 0 : timeZone.toLowerCase();
+   */ const lowerTimeZone = timeZone?.toLowerCase();
     if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
         return (0, _datefns.format)(date, formatString);
     } else {