@perses-dev/plugin-system 0.0.0-snapshot-time-range-height-80d08fc

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

@@ -0,0 +1,167 @@
+// 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.
+// 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _optionsEditorTabs = require("./OptionsEditorTabs");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('OptionsEditorTabs', ()=>{
+    const renderTabs = (otherTabs)=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorTabs.OptionsEditorTabs, {
+            tabs: {
+                query: {
+                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                        children: "Edit query configuration"
+                    })
+                },
+                settings: {
+                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                        children: "Edit settings configuration"
+                    })
+                },
+                json: {
+                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                        children: "JSON editor"
+                    })
+                },
+                other: otherTabs
+            }
+        }));
+    };
+    const renderCustomTabs = ()=>{
+        renderTabs([
+            {
+                id: 'tableCols',
+                label: 'Table columns',
+                content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                    children: "custom table column"
+                })
+            },
+            {
+                id: 'tableOpts',
+                label: 'Table options',
+                content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                    children: "custom table options"
+                })
+            }
+        ]);
+    };
+    it('renders all specified tabs in a tab list', ()=>{
+        renderTabs();
+        const tabList = _react.screen.getByRole('tablist');
+        const tabs = (0, _react.getAllByRole)(tabList, 'tab');
+        expect(tabs).toHaveLength(3);
+        expect(tabs[0]).toHaveTextContent('Query');
+        expect(tabs[1]).toHaveTextContent('Settings');
+        expect(tabs[2]).toHaveTextContent('JSON');
+    });
+    it('defaults to selecting the first tab', ()=>{
+        renderTabs();
+        const activeTab = _react.screen.getByRole('tab', {
+            selected: true
+        });
+        expect(activeTab).toHaveTextContent('Query');
+        const activeTabPanel = _react.screen.getByRole('tabpanel');
+        expect(activeTabPanel).toHaveTextContent('query configuration');
+    });
+    it('switches selected tab on click', ()=>{
+        renderTabs();
+        const jsonTab = _react.screen.getByRole('tab', {
+            name: 'JSON'
+        });
+        _userEvent.default.click(jsonTab);
+        const activeTab = _react.screen.getByRole('tab', {
+            selected: true
+        });
+        expect(activeTab).toBe(jsonTab);
+        const activeTabPanel = _react.screen.getByRole('tabpanel');
+        expect(activeTabPanel).toHaveTextContent('JSON editor');
+    });
+    it('switches selected tab on keyboard interactions', ()=>{
+        renderTabs();
+        const vizTab = _react.screen.getByRole('tab', {
+            name: 'Settings'
+        });
+        _userEvent.default.tab();
+        _userEvent.default.keyboard('{arrowright}{space}');
+        const activeTab = _react.screen.getByRole('tab', {
+            selected: true
+        });
+        expect(activeTab).toBe(vizTab);
+        const activeTabPanel = _react.screen.getByRole('tabpanel');
+        expect(activeTabPanel).toHaveTextContent('settings configuration');
+    });
+    it('renders custom tabs between visual tabs and json editor', ()=>{
+        renderCustomTabs();
+        const tabList = _react.screen.getByRole('tablist');
+        const tabs = (0, _react.getAllByRole)(tabList, 'tab');
+        expect(tabs).toHaveLength(5);
+        expect(tabs[0]).toHaveTextContent('Query');
+        expect(tabs[1]).toHaveTextContent('Settings');
+        expect(tabs[2]).toHaveTextContent('Table column');
+        expect(tabs[3]).toHaveTextContent('Table options');
+        expect(tabs[4]).toHaveTextContent('JSON');
+    });
+    it('shows the correct content when selecting a custom tab', ()=>{
+        renderCustomTabs();
+        const tableColTab = _react.screen.getByRole('tab', {
+            name: 'Table columns'
+        });
+        _userEvent.default.click(tableColTab);
+        const activeTab = _react.screen.getByRole('tab', {
+            selected: true
+        });
+        expect(activeTab).toBe(tableColTab);
+        const activeTabPanel = _react.screen.getByRole('tabpanel');
+        expect(activeTabPanel).toHaveTextContent('custom table column');
+    });
+    it('only renders common tabs that are specified', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorTabs.OptionsEditorTabs, {
+            tabs: {
+                settings: {
+                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                        children: "settings are alone"
+                    })
+                },
+                json: {
+                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                        children: "JSON is at the end"
+                    })
+                },
+                other: [
+                    {
+                        id: 'custom',
+                        label: 'Another tab',
+                        content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                            children: "another tab content"
+                        })
+                    }
+                ]
+            }
+        }));
+        const tabList = _react.screen.getByRole('tablist');
+        const tabs = (0, _react.getAllByRole)(tabList, 'tab');
+        expect(tabs).toHaveLength(3);
+        expect(tabs[0]).toHaveTextContent('Settings');
+        expect(tabs[1]).toHaveTextContent('Another tab');
+        expect(tabs[2]).toHaveTextContent('JSON');
+    });
+});

package/dist/cjs/components/OptionsEditorTabs/TabPanel.js

@@ -0,0 +1,37 @@
+// 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.
+// 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, "TabPanel", {
+    enumerable: true,
+    get: ()=>TabPanel
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function TabPanel(props) {
+    const { children , value , index , ...other } = props;
+    const isActive = value === index;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+        role: "tabpanel",
+        hidden: !isActive,
+        id: `options-editor-tabpanel-${index}`,
+        "aria-labelledby": `options-editor-tab-${index}`,
+        ...other,
+        children: isActive && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            mt: 2,
+            children: children
+        })
+    });
+}

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

@@ -0,0 +1,28 @@
+// 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.
+// 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
+});
+_exportStar(require("./OptionsEditorTabs"), 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/PluginEditor/PluginEditor.js

@@ -0,0 +1,67 @@
+// 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.
+// 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, "PluginEditor", {
+    enumerable: true,
+    get: ()=>PluginEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pluginKindSelect = require("../PluginKindSelect");
+const _pluginSpecEditor = require("../PluginSpecEditor");
+const _pluginEditorApi = require("./plugin-editor-api");
+function PluginEditor(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { value , pluginType , pluginKindLabel , onChange: _ , ...others } = props;
+    const { pendingKind , isLoading , error , onKindChange , onSpecChange  } = (0, _pluginEditorApi.usePluginEditor)(props);
+    var ref;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        ...others,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                disabled: isLoading,
+                error: error !== null,
+                sx: {
+                    mb: 1
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                        id: "plugin-kind-label",
+                        children: pluginKindLabel
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginKindSelect.PluginKindSelect, {
+                        labelId: "plugin-kind-label",
+                        label: pluginKindLabel,
+                        pluginType: pluginType,
+                        value: pendingKind !== '' ? pendingKind : value.kind,
+                        onChange: onKindChange
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormHelperText, {
+                        children: (ref = error === null || error === void 0 ? void 0 : error.message) !== null && ref !== void 0 ? ref : ''
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSpecEditor.PluginSpecEditor, {
+                pluginType: pluginType,
+                pluginKind: value.kind,
+                value: value.spec,
+                onChange: onSpecChange
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,150 @@
+// 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.
+// 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _react = require("@testing-library/react");
+const _react1 = require("react");
+const _test = require("../../test");
+const _pluginEditor = require("./PluginEditor");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('PluginEditor', ()=>{
+    const renderComponent = ({ pluginType ='Panel' , defaultPluginKinds , value  } = {})=>{
+        const testValue = value || {
+            kind: 'BertPanel1',
+            spec: {
+                option1: 'Option1Value'
+            }
+        };
+        // A test helper component that includes the state that's controlled from outside
+        let onChange = jest.fn();
+        function TestHelperForm() {
+            const [value, setValue] = (0, _react1.useState)(testValue);
+            onChange = jest.fn((v)=>setValue(v));
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginEditor.PluginEditor, {
+                pluginType: pluginType,
+                pluginKindLabel: "Panel Type",
+                value: value,
+                onChange: onChange
+            });
+        }
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(TestHelperForm, {}), undefined, {
+            defaultPluginKinds
+        });
+        return {
+            onChange
+        };
+    };
+    // Opens the PluginKindSelect and waits for loading to finish (i.e. options to appear)
+    const openPluginKind = async ()=>{
+        const select = _react.screen.getByRole('button', {
+            name: 'Panel Type'
+        });
+        _userEvent.default.click(select);
+        const options = await _react.screen.findAllByRole('option');
+        return options;
+    };
+    it('shows plugin kind and spec editor', async ()=>{
+        renderComponent();
+        const pluginKind = _react.screen.getByRole('button', {
+            name: 'Panel Type'
+        });
+        await (0, _react.waitFor)(()=>expect(pluginKind).toHaveTextContent('Bert Panel 1'));
+        const specEditor = await _react.screen.findByLabelText('BertPanel1 editor');
+        expect(specEditor).toHaveValue('Option1Value');
+    });
+    it('initializes kind and spec together', async ()=>{
+        const { onChange  } = renderComponent();
+        // Switch to a new plugin kind
+        await openPluginKind();
+        const newPluginKind = _react.screen.getByRole('option', {
+            name: 'Bert Panel 2'
+        });
+        _userEvent.default.click(newPluginKind);
+        // Wait for the editor of the other plugin
+        const newEditor = await _react.screen.findByLabelText('BertPanel2 editor');
+        expect(newEditor).toBeInTheDocument();
+        expect(newEditor).toHaveValue('');
+        // Make sure onChange was only called once (i.e. initializes both kind and spec at the same time
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'BertPanel2',
+            spec: {
+                option2: ''
+            }
+        });
+    });
+    it('remembers previous spec values', async ()=>{
+        renderComponent();
+        // Use the current editor to make a change to the spec value
+        let editor = await _react.screen.findByLabelText('BertPanel1 editor');
+        _userEvent.default.clear(editor);
+        _userEvent.default.type(editor, 'MyNewValue');
+        // Switch to a new plugin kind
+        await openPluginKind();
+        const newPluginKind = _react.screen.getByRole('option', {
+            name: 'Bert Panel 2'
+        });
+        _userEvent.default.click(newPluginKind);
+        // Wait for the other editor to appear, then switch back
+        const newEditor = await _react.screen.findByLabelText('BertPanel2 editor');
+        expect(newEditor).toHaveValue('');
+        await openPluginKind();
+        const oldPluginKind = _react.screen.getByRole('option', {
+            name: 'Bert Panel 1'
+        });
+        _userEvent.default.click(oldPluginKind);
+        // Make sure the editor from the first plugin appears and has our modified value from before the switch
+        editor = await _react.screen.findByLabelText('BertPanel1 editor');
+        expect(editor).toHaveValue('MyNewValue');
+    });
+    describe('when defaultPluginKinds specified in plugin registry', ()=>{
+        it('uses default kind when one is not provided', async ()=>{
+            renderComponent({
+                pluginType: 'Panel',
+                defaultPluginKinds: {
+                    Panel: 'BertPanel2'
+                },
+                value: {
+                    kind: '',
+                    spec: {}
+                }
+            });
+            // Wait for default panel kind to load.
+            const pluginKind = _react.screen.getByRole('button', {
+                name: 'Panel Type'
+            });
+            await (0, _react.waitFor)(()=>expect(pluginKind).toHaveTextContent('Bert Panel 2'));
+        });
+        it('does not use default when kind is provided', async ()=>{
+            renderComponent({
+                pluginType: 'Panel',
+                defaultPluginKinds: {
+                    Panel: 'BertPanel2'
+                }
+            });
+            // Wait for specified panel kind to load.
+            const pluginKind = _react.screen.getByRole('button', {
+                name: 'Panel Type'
+            });
+            await (0, _react.waitFor)(()=>expect(pluginKind).toHaveTextContent('Bert Panel 1'));
+        });
+    });
+});

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

@@ -0,0 +1,29 @@
+// 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.
+// 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
+});
+_exportStar(require("./PluginEditor"), exports);
+_exportStar(require("./plugin-editor-api"), 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/PluginEditor/plugin-editor-api.js

@@ -0,0 +1,101 @@
+// 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.
+// 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, "usePluginEditor", {
+    enumerable: true,
+    get: ()=>usePluginEditor
+});
+const _core = require("@perses-dev/core");
+const _react = require("react");
+const _immer = require("immer");
+const _runtime = require("../../runtime");
+function usePluginEditor(props) {
+    const { pluginType , value  } = props;
+    // Keep a stable reference so we don't run the effect below when we don't need to
+    const onChange = (0, _core.useEvent)(props.onChange);
+    // The previous spec state for PluginType and kind and a helper function for remembering current values
+    const prevSpecState = (0, _react.useRef)({
+        [pluginType]: {
+            [value.kind]: value.spec
+        }
+    });
+    const rememberCurrentSpecState = (0, _core.useEvent)(()=>{
+        let byPluginType = prevSpecState.current[pluginType];
+        if (byPluginType === undefined) {
+            byPluginType = {};
+            prevSpecState.current[pluginType] = byPluginType;
+        }
+        byPluginType[value.kind] = value.spec;
+    });
+    const { defaultPluginKinds  } = (0, _runtime.usePluginRegistry)();
+    const defaultPluginKind = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[pluginType];
+    const initPendingKind = !value.kind && defaultPluginKind ? defaultPluginKind : '';
+    // When kind changes and we haven't loaded that plugin before, we will need to enter a "pending" state so that we
+    // can generate proper initial spec values that match the new plugin kind
+    const [pendingKind, setPendingKind] = (0, _react.useState)(initPendingKind);
+    const { data: plugin , isFetching , error  } = (0, _runtime.usePlugin)(pluginType, pendingKind);
+    (0, _react.useEffect)(()=>{
+        // Nothing to do if no new plugin kind is pending
+        if (pendingKind === '') return;
+        // Can't get spec value until we have a plugin
+        if (plugin === undefined) return;
+        // Fire an onChange to change to the pending kind with initial values from the plugin
+        rememberCurrentSpecState();
+        onChange({
+            kind: pendingKind,
+            spec: plugin.createInitialOptions()
+        });
+        setPendingKind('');
+    }, [
+        pendingKind,
+        plugin,
+        rememberCurrentSpecState,
+        onChange
+    ]);
+    /**
+   * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we
+   * make the switch.
+   */ const onKindChange = (e)=>{
+        var ref;
+        const nextKind = e.target.value;
+        // If we already have state for this plugin type/kind from a previous selection, just use it
+        const previousState = (ref = prevSpecState.current[pluginType]) === null || ref === void 0 ? void 0 : ref[nextKind];
+        if (previousState !== undefined) {
+            rememberCurrentSpecState();
+            onChange({
+                kind: nextKind,
+                spec: previousState
+            });
+            return;
+        }
+        // Otherwise, kick off the async loading process
+        setPendingKind(nextKind);
+    };
+    /**
+   * Spec changes are independent and always just set the spec state.
+   */ const onSpecChange = (next)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.spec = next;
+        }));
+    };
+    return {
+        pendingKind,
+        isLoading: isFetching,
+        error,
+        onKindChange,
+        onSpecChange
+    };
+}

package/dist/cjs/components/PluginKindSelect.js

@@ -0,0 +1,41 @@
+// 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.
+// 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, "PluginKindSelect", {
+    enumerable: true,
+    get: ()=>PluginKindSelect
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _runtime = require("../runtime");
+function PluginKindSelect(props) {
+    const { pluginType , value: propValue , ...others } = props;
+    const { data , isLoading  } = (0, _runtime.useListPluginMetadata)(pluginType);
+    // Pass an empty value while options are still loading so MUI doesn't complain about us using an "out of range" value
+    const value = propValue !== '' && isLoading ? '' : propValue;
+    // TODO: Does this need a loading indicator of some kind?
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+        sx: {
+            minWidth: 120
+        },
+        ...others,
+        value: value,
+        children: data === null || data === void 0 ? void 0 : data.map((metadata)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                value: metadata.kind,
+                children: metadata.display.name
+            }, metadata.kind))
+    });
+}