@perses-dev/components 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/cjs/EChart/index.js

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

package/dist/cjs/ErrorAlert.js

@@ -16,13 +16,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ErrorAlert", {
     enumerable: true,
-    get: ()=>ErrorAlert
+    get: function() {
+        return ErrorAlert;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 function ErrorAlert(props) {
-    const { error  } = props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+    const { error } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
         severity: "error",
         children: error.message
     });

package/dist/cjs/ErrorBoundary.js

@@ -17,6 +17,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ErrorBoundary", {
     enumerable: true,
-    get: ()=>_reactErrorBoundary.ErrorBoundary
+    get: function() {
+        return _reacterrorboundary.ErrorBoundary;
+    }
 });
-const _reactErrorBoundary = require("react-error-boundary");
+const _reacterrorboundary = require("react-error-boundary");

package/dist/cjs/FontSizeSelector/FontSizeSelector.js

@@ -16,11 +16,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "FontSizeSelector", {
     enumerable: true,
-    get: ()=>FontSizeSelector
+    get: function() {
+        return FontSizeSelector;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _optionsEditorLayout = require("../OptionsEditorLayout");
-const _settingsAutocomplete = require("../SettingsAutocomplete");
+const _jsxruntime = require("react/jsx-runtime");
+const _OptionsEditorLayout = require("../OptionsEditorLayout");
+const _SettingsAutocomplete = require("../SettingsAutocomplete");
 const FONT_SIZE_OPTIONS = [
     {
         id: 'default',
@@ -113,13 +115,13 @@ const FONT_SIZE_OPTIONS = [
         value: 192
     }
 ];
-function FontSizeSelector({ value , onChange  }) {
-    const handleFontSizeChange = (_, { value  })=>{
+function FontSizeSelector({ value, onChange }) {
+    const handleFontSizeChange = (_, { value })=>{
         onChange(value);
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
         label: "Font Size",
-        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
             value: FONT_SIZE_OPTIONS.find((o)=>o.value === value),
             options: FONT_SIZE_OPTIONS,
             getOptionLabel: (o)=>o.label,

package/dist/cjs/FontSizeSelector/index.js

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

package/dist/cjs/{UnitSelector/UnitSelector.js → FormatControls/FormatControls.js}

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "UnitSelector", {
+Object.defineProperty(exports, "FormatControls", {
     enumerable: true,
-    get: ()=>UnitSelector
+    get: function() {
+        return FormatControls;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
-const _optionsEditorLayout = require("../OptionsEditorLayout");
-const _settingsAutocomplete = require("../SettingsAutocomplete");
+const _OptionsEditorLayout = require("../OptionsEditorLayout");
+const _SettingsAutocomplete = require("../SettingsAutocomplete");
 const KIND_OPTIONS = Object.entries(_core.UNIT_CONFIG).map(([id, config])=>{
     return {
         id: id,
@@ -33,78 +35,78 @@ const DECIMAL_PLACES_OPTIONS = [
     {
         id: 'default',
         label: 'Default',
-        decimal_places: undefined
+        decimalPlaces: undefined
     },
     {
         id: '0',
         label: '0',
-        decimal_places: 0
+        decimalPlaces: 0
     },
     {
         id: '1',
         label: '1',
-        decimal_places: 1
+        decimalPlaces: 1
     },
     {
         id: '2',
         label: '2',
-        decimal_places: 2
+        decimalPlaces: 2
     },
     {
         id: '3',
         label: '3',
-        decimal_places: 3
+        decimalPlaces: 3
     },
     {
         id: '4',
         label: '4',
-        decimal_places: 4
+        decimalPlaces: 4
     }
 ];
-function getOptionByDecimalPlaces(decimal_places) {
-    return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimal_places === decimal_places);
+function getOptionByDecimalPlaces(decimalPlaces) {
+    return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimalPlaces === decimalPlaces);
 }
-function UnitSelector({ value , onChange , disabled =false  }) {
+function FormatControls({ value, onChange, disabled = false }) {
     const hasDecimalPlaces = (0, _core.isUnitWithDecimalPlaces)(value);
-    const hasAbbreviate = (0, _core.isUnitWithAbbreviate)(value);
+    const hasShortValues = (0, _core.isUnitWithShortValues)(value);
     const handleKindChange = (_, newValue)=>{
         onChange({
-            kind: newValue.id
+            unit: newValue.id
         });
     };
-    const handleDecimalPlacesChange = (_, { decimal_places  })=>{
+    const handleDecimalPlacesChange = (_, { decimalPlaces })=>{
         if (hasDecimalPlaces) {
             onChange({
                 ...value,
-                decimal_places: decimal_places
+                decimalPlaces: decimalPlaces
             });
         }
     };
-    const handleAbbreviateChange = (_, checked)=>{
-        if (hasAbbreviate) {
+    const handleShortValuesChange = (_, checked)=>{
+        if (hasShortValues) {
             onChange({
                 ...value,
-                abbreviate: checked
+                shortValues: checked
             });
         }
     };
-    const kindConfig = _core.UNIT_CONFIG[value.kind];
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    const unitConfig = _core.UNIT_CONFIG[value.unit];
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
-                label: "Abbreviate",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                    checked: hasAbbreviate ? (0, _core.shouldAbbreviate)(value.abbreviate) : false,
-                    onChange: handleAbbreviateChange,
-                    disabled: !hasAbbreviate
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
+                label: "Short values",
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                    checked: hasShortValues ? (0, _core.shouldShortenValues)(value.shortValues) : false,
+                    onChange: handleShortValuesChange,
+                    disabled: !hasShortValues
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
                 label: "Unit",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
                     value: {
-                        id: value.kind,
-                        ...kindConfig
+                        id: value.unit,
+                        ...unitConfig
                     },
                     options: KIND_OPTIONS,
                     groupBy: (option)=>option.group,
@@ -113,10 +115,10 @@ function UnitSelector({ value , onChange , disabled =false  }) {
                     disabled: disabled
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
                 label: "Decimals",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
-                    value: getOptionByDecimalPlaces(value.decimal_places),
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
+                    value: getOptionByDecimalPlaces(value.decimalPlaces),
                     options: DECIMAL_PLACES_OPTIONS,
                     getOptionLabel: (o)=>o.label,
                     onChange: handleDecimalPlacesChange,

package/dist/cjs/{UnitSelector → FormatControls}/index.js

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

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -21,17 +21,21 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    GaugeChart: ()=>GaugeChart,
-    getResponsiveValueSize: ()=>getResponsiveValueSize
+    GaugeChart: function() {
+        return GaugeChart;
+    },
+    getResponsiveValueSize: function() {
+        return getResponsiveValueSize;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _core = require("@perses-dev/core");
 const _core1 = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _echart = require("../EChart");
+const _ChartsProvider = require("../context/ChartsProvider");
+const _EChart = require("../EChart");
 (0, _core1.use)([
     _charts.GaugeChart,
     _components.GridComponent,
@@ -43,15 +47,15 @@ const PROGRESS_WIDTH = 16;
 // adjusts when to show pointer icon
 const GAUGE_SMALL_BREAKPOINT = 170;
 function GaugeChart(props) {
-    const { width , height , data , unit , axisLine , max  } = props;
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const { width, height, data, format, axisLine, max } = props;
+    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{
-        var ref;
+        var _chartsTheme_echartsTheme_textStyle;
         if (data.value === undefined) return chartsTheme.noDataOption;
         // adjusts fontSize depending on number of characters
-        const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);
-        var ref1;
+        const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);
+        var _chartsTheme_echartsTheme_textStyle_color;
         return {
             title: {
                 show: false
@@ -170,7 +174,7 @@ function GaugeChart(props) {
                         // when the value is `null`, making it difficult to differentiate
                         // `null` from a true `NaN` case.
                         ()=>'null' : (value)=>{
-                            return (0, _core.formatValue)(value, unit);
+                            return (0, _core.formatValue)(value, format);
                         }
                     },
                     data: [
@@ -181,7 +185,7 @@ function GaugeChart(props) {
                             // https://echarts.apache.org/en/option.html#series-gauge.data.title
                             title: {
                                 show: true,
-                                color: (ref1 = (ref = chartsTheme.echartsTheme.textStyle) === null || ref === void 0 ? void 0 : ref.color) !== null && ref1 !== void 0 ? ref1 : 'inherit',
+                                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',
                                 offsetCenter: [
                                     0,
                                     '55%'
@@ -200,11 +204,11 @@ function GaugeChart(props) {
         width,
         height,
         chartsTheme,
-        unit,
+        format,
         axisLine,
         max
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
         sx: {
             width: width,
             height: height,
@@ -214,13 +218,13 @@ function GaugeChart(props) {
         theme: chartsTheme.echartsTheme
     });
 }
-function getResponsiveValueSize(value, unit, width, height) {
+function getResponsiveValueSize(value, format, width, height) {
     const MIN_SIZE = 3;
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
-    const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, unit) : `${value}`;
-    var _length;
-    const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
+    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 valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
     return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
 }

package/dist/cjs/GaugeChart/index.js

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

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -16,31 +16,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "InfoTooltip", {
     enumerable: true,
-    get: ()=>InfoTooltip
+    get: function() {
+        return InfoTooltip;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _material = require("@mui/material");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
+const InfoTooltip = ({ id, title, description, placement, children, enterDelay, enterNextDelay })=>{
     // Wrap children in a span to cover the following use cases:
     //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.
     //  - Non-element tooltip children (e.g. text). The tooltip needs something that
     //   can have a ref as a child.
     // We wrap in a `span` and not a `div` to minimize the impact on page layout
     // and styles.
-    const wrappedChildren = /*#__PURE__*/ (0, _jsxRuntime.jsx)("span", {
+    const wrappedChildren = /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
         children: children
     });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledTooltip, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledTooltip, {
         arrow: true,
         id: id,
         placement: placement !== null && placement !== void 0 ? placement : 'top',
-        title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(TooltipContent, {
+        title: /*#__PURE__*/ (0, _jsxruntime.jsx)(TooltipContent, {
             title: title,
             description: description
         }),
@@ -49,10 +51,10 @@ const InfoTooltip = ({ id , title , description , placement , children , enterDe
         children: wrappedChildren
     });
 };
-const TooltipContent = ({ title , description  })=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+const TooltipContent = ({ title, description })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            title && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                 variant: "body2",
                 sx: (theme)=>({
                         color: theme.palette.text.primary,
@@ -60,7 +62,7 @@ const TooltipContent = ({ title , description  })=>{
                     }),
                 children: title
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                 variant: "caption",
                 sx: (theme)=>({
                         color: theme.palette.text.primary
@@ -70,12 +72,12 @@ const TooltipContent = ({ title , description  })=>{
         ]
     });
 };
-const StyledTooltip = (0, _material.styled)(({ className , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
+const StyledTooltip = (0, _material.styled)(({ className, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
         ...props,
         classes: {
             popper: className
         }
-    }))(({ theme  })=>({
+    }))(({ theme })=>({
         [`& .${_material.tooltipClasses.tooltip}`]: {
             backgroundColor: theme.palette.background.tooltip,
             color: theme.palette.text.primary,

package/dist/cjs/InfoTooltip/index.js

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

package/dist/cjs/JSONEditor.js

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "JSONEditor", {
     enumerable: true,
-    get: ()=>JSONEditor
+    get: function() {
+        return JSONEditor;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _reactCodemirror = /*#__PURE__*/ _interopRequireDefault(require("@uiw/react-codemirror"));
-const _langJson = require("@codemirror/lang-json");
+const _reactcodemirror = /*#__PURE__*/ _interop_require_default(require("@uiw/react-codemirror"));
+const _langjson = require("@codemirror/lang-json");
 const _lint = require("@codemirror/lint");
 const _material = require("@mui/material");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -33,20 +35,21 @@ function JSONEditor(props) {
     const theme = (0, _material.useTheme)();
     const isDarkMode = theme.palette.mode === 'dark';
     const [value, setValue] = (0, _react.useState)(()=>JSON.stringify(props.value, null, 2));
+    const [lastProcessedValue, setLastProcessedValue] = (0, _react.useState)(value);
     (0, _react.useEffect)(()=>{
         setValue(JSON.stringify(props.value, null, 2));
     }, [
         props.value
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactCodemirror.default, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcodemirror.default, {
         ...props,
         style: {
             border: `1px solid ${theme.palette.divider}`
         },
         theme: isDarkMode ? 'dark' : 'light',
         extensions: [
-            (0, _langJson.json)(),
-            (0, _lint.linter)((0, _langJson.jsonParseLinter)()),
+            (0, _langjson.json)(),
+            (0, _lint.linter)((0, _langjson.jsonParseLinter)()),
             (0, _lint.lintGutter)()
         ],
         value: value,
@@ -54,14 +57,14 @@ function JSONEditor(props) {
             setValue(newValue);
         },
         onBlur: ()=>{
-            try {
-                const json = JSON.parse(value !== null && value !== void 0 ? value : '{}');
-                if (props.onChange !== undefined) {
-                    props.onChange(json);
-                }
-            } catch (e) {
-            // ignore this error
+            // Don't trigger the provided onChange if the last processed value is equal to the current value.
+            // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded
+            // find & replace interface to close immediately.
+            if (lastProcessedValue !== value && props.onChange !== undefined) {
+                props.onChange(value);
+                setLastProcessedValue(value);
             }
-        }
+        },
+        placeholder: props.placeholder
     });
 }

package/dist/cjs/Legend/CompactLegend.js

@@ -16,14 +16,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "CompactLegend", {
     enumerable: true,
-    get: ()=>CompactLegend
+    get: function() {
+        return CompactLegend;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _listLegendItem = require("./ListLegendItem");
-const _legendModel = require("./legend-model");
-function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+const _ListLegendItem = require("./ListLegendItem");
+const _legendmodel = require("./legend-model");
+function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         component: "ul",
         sx: {
             width: '100%',
@@ -37,10 +39,10 @@ function CompactLegend({ height , items , selectedItems , onLegendItemClick , on
             overflowY: 'scroll',
             margin: 0
         },
-        children: items.map((item, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+        children: items.map((item, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_ListLegendItem.ListLegendItem, {
                 item: item,
                 index: index,
-                isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
+                isVisuallySelected: (0, _legendmodel.isLegendItemVisuallySelected)(item, selectedItems),
                 onMouseOver: onItemMouseOver,
                 onMouseOut: onItemMouseOut,
                 onClick: onLegendItemClick,