"use strict";
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 __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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
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;
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GraphiQLInterface = exports.GraphiQL = void 0;
var react_1 = __importStar(require("react"));
var react_2 = require("@graphiql/react");
var majorVersion = parseInt(react_1.default.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'));
}
function GraphiQL(_a) {
    var dangerouslyAssumeSchemaIsValid = _a.dangerouslyAssumeSchemaIsValid, defaultQuery = _a.defaultQuery, externalFragments = _a.externalFragments, fetcher = _a.fetcher, getDefaultFieldNames = _a.getDefaultFieldNames, headers = _a.headers, inputValueDeprecation = _a.inputValueDeprecation, introspectionQueryName = _a.introspectionQueryName, maxHistoryLength = _a.maxHistoryLength, onEditOperationName = _a.onEditOperationName, onSchemaChange = _a.onSchemaChange, onTabChange = _a.onTabChange, onTogglePluginVisibility = _a.onTogglePluginVisibility, operationName = _a.operationName, plugins = _a.plugins, query = _a.query, response = _a.response, schema = _a.schema, schemaDescription = _a.schemaDescription, shouldPersistHeaders = _a.shouldPersistHeaders, storage = _a.storage, validationRules = _a.validationRules, variables = _a.variables, visiblePlugin = _a.visiblePlugin, props = __rest(_a, ["dangerouslyAssumeSchemaIsValid", "defaultQuery", "externalFragments", "fetcher", "getDefaultFieldNames", "headers", "inputValueDeprecation", "introspectionQueryName", "maxHistoryLength", "onEditOperationName", "onSchemaChange", "onTabChange", "onTogglePluginVisibility", "operationName", "plugins", "query", "response", "schema", "schemaDescription", "shouldPersistHeaders", "storage", "validationRules", "variables", "visiblePlugin"]);
    if (typeof fetcher !== 'function') {
        throw new TypeError('The `GraphiQL` component requires a `fetcher` function to be passed as prop.');
    }
    return (react_1.default.createElement(react_2.GraphiQLProvider, { getDefaultFieldNames: getDefaultFieldNames, dangerouslyAssumeSchemaIsValid: dangerouslyAssumeSchemaIsValid, defaultQuery: defaultQuery, externalFragments: externalFragments, fetcher: fetcher, headers: headers, inputValueDeprecation: inputValueDeprecation, introspectionQueryName: introspectionQueryName, maxHistoryLength: maxHistoryLength, onEditOperationName: onEditOperationName, onSchemaChange: onSchemaChange, onTabChange: onTabChange, onTogglePluginVisibility: onTogglePluginVisibility, plugins: plugins, visiblePlugin: visiblePlugin, operationName: operationName, query: query, response: response, schema: schema, schemaDescription: schemaDescription, shouldPersistHeaders: shouldPersistHeaders, storage: storage, validationRules: validationRules, variables: variables },
        react_1.default.createElement(GraphiQLInterface, __assign({}, props))));
}
exports.GraphiQL = GraphiQL;
GraphiQL.Logo = GraphiQLLogo;
GraphiQL.Toolbar = GraphiQLToolbar;
GraphiQL.Footer = GraphiQLFooter;
function GraphiQLInterface(props) {
    var _a, _b, _c;
    var isHeadersEditorEnabled = (_a = props.isHeadersEditorEnabled) !== null && _a !== void 0 ? _a : true;
    var editorContext = (0, react_2.useEditorContext)({ nonNull: true });
    var executionContext = (0, react_2.useExecutionContext)({ nonNull: true });
    var schemaContext = (0, react_2.useSchemaContext)({ nonNull: true });
    var storageContext = (0, react_2.useStorageContext)();
    var pluginContext = (0, react_2.usePluginContext)();
    var copy = (0, react_2.useCopyQuery)({ onCopyQuery: props.onCopyQuery });
    var merge = (0, react_2.useMergeQuery)();
    var prettify = (0, react_2.usePrettifyEditors)();
    var _d = (0, react_2.useTheme)(), theme = _d.theme, setTheme = _d.setTheme;
    var PluginContent = (_b = pluginContext === null || pluginContext === void 0 ? void 0 : pluginContext.visiblePlugin) === null || _b === void 0 ? void 0 : _b.content;
    var pluginResize = (0, react_2.useDragResize)({
        defaultSizeRelation: 1 / 3,
        direction: 'horizontal',
        initiallyHidden: (pluginContext === null || pluginContext === void 0 ? void 0 : pluginContext.visiblePlugin) ? undefined : 'first',
        onHiddenElementChange: function (resizableElement) {
            if (resizableElement === 'first') {
                pluginContext === null || pluginContext === void 0 ? void 0 : pluginContext.setVisiblePlugin(null);
            }
        },
        sizeThresholdSecond: 200,
        storageKey: 'docExplorerFlex',
    });
    var editorResize = (0, react_2.useDragResize)({
        direction: 'horizontal',
        storageKey: 'editorFlex',
    });
    var editorToolsResize = (0, react_2.useDragResize)({
        defaultSizeRelation: 3,
        direction: 'vertical',
        initiallyHidden: (function () {
            if (props.defaultEditorToolsVisibility === 'variables' ||
                props.defaultEditorToolsVisibility === 'headers') {
                return undefined;
            }
            if (typeof props.defaultEditorToolsVisibility === 'boolean') {
                return props.defaultEditorToolsVisibility ? undefined : 'second';
            }
            return editorContext.initialVariables || editorContext.initialHeaders
                ? undefined
                : 'second';
        })(),
        sizeThresholdSecond: 60,
        storageKey: 'secondaryEditorFlex',
    });
    var _e = __read((0, react_1.useState)(function () {
        if (props.defaultEditorToolsVisibility === 'variables' ||
            props.defaultEditorToolsVisibility === 'headers') {
            return props.defaultEditorToolsVisibility;
        }
        return !editorContext.initialVariables &&
            editorContext.initialHeaders &&
            isHeadersEditorEnabled
            ? 'headers'
            : 'variables';
    }), 2), activeSecondaryEditor = _e[0], setActiveSecondaryEditor = _e[1];
    var _f = __read((0, react_1.useState)(null), 2), showDialog = _f[0], setShowDialog = _f[1];
    var _g = __read((0, react_1.useState)(null), 2), clearStorageStatus = _g[0], setClearStorageStatus = _g[1];
    var children = react_1.default.Children.toArray(props.children);
    var logo = children.find(function (child) {
        return isChildComponentType(child, GraphiQL.Logo);
    }) || react_1.default.createElement(GraphiQL.Logo, null);
    var toolbar = children.find(function (child) {
        return isChildComponentType(child, GraphiQL.Toolbar);
    }) || (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(react_2.ToolbarButton, { onClick: function () { return prettify(); }, label: "Prettify query (Shift-Ctrl-P)" },
            react_1.default.createElement(react_2.PrettifyIcon, { className: "graphiql-toolbar-icon", "aria-hidden": "true" })),
        react_1.default.createElement(react_2.ToolbarButton, { onClick: function () { return merge(); }, label: "Merge fragments into query (Shift-Ctrl-M)" },
            react_1.default.createElement(react_2.MergeIcon, { className: "graphiql-toolbar-icon", "aria-hidden": "true" })),
        react_1.default.createElement(react_2.ToolbarButton, { onClick: function () { return copy(); }, label: "Copy query (Shift-Ctrl-C)" },
            react_1.default.createElement(react_2.CopyIcon, { className: "graphiql-toolbar-icon", "aria-hidden": "true" })),
        ((_c = props.toolbar) === null || _c === void 0 ? void 0 : _c.additionalContent)
            ? props.toolbar.additionalContent
            : null));
    var footer = children.find(function (child) {
        return isChildComponentType(child, GraphiQL.Footer);
    });
    var onClickReference = function () {
        if (pluginResize.hiddenElement === 'first') {
            pluginResize.setHiddenElement(null);
        }
    };
    var modifier = window.navigator.platform.toLowerCase().indexOf('mac') === 0 ? (react_1.default.createElement("code", { className: "graphiql-key" }, "Cmd")) : (react_1.default.createElement("code", { className: "graphiql-key" }, "Ctrl"));
    return (react_1.default.createElement("div", { "data-testid": "graphiql-container", className: "graphiql-container" },
        react_1.default.createElement("div", { className: "graphiql-sidebar" },
            react_1.default.createElement("div", null, pluginContext
                ? pluginContext === null || pluginContext === void 0 ? void 0 : pluginContext.plugins.map(function (plugin) {
                    var isVisible = plugin === pluginContext.visiblePlugin;
                    var label = "".concat(isVisible ? 'Hide' : 'Show', " ").concat(plugin.title);
                    var Icon = plugin.icon;
                    return (react_1.default.createElement(react_2.Tooltip, { key: plugin.title, label: label },
                        react_1.default.createElement(react_2.UnStyledButton, { type: "button", className: isVisible ? 'active' : '', onClick: function () {
                                if (isVisible) {
                                    pluginContext.setVisiblePlugin(null);
                                    pluginResize.setHiddenElement('first');
                                }
                                else {
                                    pluginContext.setVisiblePlugin(plugin);
                                    pluginResize.setHiddenElement(null);
                                }
                            }, "aria-label": label },
                            react_1.default.createElement(Icon, { "aria-hidden": "true" }))));
                })
                : null),
            react_1.default.createElement("div", null,
                react_1.default.createElement(react_2.Tooltip, { label: "Re-fetch GraphQL schema" },
                    react_1.default.createElement(react_2.UnStyledButton, { type: "button", disabled: schemaContext.isFetching, onClick: function () { return schemaContext.introspect(); }, "aria-label": "Re-fetch GraphQL schema" },
                        react_1.default.createElement(react_2.ReloadIcon, { className: schemaContext.isFetching ? 'graphiql-spin' : '', "aria-hidden": "true" }))),
                react_1.default.createElement(react_2.Tooltip, { label: "Open short keys dialog" },
                    react_1.default.createElement(react_2.UnStyledButton, { type: "button", onClick: function () { return setShowDialog('short-keys'); }, "aria-label": "Open short keys dialog" },
                        react_1.default.createElement(react_2.KeyboardShortcutIcon, { "aria-hidden": "true" }))),
                react_1.default.createElement(react_2.Tooltip, { label: "Open settings dialog" },
                    react_1.default.createElement(react_2.UnStyledButton, { type: "button", onClick: function () { return setShowDialog('settings'); }, "aria-label": "Open settings dialog" },
                        react_1.default.createElement(react_2.SettingsIcon, { "aria-hidden": "true" }))))),
        react_1.default.createElement("div", { className: "graphiql-main" },
            react_1.default.createElement("div", { ref: pluginResize.firstRef, style: {
                    minWidth: '200px',
                } },
                react_1.default.createElement("div", { className: "graphiql-plugin" }, PluginContent ? react_1.default.createElement(PluginContent, null) : null)),
            react_1.default.createElement("div", { ref: pluginResize.dragBarRef }, (pluginContext === null || pluginContext === void 0 ? void 0 : pluginContext.visiblePlugin) ? (react_1.default.createElement("div", { className: "graphiql-horizontal-drag-bar" })) : null),
            react_1.default.createElement("div", { ref: pluginResize.secondRef },
                react_1.default.createElement("div", { className: "graphiql-sessions" },
                    react_1.default.createElement("div", { className: "graphiql-session-header" },
                        react_1.default.createElement(react_2.Tabs, { "aria-label": "Select active operation" }, editorContext.tabs.length > 1 ? (react_1.default.createElement(react_1.default.Fragment, null,
                            editorContext.tabs.map(function (tab, index) { return (react_1.default.createElement(react_2.Tab, { key: tab.id, isActive: index === editorContext.activeTabIndex },
                                react_1.default.createElement(react_2.Tab.Button, { "aria-controls": "graphiql-session", id: "graphiql-session-tab-".concat(index), onClick: function () {
                                        executionContext.stop();
                                        editorContext.changeTab(index);
                                    } }, tab.title),
                                react_1.default.createElement(react_2.Tab.Close, { onClick: function () {
                                        if (editorContext.activeTabIndex === index) {
                                            executionContext.stop();
                                        }
                                        editorContext.closeTab(index);
                                    } }))); }),
                            react_1.default.createElement(react_2.Tooltip, { label: "Add tab" },
                                react_1.default.createElement(react_2.UnStyledButton, { type: "button", className: "graphiql-tab-add", onClick: function () { return editorContext.addTab(); }, "aria-label": "Add tab" },
                                    react_1.default.createElement(react_2.PlusIcon, { "aria-hidden": "true" }))))) : null),
                        react_1.default.createElement("div", { className: "graphiql-session-header-right" },
                            editorContext.tabs.length === 1 ? (react_1.default.createElement(react_2.Tooltip, { label: "Add tab" },
                                react_1.default.createElement(react_2.UnStyledButton, { type: "button", className: "graphiql-tab-add", onClick: function () { return editorContext.addTab(); }, "aria-label": "Add tab" },
                                    react_1.default.createElement(react_2.PlusIcon, { "aria-hidden": "true" })))) : null,
                            react_1.default.createElement("div", { className: "graphiql-logo" }, logo))),
                    react_1.default.createElement("div", { role: "tabpanel", id: "graphiql-session", className: "graphiql-session", "aria-labelledby": "graphiql-session-tab-".concat(editorContext.activeTabIndex) },
                        react_1.default.createElement("div", { ref: editorResize.firstRef },
                            react_1.default.createElement("div", { className: "graphiql-editors".concat(editorContext.tabs.length === 1 ? ' full-height' : '') },
                                react_1.default.createElement("div", { ref: editorToolsResize.firstRef },
                                    react_1.default.createElement("section", { className: "graphiql-query-editor", "aria-label": "Query Editor" },
                                        react_1.default.createElement("div", { className: "graphiql-query-editor-wrapper" },
                                            react_1.default.createElement(react_2.QueryEditor, { editorTheme: props.editorTheme, keyMap: props.keyMap, onClickReference: onClickReference, onCopyQuery: props.onCopyQuery, onEdit: props.onEditQuery, readOnly: props.readOnly })),
                                        react_1.default.createElement("div", { className: "graphiql-toolbar", role: "toolbar", "aria-label": "Editor Commands" },
                                            react_1.default.createElement(react_2.ExecuteButton, null),
                                            toolbar))),
                                react_1.default.createElement("div", { ref: editorToolsResize.dragBarRef },
                                    react_1.default.createElement("div", { className: "graphiql-editor-tools" },
                                        react_1.default.createElement("div", { className: "graphiql-editor-tools-tabs" },
                                            react_1.default.createElement(react_2.UnStyledButton, { type: "button", className: activeSecondaryEditor === 'variables'
                                                    ? 'active'
                                                    : '', onClick: function () {
                                                    if (editorToolsResize.hiddenElement === 'second') {
                                                        editorToolsResize.setHiddenElement(null);
                                                    }
                                                    setActiveSecondaryEditor('variables');
                                                } }, "Variables"),
                                            isHeadersEditorEnabled ? (react_1.default.createElement(react_2.UnStyledButton, { type: "button", className: activeSecondaryEditor === 'headers'
                                                    ? 'active'
                                                    : '', onClick: function () {
                                                    if (editorToolsResize.hiddenElement === 'second') {
                                                        editorToolsResize.setHiddenElement(null);
                                                    }
                                                    setActiveSecondaryEditor('headers');
                                                } }, "Headers")) : null),
                                        react_1.default.createElement(react_2.Tooltip, { label: editorToolsResize.hiddenElement === 'second'
                                                ? 'Show editor tools'
                                                : 'Hide editor tools' },
                                            react_1.default.createElement(react_2.UnStyledButton, { type: "button", onClick: function () {
                                                    editorToolsResize.setHiddenElement(editorToolsResize.hiddenElement === 'second'
                                                        ? null
                                                        : 'second');
                                                }, "aria-label": editorToolsResize.hiddenElement === 'second'
                                                    ? 'Show editor tools'
                                                    : 'Hide editor tools' }, editorToolsResize.hiddenElement === 'second' ? (react_1.default.createElement(react_2.ChevronUpIcon, { className: "graphiql-chevron-icon", "aria-hidden": "true" })) : (react_1.default.createElement(react_2.ChevronDownIcon, { className: "graphiql-chevron-icon", "aria-hidden": "true" })))))),
                                react_1.default.createElement("div", { ref: editorToolsResize.secondRef },
                                    react_1.default.createElement("section", { className: "graphiql-editor-tool", "aria-label": activeSecondaryEditor === 'variables'
                                            ? 'Variables'
                                            : 'Headers' },
                                        react_1.default.createElement(react_2.VariableEditor, { editorTheme: props.editorTheme, isHidden: activeSecondaryEditor !== 'variables', keyMap: props.keyMap, onEdit: props.onEditVariables, onClickReference: onClickReference, readOnly: props.readOnly }),
                                        isHeadersEditorEnabled && (react_1.default.createElement(react_2.HeaderEditor, { editorTheme: props.editorTheme, isHidden: activeSecondaryEditor !== 'headers', keyMap: props.keyMap, onEdit: props.onEditHeaders, readOnly: props.readOnly })))))),
                        react_1.default.createElement("div", { ref: editorResize.dragBarRef },
                            react_1.default.createElement("div", { className: "graphiql-horizontal-drag-bar" })),
                        react_1.default.createElement("div", { ref: editorResize.secondRef },
                            react_1.default.createElement("div", { className: "graphiql-response" },
                                executionContext.isFetching ? react_1.default.createElement(react_2.Spinner, null) : null,
                                react_1.default.createElement(react_2.ResponseEditor, { editorTheme: props.editorTheme, responseTooltip: props.responseTooltip, keyMap: props.keyMap }),
                                footer)))))),
        react_1.default.createElement(react_2.Dialog, { isOpen: showDialog === 'short-keys', onDismiss: function () { return setShowDialog(null); } },
            react_1.default.createElement("div", { className: "graphiql-dialog-header" },
                react_1.default.createElement("div", { className: "graphiql-dialog-title" }, "Short Keys"),
                react_1.default.createElement(react_2.Dialog.Close, { onClick: function () { return setShowDialog(null); } })),
            react_1.default.createElement("div", { className: "graphiql-dialog-section" },
                react_1.default.createElement("div", null,
                    react_1.default.createElement("table", { className: "graphiql-table" },
                        react_1.default.createElement("thead", null,
                            react_1.default.createElement("tr", null,
                                react_1.default.createElement("th", null, "Short key"),
                                react_1.default.createElement("th", null, "Function"))),
                        react_1.default.createElement("tbody", null,
                            react_1.default.createElement("tr", null,
                                react_1.default.createElement("td", null,
                                    modifier,
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "F")),
                                react_1.default.createElement("td", null, "Search in editor")),
                            react_1.default.createElement("tr", null,
                                react_1.default.createElement("td", null,
                                    modifier,
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "K")),
                                react_1.default.createElement("td", null, "Search in documentation")),
                            react_1.default.createElement("tr", null,
                                react_1.default.createElement("td", null,
                                    modifier,
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "Enter")),
                                react_1.default.createElement("td", null, "Execute query")),
                            react_1.default.createElement("tr", null,
                                react_1.default.createElement("td", null,
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "Ctrl"),
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "Shift"),
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "P")),
                                react_1.default.createElement("td", null, "Prettify editors")),
                            react_1.default.createElement("tr", null,
                                react_1.default.createElement("td", null,
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "Ctrl"),
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "Shift"),
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "M")),
                                react_1.default.createElement("td", null, "Merge fragments definitions into operation definition")),
                            react_1.default.createElement("tr", null,
                                react_1.default.createElement("td", null,
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "Ctrl"),
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "Shift"),
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "C")),
                                react_1.default.createElement("td", null, "Copy query")),
                            react_1.default.createElement("tr", null,
                                react_1.default.createElement("td", null,
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "Ctrl"),
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "Shift"),
                                    ' + ',
                                    react_1.default.createElement("code", { className: "graphiql-key" }, "R")),
                                react_1.default.createElement("td", null, "Re-fetch schema using introspection")))),
                    react_1.default.createElement("p", null,
                        "The editors use",
                        ' ',
                        react_1.default.createElement("a", { href: "https://codemirror.net/5/doc/manual.html#keymaps", target: "_blank", rel: "noopener noreferrer" }, "CodeMirror Key Maps"),
                        ' ',
                        "that add more short keys. This instance of Graph",
                        react_1.default.createElement("em", null, "i"),
                        "QL uses",
                        ' ',
                        react_1.default.createElement("code", null, props.keyMap || 'sublime'),
                        ".")))),
        react_1.default.createElement(react_2.Dialog, { isOpen: showDialog === 'settings', onDismiss: function () {
                setShowDialog(null);
                setClearStorageStatus(null);
            } },
            react_1.default.createElement("div", { className: "graphiql-dialog-header" },
                react_1.default.createElement("div", { className: "graphiql-dialog-title" }, "Settings"),
                react_1.default.createElement(react_2.Dialog.Close, { onClick: function () {
                        setShowDialog(null);
                        setClearStorageStatus(null);
                    } })),
            react_1.default.createElement("div", { className: "graphiql-dialog-section" },
                react_1.default.createElement("div", null,
                    react_1.default.createElement("div", { className: "graphiql-dialog-section-title" }, "Theme"),
                    react_1.default.createElement("div", { className: "graphiql-dialog-section-caption" }, "Adjust how the interface looks like.")),
                react_1.default.createElement("div", null,
                    react_1.default.createElement(react_2.ButtonGroup, null,
                        react_1.default.createElement(react_2.Button, { type: "button", className: theme === null ? 'active' : '', onClick: function () { return setTheme(null); } }, "System"),
                        react_1.default.createElement(react_2.Button, { type: "button", className: theme === 'light' ? 'active' : '', onClick: function () { return setTheme('light'); } }, "Light"),
                        react_1.default.createElement(react_2.Button, { type: "button", className: theme === 'dark' ? 'active' : '', onClick: function () { return setTheme('dark'); } }, "Dark")))),
            storageContext ? (react_1.default.createElement("div", { className: "graphiql-dialog-section" },
                react_1.default.createElement("div", null,
                    react_1.default.createElement("div", { className: "graphiql-dialog-section-title" }, "Clear storage"),
                    react_1.default.createElement("div", { className: "graphiql-dialog-section-caption" }, "Remove all locally stored data and start fresh.")),
                react_1.default.createElement("div", null,
                    react_1.default.createElement(react_2.Button, { type: "button", state: clearStorageStatus || undefined, disabled: clearStorageStatus === 'success', onClick: function () {
                            try {
                                storageContext === null || storageContext === void 0 ? void 0 : storageContext.clear();
                                setClearStorageStatus('success');
                            }
                            catch (_a) {
                                setClearStorageStatus('error');
                            }
                        } }, clearStorageStatus === 'success'
                        ? 'Cleared data'
                        : clearStorageStatus === 'error'
                            ? 'Failed'
                            : 'Clear data')))) : null)));
}
exports.GraphiQLInterface = GraphiQLInterface;
function GraphiQLLogo(props) {
    return (react_1.default.createElement("div", { className: "title" }, props.children || (react_1.default.createElement("a", { className: "graphiql-logo-link", href: "https://github.com/graphql/graphiql", target: "_blank", rel: "noreferrer" },
        "Graph",
        react_1.default.createElement("em", null, "i"),
        "QL"))));
}
GraphiQLLogo.displayName = 'GraphiQLLogo';
function GraphiQLToolbar(props) {
    return react_1.default.createElement(react_1.default.Fragment, null, props.children);
}
GraphiQLToolbar.displayName = 'GraphiQLToolbar';
function GraphiQLFooter(props) {
    return react_1.default.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;
}
//# sourceMappingURL=GraphiQL.js.map