@perses-dev/dashboards 0.0.0-snapshot-ts-panel-actions-90e9ef0 → 0.0.0-snapshot-reverse-proxy-75afbd7

package/dist/cjs/components/QueryViewerDialog/QueryViewerDialog.js

@@ -0,0 +1,121 @@
+// Copyright 2025 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, "QueryViewerDialog", {
+    enumerable: true,
+    get: function() {
+        return QueryViewerDialog;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function QueryViewerDialog({ open, queryDefinitions, onClose }) {
+    const queryRows = (0, _react.useMemo)(()=>{
+        if (!queryDefinitions?.length) return null;
+        const queryItems = [];
+        queryDefinitions.forEach((query, index)=>{
+            if (query?.spec?.plugin?.kind && query?.kind) {
+                queryItems.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.default.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginSpecEditor, {
+                            value: query.spec.plugin.spec,
+                            pluginSelection: {
+                                kind: query.spec.plugin.kind,
+                                type: query.kind
+                            },
+                            onChange: ()=>{},
+                            isReadonly: true
+                        }),
+                        index < queryDefinitions.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                            sx: {
+                                my: 2
+                            }
+                        })
+                    ]
+                }, `query-${index}`));
+            }
+        });
+        return queryItems;
+    }, [
+        queryDefinitions
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
+        open: open,
+        onClose: onClose,
+        maxWidth: "lg",
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Header, {
+                children: "Query Viewer"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Content, {
+                children: queryRows
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Actions, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    variant: "outlined",
+                    color: "secondary",
+                    onClick: onClose,
+                    children: "Close"
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/QueryViewerDialog/index.js

@@ -0,0 +1,30 @@
+// Copyright 2025 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("./QueryViewerDialog"), 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/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -27,6 +27,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
+const SAVE_DEFAULTS_DIALOG_TEXT = 'You have made changes to the time range or the variables values. Would you like to save these as defaults?';
 const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
@@ -52,7 +53,7 @@ const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             marginBottom: 2,
-                            children: dialog.description || _core.SAVE_DEFAULTS_DIALOG_TEXT
+                            children: dialog.description || SAVE_DEFAULTS_DIALOG_TEXT
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormGroup, {
                             children: [

package/dist/cjs/components/Variables/ListVariableListBox.js

@@ -0,0 +1,201 @@
+// Copyright 2025 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ListVariableListBox: function() {
+        return ListVariableListBox;
+    },
+    ListVariableListBoxProvider: function() {
+        return ListVariableListBoxProvider;
+    },
+    useListVariableListBoxContext: function() {
+        return useListVariableListBoxContext;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const ListVariableListBoxContext = /*#__PURE__*/ _react.default.createContext(undefined);
+function useListVariableListBoxContext() {
+    const ctx = (0, _react.useContext)(ListVariableListBoxContext);
+    if (!ctx) throw new Error('ListVariableListBoxContext not found');
+    return ctx;
+}
+/*
+ * Handles the logic for toggling the global select checkbox in the ListBox header.
+ *
+ * If all options are selected, it will deselect all options.
+ * Except if filteredOptions is a subset of options, then it will only deselect the filtered options.
+ *
+ * If some options are selected, it will select all filtered options.
+ *
+ * If no options are selected, it will select all filtered options.
+ * Should be not possible since a ListVariable has always at least one value.
+ *
+ * If allowAllValue is true, it will handle the special "All" option logic.
+ * Main difference is if some options are selected and there is no filter, it will select the "All" option
+ */ function handleGlobalSelectToggle(options, selectedOptions, filteredOptions, isIndeterminate, isAllSelected, allowAllValue, onChange) {
+    if (isAllSelected) {
+        if (filteredOptions.length !== options.length) {
+            onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
+        } else {
+            onChange([]);
+        }
+        return;
+    }
+    if (isIndeterminate) {
+        if (allowAllValue) {
+            if (filteredOptions.length === options.length) {
+                if (selectedOptions[0]?.value === _core.DEFAULT_ALL_VALUE) {
+                    onChange(options.filter((o)=>o.value !== _core.DEFAULT_ALL_VALUE));
+                } else {
+                    onChange([
+                        {
+                            label: _core.DEFAULT_ALL_VALUE,
+                            value: _core.DEFAULT_ALL_VALUE
+                        }
+                    ]);
+                }
+            } else {
+                if (filteredOptions.every((o)=>selectedOptions.includes(o))) {
+                    onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
+                } else {
+                    onChange([
+                        ...selectedOptions,
+                        ...filteredOptions.filter((o)=>o.value !== _core.DEFAULT_ALL_VALUE)
+                    ]);
+                }
+            }
+        } else {
+            if (filteredOptions.length === options.length) {
+                onChange(options);
+            } else {
+                if (filteredOptions.every((o)=>selectedOptions.includes(o))) {
+                    onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
+                } else {
+                    onChange([
+                        ...selectedOptions,
+                        ...filteredOptions
+                    ]);
+                }
+            }
+        }
+        return;
+    }
+    // Nothing selected, so select filtered options
+    onChange(filteredOptions);
+}
+function ListVariableListBoxProvider({ value, children }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ListVariableListBoxContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+const ListVariableListBox = /*#__PURE__*/ (0, _react.forwardRef)(function ListVariableListBox(props, ref) {
+    const { children, ...rest } = props;
+    const { options, selectedOptions, filteredOptions, allowAllValue, onChange } = useListVariableListBoxContext();
+    // Derived selection metadata for context listbox header
+    const selectedCount = (0, _react.useMemo)(()=>selectedOptions.length, [
+        selectedOptions
+    ]);
+    const isIndeterminate = (0, _react.useMemo)(()=>options.length > 0 && selectedCount > 0 && selectedCount !== options.length, [
+        selectedCount,
+        options
+    ]);
+    const isAllSelected = (0, _react.useMemo)(()=>options.length > 0 && selectedCount === options.length, [
+        selectedCount,
+        options
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("ul", {
+        ...rest,
+        ref: ref,
+        role: "listbox",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                        indeterminate: isIndeterminate,
+                        checked: isAllSelected,
+                        // intentionally not passing event to underlying handler to mimic previous behavior
+                        onChange: ()=>handleGlobalSelectToggle(options, selectedOptions, filteredOptions, isIndeterminate, isAllSelected, allowAllValue, onChange)
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
+                                children: selectedCount
+                            }),
+                            " Selected"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+            children
+        ]
+    });
+});

package/dist/cjs/components/Variables/Variable.js

@@ -35,6 +35,7 @@ const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _constants = require("../../constants");
+const _ListVariableListBox = require("./ListVariableListBox");
 function variableOptionToVariableValue(options) {
     if (options === null) {
         return null;
@@ -91,22 +92,8 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
             ...options
         ] : [];
         if (!sort || sort === 'none') return opts;
-        switch(sort){
-            case 'alphabetical-asc':
-                return opts.sort((a, b)=>a.label > b.label ? 1 : -1);
-            case 'alphabetical-desc':
-                return opts.sort((a, b)=>a.label > b.label ? -1 : 1);
-            case 'numerical-asc':
-                return opts.sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
-            case 'numerical-desc':
-                return opts.sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
-            case 'alphabetical-ci-asc':
-                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
-            case 'alphabetical-ci-desc':
-                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
-            default:
-                return opts;
-        }
+        const sortMethod = _pluginsystem.SORT_METHODS[sort];
+        return !sortMethod ? opts : sortMethod.sort(opts);
     }, [
         options,
         sort
@@ -214,6 +201,15 @@ function ListVariable({ name, source }) {
     const title = definition?.spec.display?.name ?? name;
     const allowMultiple = definition?.spec.allowMultiple === true;
     const allowAllValue = definition?.spec.allowAllValue === true;
+    const filterOptions = (0, _material.createFilterOptions)({});
+    const filteredOptions = (0, _react.useMemo)(()=>filterOptions(viewOptions, {
+            inputValue,
+            getOptionLabel: (o)=>o.label
+        }), [
+        inputValue,
+        viewOptions,
+        filterOptions
+    ]);
     // Update value when changed
     (0, _react.useEffect)(()=>{
         if (value) {
@@ -245,64 +241,126 @@ function ListVariable({ name, source }) {
         options,
         source
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
-                disablePortal: true,
-                disableCloseOnSelect: allowMultiple,
-                multiple: allowMultiple,
-                fullWidth: true,
-                limitTags: 3,
-                size: "small",
-                disableClearable: true,
-                slots: {
-                    popper: StyledPopper
-                },
-                renderInput: (params)=>{
-                    return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        ...params,
-                        label: title,
-                        onChange: (e)=>setInputValue(e.target.value)
-                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        ...params,
-                        label: title,
-                        style: {
-                            width: `${inputWidth}px`
-                        }
-                    });
-                },
-                sx: {
-                    '& .MuiInputBase-root': {
-                        minHeight: '38px'
-                    },
-                    '& .MuiAutocomplete-tag': {
-                        margin: '1px 2px'
-                    }
-                },
-                value: selectedOptions,
-                onChange: (_, value)=>{
-                    if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
-                        setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
-                    } else {
-                        setVariableValue(name, variableOptionToVariableValue(value), source);
-                    }
-                },
-                inputValue: allowMultiple ? inputValue : undefined,
-                onInputChange: (_, newInputValue)=>{
-                    if (!allowMultiple) {
-                        setInputWidth(getWidthPx(newInputValue, 'list'));
-                    }
+    const handleGlobalSelect = (0, _react.useCallback)((options)=>{
+        setVariableValue(name, variableOptionToVariableValue(options), source);
+    }, [
+        name,
+        setVariableValue,
+        source
+    ]);
+    const listBoxProviderValue = (0, _react.useMemo)(()=>({
+            options: viewOptions,
+            selectedOptions: selectedOptions,
+            filteredOptions: filteredOptions,
+            allowAllValue,
+            onChange: handleGlobalSelect
+        }), [
+        allowAllValue,
+        filteredOptions,
+        handleGlobalSelect,
+        selectedOptions,
+        viewOptions
+    ]);
+    const autocompleteComponent = (0, _react.useMemo)(()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+            disablePortal: true,
+            loading: loading,
+            disableCloseOnSelect: allowMultiple,
+            multiple: allowMultiple,
+            fullWidth: true,
+            limitTags: 3,
+            size: "small",
+            disableClearable: true,
+            slotProps: {
+                listbox: {
+                    component: allowMultiple ? _ListVariableListBox.ListVariableListBox : undefined
+                }
+            },
+            slots: {
+                popper: StyledPopper
+            },
+            sx: {
+                '& .MuiInputBase-root': {
+                    minHeight: '38px'
                 },
-                onBlur: ()=>{
-                    if (allowMultiple) {
-                        setInputValue('');
+                '& .MuiAutocomplete-tag': {
+                    margin: '1px 2px'
+                }
+            },
+            filterOptions: filterOptions,
+            options: viewOptions,
+            value: selectedOptions,
+            onChange: (_, value)=>{
+                if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
+                    setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
+                } else {
+                    setVariableValue(name, variableOptionToVariableValue(value), source);
+                }
+            },
+            inputValue: allowMultiple ? inputValue : undefined,
+            onInputChange: (_, newInputValue)=>{
+                if (!allowMultiple) {
+                    setInputWidth(getWidthPx(newInputValue, 'list'));
+                }
+            },
+            onBlur: ()=>{
+                if (allowMultiple) {
+                    setInputValue('');
+                }
+            },
+            renderInput: (params)=>{
+                return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    ...params,
+                    label: title,
+                    onChange: (e)=>setInputValue(e.target.value)
+                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    ...params,
+                    label: title,
+                    style: {
+                        width: `${inputWidth}px`
                     }
-                },
-                options: viewOptions
-            }),
-            loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})
-        ]
-    });
+                });
+            },
+            renderOption: (props, option, { selected })=>{
+                const { key, ...optionProps } = props;
+                return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                    ...optionProps,
+                    style: {
+                        padding: 0
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                            style: {
+                                marginRight: 8
+                            },
+                            checked: selected
+                        }),
+                        option.label
+                    ]
+                }, key);
+            }
+        });
+    }, [
+        allowAllValue,
+        allowMultiple,
+        filterOptions,
+        inputValue,
+        inputWidth,
+        loading,
+        name,
+        selectedOptions,
+        setVariableValue,
+        source,
+        title,
+        viewOptions
+    ]);
+    if (allowMultiple) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListVariableListBox.ListVariableListBoxProvider, {
+            value: listBoxProviderValue,
+            children: autocompleteComponent
+        });
+    }
+    return autocompleteComponent;
 }
 function TextVariable({ name, source }) {
     const ctx = (0, _context.useVariableDefinitionAndState)(name, source);

package/dist/cjs/components/Variables/VariableEditor.js

@@ -32,6 +32,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _core = require("@perses-dev/core");
 const _useimmer = require("use-immer");
 const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
 const _TrashCan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/TrashCan"));
@@ -163,26 +164,32 @@ function VariableEditor(props) {
             draft.push(v);
         });
     };
+    const { dashboard } = (0, _context.useDashboard)();
+    const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : _core.DEFAULT_DASHBOARD_DURATION;
+    const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
-                    initialVariableDefinition: currentEditingVariableDefinition,
-                    action: variableFormAction,
-                    isDraft: true,
-                    onActionChange: setVariableFormAction,
-                    onSave: (definition)=>{
-                        setVariableDefinitions((draft)=>{
-                            draft[variableEditIdx] = definition;
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
+                    timeRange: initialTimeRange,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
+                        initialVariableDefinition: currentEditingVariableDefinition,
+                        action: variableFormAction,
+                        isDraft: true,
+                        onActionChange: setVariableFormAction,
+                        onSave: (definition)=>{
+                            setVariableDefinitions((draft)=>{
+                                draft[variableEditIdx] = definition;
+                                setVariableEditIdx(null);
+                            });
+                        },
+                        onClose: ()=>{
+                            if (variableFormAction === 'create') {
+                                removeVariable(variableEditIdx);
+                            }
                             setVariableEditIdx(null);
-                        });
-                    },
-                    onClose: ()=>{
-                        if (variableFormAction === 'create') {
-                            removeVariable(variableEditIdx);
                         }
-                        setVariableEditIdx(null);
-                    }
+                    })
                 })
             }),
             !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {

package/dist/cjs/components/Variables/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./BuiltinVariableAccordions"), exports);
 _export_star(require("./EditVariablesButton"), exports);
+_export_star(require("./ListVariableListBox"), exports);
 _export_star(require("./Variable"), exports);
 _export_star(require("./VariableEditor"), exports);
 _export_star(require("./VariableList"), exports);