var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef, } from 'react';
import { Button, ButtonGroup, ChevronDownIcon, ChevronUpIcon, CloseIcon, DocsIcon, EditorContextProvider, ExecuteButton, ExecutionContextProvider, ExplorerContextProvider, HeaderEditor, History, HistoryContextProvider, HistoryIcon, KeyboardShortcutIcon, PrettifyIcon, QueryEditor, ResponseEditor, SchemaContextProvider, SettingsIcon, StorageContextProvider, ToolbarButton, UnstyledButton, useAutoCompleteLeafs, useCopyQuery, useDragResize, useEditorContext, useExecutionContext, useExplorerContext, useHistoryContext, useMergeQuery, usePrettifyEditors, useSchemaContext, useStorageContext, VariableEditor, } from '@graphiql/react';
import { ToolbarMenu, ToolbarMenuItem } from './ToolbarMenu';
import { DocExplorer } from './DocExplorer';
import find from '../utility/find';
import { formatError, formatResult } from '@graphiql/toolkit';
import { Tab, TabAddButton, Tabs } from './Tabs';
var majorVersion = parseInt(React.version.slice(0, 2), 10);
if (majorVersion < 16) {
    throw Error([
        'GraphiQL 0.18.0 and after is not compatible with React 15 or below.',
        'If you are using a CDN source (jsdelivr, unpkg, etc), follow this example:',
        'https://github.com/graphql/graphiql/blob/master/examples/graphiql-cdn/index.html#L49',
    ].join('\n'));
}
var GraphiQL = (function (_super) {
    __extends(GraphiQL, _super);
    function GraphiQL(props) {
        var _this = _super.call(this, props) || this;
        _this.ref = null;
        return _this;
    }
    GraphiQL.prototype.componentDidMount = function () {
        if (typeof window !== 'undefined') {
            window.g = this;
        }
    };
    GraphiQL.prototype.render = function () {
        var _this = this;
        return (React.createElement(GraphiQLProviders, __assign({}, this.props, { ref: function (node) {
                _this.ref = node;
            } })));
    };
    GraphiQL.prototype.getQueryEditor = function () {
        var _a;
        console.warn('The method `GraphiQL.getQueryEditor` is deprecated and will be removed in the next major version. To set the value of the editor you can use the `query` prop. To react on changes of the editor value you can pass a callback to the `onEditQuery` prop.');
        return ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.getQueryEditor()) || null;
    };
    GraphiQL.prototype.getVariableEditor = function () {
        var _a;
        console.warn('The method `GraphiQL.getVariableEditor` is deprecated and will be removed in the next major version. To set the value of the editor you can use the `variables` prop. To react on changes of the editor value you can pass a callback to the `onEditVariables` prop.');
        return ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.getVariableEditor()) || null;
    };
    GraphiQL.prototype.getHeaderEditor = function () {
        var _a;
        console.warn('The method `GraphiQL.getHeaderEditor` is deprecated and will be removed in the next major version. To set the value of the editor you can use the `headers` prop. To react on changes of the editor value you can pass a callback to the `onEditHeaders` prop.');
        return ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.getHeaderEditor()) || null;
    };
    GraphiQL.prototype.refresh = function () {
        var _a;
        console.warn('The method `GraphiQL.refresh` is deprecated and will be removed in the next major version. Already now, all editors should automatically refresh when their size changes.');
        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.refresh();
    };
    GraphiQL.prototype.autoCompleteLeafs = function () {
        var _a;
        console.warn('The method `GraphiQL.autoCompleteLeafs` is deprecated and will be removed in the next major version. Please switch to using the `autoCompleteLeafs` function provided by the `EditorContext` from the `@graphiql/react` package.');
        return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.autoCompleteLeafs();
    };
    GraphiQL.formatResult = function (result) {
        console.warn('The function `GraphiQL.formatResult` is deprecated and will be removed in the next major version. Please switch to using the `formatResult` function provided by the `@graphiql/toolkit` package.');
        return formatResult(result);
    };
    GraphiQL.formatError = function (error) {
        console.warn('The function `GraphiQL.formatError` is deprecated and will be removed in the next major version. Please switch to using the `formatError` function provided by the `@graphiql/toolkit` package.');
        return formatError(error);
    };
    GraphiQL.Logo = GraphiQLLogo;
    GraphiQL.Toolbar = GraphiQLToolbar;
    GraphiQL.Footer = GraphiQLFooter;
    GraphiQL.QueryEditor = QueryEditor;
    GraphiQL.VariableEditor = VariableEditor;
    GraphiQL.HeaderEditor = HeaderEditor;
    GraphiQL.ResultViewer = ResponseEditor;
    GraphiQL.Menu = ToolbarMenu;
    GraphiQL.MenuItem = ToolbarMenuItem;
    return GraphiQL;
}(React.Component));
export { GraphiQL };
var GraphiQLProviders = forwardRef(function GraphiQLProviders(_a, ref) {
    var dangerouslyAssumeSchemaIsValid = _a.dangerouslyAssumeSchemaIsValid, docExplorerOpen = _a.docExplorerOpen, fetcher = _a.fetcher, inputValueDeprecation = _a.inputValueDeprecation, introspectionQueryName = _a.introspectionQueryName, maxHistoryLength = _a.maxHistoryLength, onTabChange = _a.onTabChange, onToggleHistory = _a.onToggleHistory, onToggleDocs = _a.onToggleDocs, storage = _a.storage, schema = _a.schema, schemaDescription = _a.schemaDescription, props = __rest(_a, ["dangerouslyAssumeSchemaIsValid", "docExplorerOpen", "fetcher", "inputValueDeprecation", "introspectionQueryName", "maxHistoryLength", "onTabChange", "onToggleHistory", "onToggleDocs", "storage", "schema", "schemaDescription"]);
    if (typeof fetcher !== 'function') {
        throw new TypeError('GraphiQL requires a fetcher function.');
    }
    return (React.createElement(StorageContextProvider, { storage: storage },
        React.createElement(HistoryContextProvider, { maxHistoryLength: maxHistoryLength, onToggle: onToggleHistory },
            React.createElement(EditorContextProvider, { defaultQuery: props.defaultQuery, headers: props.headers, onTabChange: onTabChange, query: props.query, shouldPersistHeaders: props.shouldPersistHeaders, variables: props.variables },
                React.createElement(SchemaContextProvider, { dangerouslyAssumeSchemaIsValid: dangerouslyAssumeSchemaIsValid, fetcher: fetcher, inputValueDeprecation: inputValueDeprecation, introspectionQueryName: introspectionQueryName, schema: schema, schemaDescription: schemaDescription },
                    React.createElement(ExecutionContextProvider, { externalFragments: props.externalFragments, fetcher: fetcher, onEditOperationName: props.onEditOperationName, shouldPersistHeaders: props.shouldPersistHeaders },
                        React.createElement(ExplorerContextProvider, { isVisible: docExplorerOpen, onToggleVisibility: onToggleDocs },
                            React.createElement(GraphiQLConsumeContexts, __assign({}, props, { ref: ref })))))))));
});
var GraphiQLConsumeContexts = forwardRef(function GraphiQLConsumeContexts(_a, ref) {
    var getDefaultFieldNames = _a.getDefaultFieldNames, props = __rest(_a, ["getDefaultFieldNames"]);
    var editorContext = useEditorContext({ nonNull: true });
    var executionContext = useExecutionContext({ nonNull: true });
    var explorerContext = useExplorerContext();
    var historyContext = useHistoryContext();
    var schemaContext = useSchemaContext({ nonNull: true });
    var storageContext = useStorageContext();
    var autoCompleteLeafs = useAutoCompleteLeafs({ getDefaultFieldNames: getDefaultFieldNames });
    var copy = useCopyQuery({ onCopyQuery: props.onCopyQuery });
    var merge = useMergeQuery();
    var prettify = usePrettifyEditors();
    var pluginResize = useDragResize({
        defaultSizeRelation: 1 / 3,
        direction: 'horizontal',
        initiallyHidden: (explorerContext === null || explorerContext === void 0 ? void 0 : explorerContext.isVisible) || (historyContext === null || historyContext === void 0 ? void 0 : historyContext.isVisible)
            ? undefined
            : 'first',
        onHiddenElementChange: function (resizableElement) {
            if (resizableElement === 'first') {
                explorerContext === null || explorerContext === void 0 ? void 0 : explorerContext.hide();
                historyContext === null || historyContext === void 0 ? void 0 : historyContext.hide();
            }
        },
        sizeThresholdSecond: 200,
        storageKey: 'docExplorerFlex',
    });
    var editorResize = useDragResize({
        direction: 'horizontal',
        storageKey: 'editorFlex',
    });
    var editorToolsResize = useDragResize({
        defaultSizeRelation: 3,
        direction: 'vertical',
        initiallyHidden: (function () {
            if (props.defaultVariableEditorOpen !== undefined) {
                return props.defaultVariableEditorOpen ? undefined : 'second';
            }
            if (props.defaultSecondaryEditorOpen !== undefined) {
                return props.defaultSecondaryEditorOpen ? undefined : 'second';
            }
            return editorContext.initialVariables || editorContext.initialHeaders
                ? undefined
                : 'second';
        })(),
        sizeThresholdSecond: 60,
        storageKey: 'secondaryEditorFlex',
    });
    return (React.createElement(GraphiQLWithContext, __assign({}, props, { editorContext: editorContext, executionContext: executionContext, explorerContext: explorerContext, historyContext: historyContext, schemaContext: schemaContext, storageContext: storageContext, autoCompleteLeafs: autoCompleteLeafs, copy: copy, merge: merge, prettify: prettify, pluginResize: pluginResize, editorResize: editorResize, editorToolsResize: editorToolsResize, ref: ref })));
});
var GraphiQLWithContext = (function (_super) {
    __extends(GraphiQLWithContext, _super);
    function GraphiQLWithContext(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            activeSecondaryEditor: 'variable',
            showSettings: false,
            theme: _this.getTheme(),
        };
        document.body.classList.add("graphiql-" + _this.state.theme);
        return _this;
    }
    GraphiQLWithContext.prototype.getTheme = function () {
        if (!this.props.storageContext) {
            return 'light';
        }
        var stored = this.props.storageContext.get(STORAGE_KEY_THEME);
        switch (stored) {
            case 'light':
                return 'light';
            case 'dark':
                return 'dark';
            default:
                if (typeof stored === 'string') {
                    this.props.storageContext.set(STORAGE_KEY_THEME, '');
                }
                return 'light';
        }
    };
    GraphiQLWithContext.prototype.setTheme = function (theme) {
        var _a;
        (_a = this.props.storageContext) === null || _a === void 0 ? void 0 : _a.set(STORAGE_KEY_THEME, theme);
        this.setState({ theme: theme });
        document.body.classList.remove("graphiql-" + (theme === 'light' ? 'dark' : 'light'));
        document.body.classList.add("graphiql-" + theme);
    };
    GraphiQLWithContext.prototype.render = function () {
        var _this = this;
        var _a, _b, _c, _d, _e;
        var children = React.Children.toArray(this.props.children);
        var logo = find(children, function (child) {
            return isChildComponentType(child, GraphiQL.Logo);
        }) || React.createElement(GraphiQL.Logo, null);
        var toolbar = find(children, function (child) {
            return isChildComponentType(child, GraphiQL.Toolbar);
        }) || (React.createElement(React.Fragment, null,
            React.createElement(ToolbarButton, { onClick: function () {
                    _this.props.prettify();
                }, title: "Prettify Query (Shift-Ctrl-P)", "aria-label": "Prettify" },
                React.createElement(PrettifyIcon, { className: "graphiql-toolbar-icon" })),
            React.createElement(ToolbarButton, { onClick: function () {
                    _this.props.merge();
                }, title: "Merge Query (Shift-Ctrl-M)", "aria-label": "Merge" },
                React.createElement(PrettifyIcon, { className: "graphiql-toolbar-icon" })),
            React.createElement(ToolbarButton, { onClick: function () {
                    _this.props.copy();
                }, title: "Copy Query (Shift-Ctrl-C)", "aria-label": "Copy" },
                React.createElement(PrettifyIcon, { className: "graphiql-toolbar-icon" })),
            ((_a = this.props.toolbar) === null || _a === void 0 ? void 0 : _a.additionalContent) ? this.props.toolbar.additionalContent
                : null));
        var footer = find(children, function (child) {
            return isChildComponentType(child, GraphiQL.Footer);
        });
        return (React.createElement("div", { "data-testid": "graphiql-container", className: "graphiql-container graphiql-" + this.state.theme },
            React.createElement("div", { className: "graphiql-sidebar" },
                React.createElement("div", null,
                    this.props.explorerContext ? (React.createElement(UnstyledButton, { className: this.props.explorerContext.isVisible ? 'active' : '', onClick: function () {
                            var _a, _b, _c, _d;
                            if ((_a = _this.props.explorerContext) === null || _a === void 0 ? void 0 : _a.isVisible) {
                                (_b = _this.props.explorerContext) === null || _b === void 0 ? void 0 : _b.hide();
                                _this.props.pluginResize.setHiddenElement('first');
                            }
                            else {
                                (_c = _this.props.explorerContext) === null || _c === void 0 ? void 0 : _c.show();
                                _this.props.pluginResize.setHiddenElement(null);
                                if ((_d = _this.props.historyContext) === null || _d === void 0 ? void 0 : _d.isVisible) {
                                    _this.props.historyContext.hide();
                                }
                            }
                        }, title: this.props.explorerContext.isVisible
                            ? 'Hide Documentation Explorer'
                            : 'Show Documentation Explorer' },
                        React.createElement(DocsIcon, null))) : null,
                    this.props.historyContext ? (React.createElement(UnstyledButton, { className: this.props.historyContext.isVisible ? 'active' : '', onClick: function () {
                            var _a;
                            if (!_this.props.historyContext) {
                                return;
                            }
                            _this.props.historyContext.toggle();
                            if (_this.props.historyContext.isVisible) {
                                _this.props.pluginResize.setHiddenElement('first');
                            }
                            else {
                                _this.props.pluginResize.setHiddenElement(null);
                                if ((_a = _this.props.explorerContext) === null || _a === void 0 ? void 0 : _a.isVisible) {
                                    _this.props.explorerContext.hide();
                                }
                            }
                        }, title: this.props.historyContext.isVisible
                            ? 'Hide History'
                            : 'Show History' },
                        React.createElement(HistoryIcon, null))) : null),
                React.createElement("div", null,
                    React.createElement(UnstyledButton, null,
                        React.createElement(KeyboardShortcutIcon, null)),
                    React.createElement(UnstyledButton, { onClick: function () {
                            _this.setState({ showSettings: true });
                        } },
                        React.createElement(SettingsIcon, null)))),
            React.createElement("div", { className: "graphiql-main" },
                React.createElement("div", { ref: this.props.pluginResize.firstRef, style: {
                        minWidth: '200px',
                    } },
                    React.createElement("div", { className: "graphiql-plugin" },
                        ((_b = this.props.explorerContext) === null || _b === void 0 ? void 0 : _b.isVisible) ? React.createElement(DocExplorer, null) : null,
                        ((_c = this.props.historyContext) === null || _c === void 0 ? void 0 : _c.isVisible) ? React.createElement(History, null) : null)),
                React.createElement("div", { ref: this.props.pluginResize.dragBarRef }, ((_d = this.props.explorerContext) === null || _d === void 0 ? void 0 : _d.isVisible) || ((_e = this.props.historyContext) === null || _e === void 0 ? void 0 : _e.isVisible) ? (React.createElement("div", { className: "graphiql-horizontal-drag-bar" })) : null),
                React.createElement("div", { ref: this.props.pluginResize.secondRef },
                    React.createElement("div", { className: "graphiql-sessions" },
                        React.createElement("div", { className: "graphiql-session-header" },
                            React.createElement(Tabs, { tabsProps: {
                                    'aria-label': 'Select active operation',
                                } }, this.props.editorContext.tabs.length > 1 ? (React.createElement(React.Fragment, null,
                                this.props.editorContext.tabs.map(function (tab, index) { return (React.createElement(Tab, { key: tab.id, isActive: index === _this.props.editorContext.activeTabIndex, title: tab.title, isCloseable: _this.props.editorContext.tabs.length > 1, onSelect: function () {
                                        _this.props.executionContext.stop();
                                        _this.props.editorContext.changeTab(index);
                                    }, onClose: function () {
                                        if (_this.props.editorContext.activeTabIndex === index) {
                                            _this.props.executionContext.stop();
                                        }
                                        _this.props.editorContext.closeTab(index);
                                    }, tabProps: {
                                        'aria-controls': 'graphiql-session',
                                        id: "session-tab-" + index,
                                    } })); }),
                                React.createElement(TabAddButton, { onClick: function () {
                                        _this.props.editorContext.addTab();
                                    } }))) : null),
                            React.createElement("div", { className: "graphiql-session-header-right" },
                                this.props.editorContext.tabs.length === 1 ? (React.createElement(TabAddButton, { onClick: function () {
                                        _this.props.editorContext.addTab();
                                    } })) : null,
                                React.createElement("div", { className: "graphiql-logo" }, logo))),
                        React.createElement("div", { role: "tabpanel", id: "graphiql-session", className: "graphiql-session", "aria-labelledby": "session-tab-" + this.props.editorContext.activeTabIndex },
                            React.createElement("div", { ref: this.props.editorResize.firstRef },
                                React.createElement("div", { className: "graphiql-editors" + (this.props.editorContext.tabs.length === 1
                                        ? ' full-height'
                                        : '') },
                                    React.createElement("div", { ref: this.props.editorToolsResize.firstRef },
                                        React.createElement("section", { className: "graphiql-query-editor", "aria-label": "Query Editor" },
                                            React.createElement("div", { className: "graphiql-query-editor-wrapper" },
                                                React.createElement(QueryEditor, { editorTheme: this.props.editorTheme, externalFragments: this.props.externalFragments, onClickReference: function () {
                                                        if (_this.props.pluginResize.hiddenElement ===
                                                            'first') {
                                                            _this.props.pluginResize.setHiddenElement(null);
                                                        }
                                                    }, onCopyQuery: this.props.onCopyQuery, onEdit: this.props.onEditQuery, onEditOperationName: this.props.onEditOperationName, readOnly: this.props.readOnly, validationRules: this.props.validationRules })),
                                            React.createElement("div", { className: "graphiql-toolbar", role: "toolbar", "aria-label": "Editor Commands" },
                                                React.createElement(ExecuteButton, null),
                                                toolbar))),
                                    React.createElement("div", { ref: this.props.editorToolsResize.dragBarRef },
                                        React.createElement("div", { className: "graphiql-editor-tools" },
                                            React.createElement("div", { className: "graphiql-editor-tools-tabs" },
                                                React.createElement(UnstyledButton, { className: this.state.activeSecondaryEditor === 'variable'
                                                        ? 'active'
                                                        : '', onClick: function () {
                                                        if (_this.props.editorToolsResize.hiddenElement ===
                                                            'second') {
                                                            _this.props.editorToolsResize.setHiddenElement(null);
                                                        }
                                                        _this.setState({
                                                            activeSecondaryEditor: 'variable',
                                                        }, function () {
                                                            var _a;
                                                            (_a = _this.props.editorContext.variableEditor) === null || _a === void 0 ? void 0 : _a.refresh();
                                                        });
                                                    } }, "Variables"),
                                                this.props.headerEditorEnabled ? (React.createElement(UnstyledButton, { className: this.state.activeSecondaryEditor === 'header'
                                                        ? ' active'
                                                        : '', onClick: function () {
                                                        if (_this.props.editorToolsResize.hiddenElement ===
                                                            'second') {
                                                            _this.props.editorToolsResize.setHiddenElement(null);
                                                        }
                                                        _this.setState({
                                                            activeSecondaryEditor: 'header',
                                                        }, function () {
                                                            var _a;
                                                            (_a = _this.props.editorContext.headerEditor) === null || _a === void 0 ? void 0 : _a.refresh();
                                                        });
                                                    } }, "Headers")) : null),
                                            React.createElement(UnstyledButton, { onClick: function () {
                                                    if (_this.props.editorToolsResize.hiddenElement ===
                                                        'second') {
                                                        _this.props.editorToolsResize.setHiddenElement(null);
                                                    }
                                                    else {
                                                        _this.props.editorToolsResize.setHiddenElement('second');
                                                    }
                                                } }, this.props.editorToolsResize.hiddenElement ===
                                                'second' ? (React.createElement(ChevronUpIcon, { className: "graphiql-chevron-icon" })) : (React.createElement(ChevronDownIcon, { className: "graphiql-chevron-icon" }))))),
                                    React.createElement("div", { ref: this.props.editorToolsResize.secondRef },
                                        React.createElement("section", { className: "graphiql-editor-tool", "aria-label": this.state.activeSecondaryEditor === 'variable'
                                                ? 'Variables'
                                                : 'Headers' },
                                            React.createElement(VariableEditor, { onEdit: this.props.onEditVariables, editorTheme: this.props.editorTheme, readOnly: this.props.readOnly, isHidden: this.state.activeSecondaryEditor !== 'variable' }),
                                            this.props.headerEditorEnabled && (React.createElement(HeaderEditor, { isHidden: this.state.activeSecondaryEditor !== 'header', editorTheme: this.props.editorTheme, onEdit: this.props.onEditHeaders, readOnly: this.props.readOnly, shouldPersistHeaders: this.props.shouldPersistHeaders })))))),
                            React.createElement("div", { ref: this.props.editorResize.dragBarRef },
                                React.createElement("div", { className: "graphiql-horizontal-drag-bar" })),
                            React.createElement("div", { ref: this.props.editorResize.secondRef },
                                React.createElement("div", { className: "graphiql-response" },
                                    this.props.executionContext.isFetching ? (React.createElement("div", { className: "graphiql-spinner" })) : null,
                                    React.createElement(ResponseEditor, { value: this.props.response, editorTheme: this.props.editorTheme, ResponseTooltip: this.props.ResultsTooltip }),
                                    footer)))))),
            this.state.showSettings ? (React.createElement("div", { className: "graphiql-dialog-backdrop" },
                React.createElement("div", { className: "graphiql-dialog" },
                    React.createElement("div", { className: "graphiql-dialog-header" },
                        React.createElement("div", { className: "graphiql-dialog-title" }, "Settings"),
                        React.createElement(UnstyledButton, { className: "graphiql-dialog-close", onClick: function () {
                                _this.setState({ showSettings: false });
                            } },
                            React.createElement(CloseIcon, null))),
                    React.createElement("div", { className: "graphiql-dialog-section" },
                        React.createElement("div", null,
                            React.createElement("div", { className: "graphiql-dialog-section-title" }, "Theme"),
                            React.createElement("div", { className: "graphiql-dialog-section-caption" }, "Adjust how the interface looks like.")),
                        React.createElement("div", null,
                            React.createElement(ButtonGroup, null,
                                React.createElement(Button, { className: this.state.theme === 'light' ? 'active' : '', onClick: function () {
                                        _this.setTheme('light');
                                    } }, "Light"),
                                React.createElement(Button, { className: this.state.theme === 'dark' ? 'active' : '', onClick: function () {
                                        _this.setTheme('dark');
                                    } }, "Dark")))),
                    this.props.storageContext ? (React.createElement("div", { className: "graphiql-dialog-section" },
                        React.createElement("div", null,
                            React.createElement("div", { className: "graphiql-dialog-section-title" }, "Clear storage"),
                            React.createElement("div", { className: "graphiql-dialog-section-caption" }, "Remove all locally stored data and start fresh.")),
                        React.createElement("div", null,
                            React.createElement(Button, { onClick: function () {
                                    var _a;
                                    (_a = _this.props.storageContext) === null || _a === void 0 ? void 0 : _a.clear();
                                } }, "Clear data")))) : null))) : null));
    };
    GraphiQLWithContext.prototype.getQueryEditor = function () {
        return this.props.editorContext.queryEditor || null;
    };
    GraphiQLWithContext.prototype.getVariableEditor = function () {
        return this.props.editorContext.variableEditor || null;
    };
    GraphiQLWithContext.prototype.getHeaderEditor = function () {
        return this.props.editorContext.headerEditor || null;
    };
    GraphiQLWithContext.prototype.refresh = function () {
        var _a, _b, _c, _d;
        (_a = this.props.editorContext.queryEditor) === null || _a === void 0 ? void 0 : _a.refresh();
        (_b = this.props.editorContext.variableEditor) === null || _b === void 0 ? void 0 : _b.refresh();
        (_c = this.props.editorContext.headerEditor) === null || _c === void 0 ? void 0 : _c.refresh();
        (_d = this.props.editorContext.responseEditor) === null || _d === void 0 ? void 0 : _d.refresh();
    };
    GraphiQLWithContext.prototype.autoCompleteLeafs = function () {
        return this.props.autoCompleteLeafs();
    };
    return GraphiQLWithContext;
}(React.Component));
function GraphiQLLogo(props) {
    return (React.createElement("div", { className: "title" }, props.children || (React.createElement("span", null,
        "Graph",
        React.createElement("em", null, "i"),
        "QL"))));
}
GraphiQLLogo.displayName = 'GraphiQLLogo';
function GraphiQLToolbar(props) {
    return React.createElement(React.Fragment, null, props.children);
}
GraphiQLToolbar.displayName = 'GraphiQLToolbar';
function GraphiQLFooter(props) {
    return React.createElement("div", { className: "graphiql-footer" }, props.children);
}
GraphiQLFooter.displayName = 'GraphiQLFooter';
function isChildComponentType(child, component) {
    var _a;
    if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) &&
        child.type.displayName === component.displayName) {
        return true;
    }
    return child.type === component;
}
var STORAGE_KEY_THEME = 'theme';
//# sourceMappingURL=GraphiQL.js.map