@perses-dev/dashboards 0.8.0 → 0.9.0

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimeRangeControls = exports.TIME_OPTIONS = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2022 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.
@@ -14,53 +10,139 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const components_1 = require("@perses-dev/components");
-const core_1 = require("@perses-dev/core");
-const plugin_system_1 = require("@perses-dev/plugin-system");
-const context_1 = require("../../context");
-// TODO: add time shortcut if one does not match duration
-exports.TIME_OPTIONS = [
-    { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },
-    { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },
-    { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },
-    { value: { pastDuration: '1h' }, display: 'Last 1 hour' },
-    { value: { pastDuration: '6h' }, display: 'Last 6 hours' },
-    { value: { pastDuration: '12h' }, display: 'Last 12 hours' },
-    { value: { pastDuration: '24h' }, display: 'Last 1 day' },
-    { value: { pastDuration: '7d' }, display: 'Last 7 days' },
-    { value: { pastDuration: '14d' }, display: 'Last 14 days' },
+"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, {
+    TIME_OPTIONS: ()=>TIME_OPTIONS,
+    TimeRangeControls: ()=>TimeRangeControls
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _context = require("../../context");
+const TIME_OPTIONS = [
+    {
+        value: {
+            pastDuration: '5m'
+        },
+        display: 'Last 5 minutes'
+    },
+    {
+        value: {
+            pastDuration: '15m'
+        },
+        display: 'Last 15 minutes'
+    },
+    {
+        value: {
+            pastDuration: '30m'
+        },
+        display: 'Last 30 minutes'
+    },
+    {
+        value: {
+            pastDuration: '1h'
+        },
+        display: 'Last 1 hour'
+    },
+    {
+        value: {
+            pastDuration: '6h'
+        },
+        display: 'Last 6 hours'
+    },
+    {
+        value: {
+            pastDuration: '12h'
+        },
+        display: 'Last 12 hours'
+    },
+    {
+        value: {
+            pastDuration: '24h'
+        },
+        display: 'Last 1 day'
+    },
+    {
+        value: {
+            pastDuration: '7d'
+        },
+        display: 'Last 7 days'
+    },
+    {
+        value: {
+            pastDuration: '14d'
+        },
+        display: 'Last 14 days'
+    }
 ];
 function TimeRangeControls() {
-    const { timeRange, setTimeRange } = (0, plugin_system_1.useTimeRange)();
-    const { dashboard } = (0, context_1.useDashboard)();
-    const { queryString } = (0, plugin_system_1.useQueryString)();
-    const defaultTimeRange = (0, core_1.getDefaultTimeRange)(dashboard.duration, queryString);
+    const { timeRange , setTimeRange  } = (0, _pluginSystem.useTimeRange)();
+    const { dashboard  } = (0, _context.useDashboard)();
+    const { queryString  } = (0, _pluginSystem.useQueryString)();
+    const defaultTimeRange = (0, _core.getDefaultTimeRange)(dashboard.duration, queryString);
     // selected form value can be relative or absolute, timeRange from plugin-system is only absolute
-    const [selectedTimeRange, setSelectedTimeRange] = (0, react_1.useState)(defaultTimeRange);
-    const [showCustomDateSelector, setShowCustomDateSelector] = (0, react_1.useState)(false);
-    const anchorEl = (0, react_1.useRef)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Popover, { anchorEl: anchorEl.current, anchorOrigin: {
+    const [selectedTimeRange, setSelectedTimeRange] = (0, _react.useState)(defaultTimeRange);
+    const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
+    const anchorEl = (0, _react.useRef)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
+                anchorEl: anchorEl.current,
+                anchorOrigin: {
                     vertical: 'bottom',
-                    horizontal: 'center',
-                }, open: showCustomDateSelector, onClose: () => setShowCustomDateSelector(false), sx: (theme) => ({
-                    padding: theme.spacing(2),
-                }), children: (0, jsx_runtime_1.jsx)(components_1.AbsoluteTimePicker, { initialTimeRange: timeRange, onChange: (timeRange) => {
+                    horizontal: 'center'
+                },
+                open: showCustomDateSelector,
+                onClose: ()=>setShowCustomDateSelector(false),
+                sx: (theme)=>({
+                        padding: theme.spacing(2)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.AbsoluteTimePicker, {
+                    initialTimeRange: timeRange,
+                    onChange: (timeRange)=>{
                         setTimeRange(timeRange);
                         setSelectedTimeRange(timeRange);
                         setShowCustomDateSelector(false);
-                    } }) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: anchorEl, children: (0, jsx_runtime_1.jsx)(components_1.TimeRangeSelector, { timeOptions: exports.TIME_OPTIONS, value: selectedTimeRange, onSelectChange: (event) => {
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                fullWidth: true,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    ref: anchorEl,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.TimeRangeSelector, {
+                        timeOptions: TIME_OPTIONS,
+                        value: selectedTimeRange,
+                        onSelectChange: (event)=>{
                             const duration = event.target.value;
                             const relativeTimeInput = {
                                 pastDuration: duration,
-                                end: new Date(),
+                                end: new Date()
                             };
                             setTimeRange(relativeTimeInput);
                             setSelectedTimeRange(relativeTimeInput);
                             setShowCustomDateSelector(false);
-                        }, onCustomClick: () => {
+                        },
+                        onCustomClick: ()=>{
                             setShowCustomDateSelector(true);
-                        } }) }) })] }));
+                        }
+                    })
+                })
+            })
+        ]
+    });
 }
-exports.TimeRangeControls = TimeRangeControls;

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2022 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.
@@ -16,36 +10,57 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const core_1 = require("@perses-dev/core");
-const react_1 = require("@testing-library/react");
-const test_1 = require("../../test");
-const testDashboard_1 = __importDefault(require("../../test/testDashboard"));
-const context_1 = require("../../context");
-const TimeRangeControls_1 = require("./TimeRangeControls");
-describe('TimeRangeControls', () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _core = require("@perses-dev/core");
+const _react = require("@testing-library/react");
+const _test = require("../../test");
+const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
+const _context = require("../../context");
+const _timeRangeControls = require("./TimeRangeControls");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('TimeRangeControls', ()=>{
     let initialState;
-    beforeEach(() => {
+    beforeEach(()=>{
         initialState = {
-            dashboardSpec: testDashboard_1.default.spec,
+            dashboardSpec: _testDashboard.default.spec
         };
     });
-    const renderTimeRangeControls = () => {
+    const renderTimeRangeControls = ()=>{
         const queryString = new URLSearchParams();
-        const defaultTimeRange = (0, core_1.getDefaultTimeRange)(initialState.dashboardSpec.duration, queryString);
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(context_1.QueryStringProvider, { queryString: queryString, children: (0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: initialState, children: (0, jsx_runtime_1.jsx)(context_1.TimeRangeProvider, { initialTimeRange: defaultTimeRange, children: (0, jsx_runtime_1.jsx)(TimeRangeControls_1.TimeRangeControls, {}) }) }) }));
+        const defaultTimeRange = (0, _core.getDefaultTimeRange)(initialState.dashboardSpec.duration, queryString);
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.QueryStringProvider, {
+            queryString: queryString,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+                initialState: initialState,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+                    initialTimeRange: defaultTimeRange,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
+                })
+            })
+        }));
     };
-    it('should render correct initial relative time shortcut', async () => {
+    it('should render correct initial relative time shortcut', async ()=>{
         renderTimeRangeControls();
-        expect(react_1.screen.getByText('Last 1 day')).toBeInTheDocument();
+        expect(_react.screen.getByText('Last 1 day')).toBeInTheDocument();
     });
-    it('should be able to select the first option', () => {
+    it('should be able to select the first option', ()=>{
         renderTimeRangeControls();
-        const dateButton = react_1.screen.getByRole('button');
-        user_event_1.default.click(dateButton);
-        const firstOption = react_1.screen.getByRole('option', { name: 'Last 5 minutes' });
-        user_event_1.default.click(firstOption);
+        const dateButton = _react.screen.getByRole('button');
+        _userEvent.default.click(dateButton);
+        const firstOption = _react.screen.getByRole('option', {
+            name: 'Last 5 minutes'
+        });
+        _userEvent.default.click(firstOption);
         expect(dateButton).toHaveTextContent(/5 minutes/i);
     });
-    // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
+// TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
 });

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

@@ -1,4 +1,3 @@
-"use strict";
 // Copyright 2022 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.
@@ -11,19 +10,19 @@
 // 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.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TimeRangeControls"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./TimeRangeControls"), exports);
+function _exportStar(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/Variables/Variable.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TemplateVariable = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2022 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.
@@ -14,44 +10,199 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const mdi_material_ui_1 = require("mdi-material-ui");
-const context_1 = require("../../context");
-function TemplateVariable({ name }) {
-    var _a;
-    const ctx = (0, context_1.useTemplateVariable)(name);
-    const kind = (_a = ctx.definition) === null || _a === void 0 ? void 0 : _a.kind;
-    switch (kind) {
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TemplateVariable", {
+    enumerable: true,
+    get: ()=>TemplateVariable
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _reactQuery = require("@tanstack/react-query");
+const _context = require("../../context");
+function TemplateVariable({ name  }) {
+    var ref;
+    const ctx = (0, _context.useTemplateVariable)(name);
+    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+    switch(kind){
         case 'TextVariable':
-            return (0, jsx_runtime_1.jsx)(TextVariable, { name: name });
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TextVariable, {
+                name: name
+            });
         case 'ListVariable':
-            return (0, jsx_runtime_1.jsx)(ListVariable, { name: name });
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ListVariable, {
+                name: name
+            });
     }
-    return (0, jsx_runtime_1.jsxs)("div", { children: ["Unsupported Variable Kind: $", kind] });
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
+        children: [
+            "Unsupported Variable Kind: $",
+            kind
+        ]
+    });
+}
+/**
+ * Returns a serialized string of the current state of variable values.
+ */ function getVariableValuesKey(v) {
+    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
 }
-exports.TemplateVariable = TemplateVariable;
-function ListVariable({ name }) {
-    var _a, _b, _c, _d;
-    const ctx = (0, context_1.useTemplateVariable)(name);
+function ListVariable({ name  }) {
+    var ref, ref1, ref2;
+    const ctx = (0, _context.useTemplateVariable)(name);
     const definition = ctx.definition;
-    const { setVariableValue, loadTemplateVariable } = (0, context_1.useTemplateVariableActions)();
-    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.options.allowMultiple) === true;
-    (0, react_1.useEffect)(() => {
-        loadTemplateVariable(name);
-    }, [name, loadTemplateVariable]);
-    let value = (_a = ctx.state) === null || _a === void 0 ? void 0 : _a.value;
+    const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
+    const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
+    const datasourceStore = (0, _pluginSystem.useDatasourceStore)();
+    const spec = definition.spec.plugin.spec;
+    let dependsOnVariables;
+    if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
+        dependsOnVariables = variablePlugin.dependsOn(spec);
+    }
+    const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
+    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
+    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
+    let waitToLoad = false;
+    if (dependsOnVariables) {
+        waitToLoad = dependsOnVariables.some((v)=>{
+            var ref;
+            return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
+        });
+    }
+    const variablesValueKey = getVariableValuesKey(variables);
+    const variablesOptionsQuery = (0, _reactQuery.useQuery)([
+        name,
+        definition,
+        variablesValueKey
+    ], async ()=>{
+        const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
+            datasourceStore,
+            variables
+        }));
+        var ref;
+        return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
+    }, {
+        enabled: !!variablePlugin || waitToLoad
+    });
+    (0, _react.useEffect)(()=>{
+        setVariableLoading(name, variablesOptionsQuery.isFetching);
+        if (variablesOptionsQuery.data) {
+            setVariableOptions(name, variablesOptionsQuery.data);
+        }
+    }, [
+        variablesOptionsQuery,
+        name,
+        setVariableLoading,
+        setVariableOptions
+    ]);
+    let value = (ref = ctx.state) === null || ref === void 0 ? void 0 : ref.value;
+    const options = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.options;
+    const loading = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.loading;
+    // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
-        value = [];
+        value = typeof value === 'string' ? [
+            value
+        ] : [];
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: 'flex', children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: name, children: name }), (0, jsx_runtime_1.jsx)(material_1.Select, { id: name, label: name, value: value, onChange: (e) => {
-                            setVariableValue(name, e.target.value);
-                        }, multiple: allowMultiple, children: (_c = (_b = ctx.state) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, children: option.label }, option.value))) }), ((_d = ctx.state) === null || _d === void 0 ? void 0 : _d.loading) && (0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => loadTemplateVariable(name), children: (0, jsx_runtime_1.jsx)(mdi_material_ui_1.Reload, {}) })] }));
+    const finalOptions = (0, _react.useMemo)(()=>{
+        let computedOptions = options ? [
+            ...options
+        ] : [];
+        // Add the all value if it's allowed
+        if (allowAllValue) {
+            computedOptions = [
+                {
+                    value: _pluginSystem.DEFAULT_ALL_VALUE,
+                    label: 'All'
+                },
+                ...computedOptions
+            ];
+        }
+        return computedOptions;
+    }, [
+        options,
+        allowAllValue
+    ]);
+    (0, _react.useEffect)(()=>{
+        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
+        const valueIsInOptions = Boolean(finalOptions.find((v)=>{
+            if (allowMultiple) {
+                return value.includes(v.value);
+            }
+            return value === v.value;
+        }));
+        // If there is no value but there are options, set the value to the first option.
+        if (!value && firstOption) {
+            setVariableValue(name, firstOption.value);
+        }
+        // If there is a value but it's not in the options, select the first value or set to null
+        if (value && !valueIsInOptions && !definition.spec.default_value) {
+            setVariableValue(name, (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) || null);
+        }
+    }, [
+        finalOptions,
+        setVariableValue,
+        value,
+        name,
+        allowMultiple
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        display: 'flex',
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                    id: name,
+                    children: name
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+                    sx: {
+                        minWidth: 100,
+                        maxWidth: 250
+                    },
+                    id: name,
+                    label: name,
+                    value: value !== null && value !== void 0 ? value : '',
+                    onChange: (e)=>{
+                        // Must be selected
+                        if (e.target.value === null || e.target.value.length === 0) {
+                            if (allowAllValue) {
+                                setVariableValue(name, _pluginSystem.DEFAULT_ALL_VALUE);
+                            }
+                            return;
+                        }
+                        setVariableValue(name, e.target.value);
+                    },
+                    multiple: allowMultiple,
+                    children: [
+                        loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                            value: "loading",
+                            disabled: true,
+                            children: "Loading"
+                        }),
+                        finalOptions.map((option)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                value: option.value,
+                                children: option.label
+                            }, option.value))
+                    ]
+                }),
+                loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.LinearProgress, {})
+            ]
+        })
+    });
 }
-function TextVariable({ name }) {
-    const { state } = (0, context_1.useTemplateVariable)(name);
-    const s = (0, context_1.useTemplateVariableStore)();
+function TextVariable({ name  }) {
+    const { state  } = (0, _context.useTemplateVariable)(name);
+    const s = (0, _context.useTemplateVariableStore)();
     const setVariableValue = s.setVariableValue;
-    const ref = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ref: ref, defaultValue: state === null || state === void 0 ? void 0 : state.value, onBlur: (e) => setVariableValue(name, e.target.value), placeholder: name, label: name }));
+    const ref = (0, _react.useRef)(null);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+        ref: ref,
+        defaultValue: state === null || state === void 0 ? void 0 : state.value,
+        onBlur: (e)=>setVariableValue(name, e.target.value),
+        placeholder: name,
+        label: name
+    });
 }