graphiql
Version:
An graphical interactive in-browser GraphQL IDE.
883 lines (882 loc) • 25.4 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { c } from "react-compiler-runtime";
import { useState, Children, useRef, Fragment } from "react";
import { useGraphiQLActions, pick, useGraphiQL, useMonaco, useDragResize, cn, UnStyledButton, ChevronUpIcon, ChevronDownIcon, Tab, Tooltip, GraphiQLProvider, QueryEditor, Spinner, ExecuteButton, VariableEditor, HeaderEditor, Tabs, PlusIcon, ResponseEditor } from "@graphiql/react";
import { HISTORY_PLUGIN, HistoryStore } from "@graphiql/plugin-history";
import { DOC_EXPLORER_PLUGIN, DocExplorerStore } from "@graphiql/plugin-doc-explorer";
import { GraphiQLFooter } from "./ui/footer.js";
import { GraphiQLToolbar } from "./ui/toolbar.js";
import { GraphiQLLogo } from "./ui/logo.js";
import { Sidebar } from "./ui/sidebar.js";
const GraphiQL_ = (t0) => {
var _a, _b;
const $ = c(54);
let children;
let className;
let confirmCloseTab;
let defaultEditorToolsVisibility;
let forcedTheme;
let isHeadersEditorEnabled;
let maxHistoryLength;
let onEditHeaders;
let onEditQuery;
let onEditVariables;
let props;
let responseTooltip;
let showPersistHeadersSettings;
let t1;
let t2;
if ($[0] !== t0) {
({
maxHistoryLength,
plugins: t1,
referencePlugin: t2,
onEditQuery,
onEditVariables,
onEditHeaders,
responseTooltip,
defaultEditorToolsVisibility,
isHeadersEditorEnabled,
showPersistHeadersSettings,
forcedTheme,
confirmCloseTab,
className,
children,
...props
} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = confirmCloseTab;
$[4] = defaultEditorToolsVisibility;
$[5] = forcedTheme;
$[6] = isHeadersEditorEnabled;
$[7] = maxHistoryLength;
$[8] = onEditHeaders;
$[9] = onEditQuery;
$[10] = onEditVariables;
$[11] = props;
$[12] = responseTooltip;
$[13] = showPersistHeadersSettings;
$[14] = t1;
$[15] = t2;
} else {
children = $[1];
className = $[2];
confirmCloseTab = $[3];
defaultEditorToolsVisibility = $[4];
forcedTheme = $[5];
isHeadersEditorEnabled = $[6];
maxHistoryLength = $[7];
onEditHeaders = $[8];
onEditQuery = $[9];
onEditVariables = $[10];
props = $[11];
responseTooltip = $[12];
showPersistHeadersSettings = $[13];
t1 = $[14];
t2 = $[15];
}
let t3;
if ($[16] !== t1) {
t3 = t1 === void 0 ? [HISTORY_PLUGIN] : t1;
$[16] = t1;
$[17] = t3;
} else {
t3 = $[17];
}
const plugins = t3;
const referencePlugin = t2 === void 0 ? DOC_EXPLORER_PLUGIN : t2;
if ((_a = props.toolbar) == null ? void 0 : _a.additionalContent) {
throw new TypeError("The `toolbar.additionalContent` prop has been removed. Use render props on `GraphiQL.Toolbar` component instead.");
}
if ((_b = props.toolbar) == null ? void 0 : _b.additionalComponent) {
throw new TypeError("The `toolbar.additionalComponent` prop has been removed. Use render props on `GraphiQL.Toolbar` component instead.");
}
if (props.keyMap) {
throw new TypeError("`keyMap` was removed. To use Vim or Emacs keybindings in Monaco, you can use community plugins. Monaco Vim: https://github.com/brijeshb42/monaco-vim. Monaco Emacs: https://github.com/aioutecism/monaco-emacs");
}
if (props.readOnly) {
throw new TypeError("The `readOnly` prop has been removed.");
}
const t4 = showPersistHeadersSettings ?? props.shouldPersistHeaders !== false;
let t5;
if ($[18] !== className || $[19] !== confirmCloseTab || $[20] !== defaultEditorToolsVisibility || $[21] !== forcedTheme || $[22] !== isHeadersEditorEnabled || $[23] !== onEditHeaders || $[24] !== onEditQuery || $[25] !== onEditVariables || $[26] !== responseTooltip || $[27] !== t4) {
t5 = {
showPersistHeadersSettings: t4,
onEditQuery,
onEditVariables,
onEditHeaders,
responseTooltip,
defaultEditorToolsVisibility,
isHeadersEditorEnabled,
forcedTheme,
confirmCloseTab,
className
};
$[18] = className;
$[19] = confirmCloseTab;
$[20] = defaultEditorToolsVisibility;
$[21] = forcedTheme;
$[22] = isHeadersEditorEnabled;
$[23] = onEditHeaders;
$[24] = onEditQuery;
$[25] = onEditVariables;
$[26] = responseTooltip;
$[27] = t4;
$[28] = t5;
} else {
t5 = $[28];
}
const interfaceProps = t5;
let t6;
if ($[29] !== plugins) {
t6 = plugins.includes(HISTORY_PLUGIN);
$[29] = plugins;
$[30] = t6;
} else {
t6 = $[30];
}
const hasHistoryPlugin = t6;
const HistoryToUse = hasHistoryPlugin ? HistoryStore : Fragment;
const DocExplorerToUse = referencePlugin === DOC_EXPLORER_PLUGIN ? DocExplorerStore : Fragment;
let t7;
if ($[31] !== referencePlugin) {
t7 = referencePlugin ? [referencePlugin] : [];
$[31] = referencePlugin;
$[32] = t7;
} else {
t7 = $[32];
}
let t8;
if ($[33] !== plugins || $[34] !== t7) {
t8 = [...t7, ...plugins];
$[33] = plugins;
$[34] = t7;
$[35] = t8;
} else {
t8 = $[35];
}
let t9;
if ($[36] !== hasHistoryPlugin || $[37] !== maxHistoryLength) {
t9 = hasHistoryPlugin && {
maxHistoryLength
};
$[36] = hasHistoryPlugin;
$[37] = maxHistoryLength;
$[38] = t9;
} else {
t9 = $[38];
}
let t10;
if ($[39] !== children || $[40] !== interfaceProps) {
t10 = /* @__PURE__ */ jsx(GraphiQLInterface, { ...interfaceProps, children });
$[39] = children;
$[40] = interfaceProps;
$[41] = t10;
} else {
t10 = $[41];
}
let t11;
if ($[42] !== DocExplorerToUse || $[43] !== t10) {
t11 = /* @__PURE__ */ jsx(DocExplorerToUse, { children: t10 });
$[42] = DocExplorerToUse;
$[43] = t10;
$[44] = t11;
} else {
t11 = $[44];
}
let t12;
if ($[45] !== HistoryToUse || $[46] !== t11 || $[47] !== t9) {
t12 = /* @__PURE__ */ jsx(HistoryToUse, { ...t9, children: t11 });
$[45] = HistoryToUse;
$[46] = t11;
$[47] = t9;
$[48] = t12;
} else {
t12 = $[48];
}
let t13;
if ($[49] !== props || $[50] !== referencePlugin || $[51] !== t12 || $[52] !== t8) {
t13 = /* @__PURE__ */ jsx(GraphiQLProvider, { plugins: t8, referencePlugin, ...props, children: t12 });
$[49] = props;
$[50] = referencePlugin;
$[51] = t12;
$[52] = t8;
$[53] = t13;
} else {
t13 = $[53];
}
return t13;
};
const TAB_CLASS_PREFIX = "graphiql-session-tab-";
const LABEL = {
newTab: "New tab"
};
function GraphiQLInterface(t0) {
const $ = c(150);
const {
forcedTheme,
isHeadersEditorEnabled: t1,
defaultEditorToolsVisibility,
children: $children,
confirmCloseTab,
className,
onEditQuery,
onEditVariables,
onEditHeaders,
responseTooltip,
showPersistHeadersSettings
} = t0;
const isHeadersEditorEnabled = t1 === void 0 ? true : t1;
const {
addTab,
moveTab,
closeTab,
changeTab,
setVisiblePlugin
} = useGraphiQLActions();
let t2;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t2 = pick("initialVariables", "initialHeaders", "tabs", "activeTabIndex", "isFetching", "visiblePlugin");
$[0] = t2;
} else {
t2 = $[0];
}
const {
initialVariables,
initialHeaders,
tabs,
activeTabIndex,
isFetching,
visiblePlugin
} = useGraphiQL(t2);
const hasMonaco = useMonaco(_temp);
const PluginContent = visiblePlugin == null ? void 0 : visiblePlugin.content;
const t3 = visiblePlugin ? void 0 : "first";
let t4;
if ($[1] !== setVisiblePlugin || $[2] !== t3) {
t4 = {
defaultSizeRelation: 0.3333333333333333,
direction: "horizontal",
initiallyHidden: t3,
onHiddenElementChange(resizableElement) {
if (resizableElement === "first") {
setVisiblePlugin(null);
}
},
sizeThresholdSecond: 200,
storageKey: "docExplorerFlex"
};
$[1] = setVisiblePlugin;
$[2] = t3;
$[3] = t4;
} else {
t4 = $[3];
}
const {
hiddenElement: pluginHiddenElement,
setHiddenElement: setPluginHiddenElement,
firstRef: pluginFirstRef,
dragBarRef: pluginDragBarRef,
secondRef: pluginSecondRef
} = useDragResize(t4);
let t5;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
t5 = {
direction: "horizontal",
storageKey: "editorFlex"
};
$[4] = t5;
} else {
t5 = $[4];
}
const {
firstRef: editorFirstRef,
dragBarRef: editorDragBarRef,
secondRef: editorSecondRef
} = useDragResize(t5);
let t6;
if ($[5] !== initialHeaders || $[6] !== initialVariables) {
t6 = (d) => {
if (d === "variables" || d === "headers") {
return;
}
if (typeof d === "boolean") {
return d ? void 0 : "second";
}
return initialVariables || initialHeaders ? void 0 : "second";
};
$[5] = initialHeaders;
$[6] = initialVariables;
$[7] = t6;
} else {
t6 = $[7];
}
let t7;
if ($[8] !== defaultEditorToolsVisibility || $[9] !== t6) {
t7 = t6(defaultEditorToolsVisibility);
$[8] = defaultEditorToolsVisibility;
$[9] = t6;
$[10] = t7;
} else {
t7 = $[10];
}
let t8;
if ($[11] !== t7) {
t8 = {
defaultSizeRelation: 3,
direction: "vertical",
initiallyHidden: t7,
sizeThresholdSecond: 60,
storageKey: "secondaryEditorFlex"
};
$[11] = t7;
$[12] = t8;
} else {
t8 = $[12];
}
const {
hiddenElement: editorToolsHiddenElement,
setHiddenElement: setEditorToolsHiddenElement,
firstRef: editorToolsFirstRef,
dragBarRef: editorToolsDragBarRef,
secondRef: editorToolsSecondRef
} = useDragResize(t8);
let t9;
if ($[13] !== defaultEditorToolsVisibility || $[14] !== initialHeaders || $[15] !== initialVariables || $[16] !== isHeadersEditorEnabled) {
t9 = () => {
if (defaultEditorToolsVisibility === "variables" || defaultEditorToolsVisibility === "headers") {
return defaultEditorToolsVisibility;
}
return !initialVariables && initialHeaders && isHeadersEditorEnabled ? "headers" : "variables";
};
$[13] = defaultEditorToolsVisibility;
$[14] = initialHeaders;
$[15] = initialVariables;
$[16] = isHeadersEditorEnabled;
$[17] = t9;
} else {
t9 = $[17];
}
const [activeSecondaryEditor, setActiveSecondaryEditor] = useState(t9);
let t10;
if ($[18] !== $children) {
let t112;
let t122;
if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
t112 = /* @__PURE__ */ jsx(GraphiQL.Logo, {});
t122 = /* @__PURE__ */ jsx(GraphiQL.Toolbar, {});
$[20] = t112;
$[21] = t122;
} else {
t112 = $[20];
t122 = $[21];
}
t10 = Children.toArray($children).reduce(_temp2, {
logo: t112,
toolbar: t122,
children: []
});
$[18] = $children;
$[19] = t10;
} else {
t10 = $[19];
}
const {
logo,
toolbar,
footer,
children
} = t10;
let t11;
if ($[22] !== pluginHiddenElement || $[23] !== setPluginHiddenElement) {
t11 = function onClickReference2() {
if (pluginHiddenElement === "first") {
setPluginHiddenElement(null);
}
};
$[22] = pluginHiddenElement;
$[23] = setPluginHiddenElement;
$[24] = t11;
} else {
t11 = $[24];
}
const onClickReference = t11;
let t12;
if ($[25] !== editorToolsHiddenElement || $[26] !== setEditorToolsHiddenElement) {
t12 = (event) => {
if (editorToolsHiddenElement === "second") {
setEditorToolsHiddenElement(null);
}
const tabName = event.currentTarget.dataset.name;
setActiveSecondaryEditor(tabName);
};
$[25] = editorToolsHiddenElement;
$[26] = setEditorToolsHiddenElement;
$[27] = t12;
} else {
t12 = $[27];
}
const handleToolsTabClick = t12;
let t13;
if ($[28] !== editorToolsHiddenElement || $[29] !== setEditorToolsHiddenElement) {
t13 = () => {
setEditorToolsHiddenElement(editorToolsHiddenElement === "second" ? null : "second");
};
$[28] = editorToolsHiddenElement;
$[29] = setEditorToolsHiddenElement;
$[30] = t13;
} else {
t13 = $[30];
}
const toggleEditorTools = t13;
let t14;
if ($[31] !== closeTab || $[32] !== confirmCloseTab) {
t14 = async (event_0) => {
const tabButton = event_0.currentTarget.previousSibling;
const index = Number(tabButton.id.replace(TAB_CLASS_PREFIX, ""));
const shouldCloseTab = confirmCloseTab ? await confirmCloseTab(index) : true;
if (!shouldCloseTab) {
return;
}
closeTab(index);
};
$[31] = closeTab;
$[32] = confirmCloseTab;
$[33] = t14;
} else {
t14 = $[33];
}
const handleTabClose = t14;
let t15;
if ($[34] !== changeTab) {
t15 = (event_1) => {
const index_0 = Number(event_1.currentTarget.id.replace(TAB_CLASS_PREFIX, ""));
changeTab(index_0);
};
$[34] = changeTab;
$[35] = t15;
} else {
t15 = $[35];
}
const handleTabClick = t15;
const editorToolsText = `${editorToolsHiddenElement === "second" ? "Show" : "Hide"} editor tools`;
const EditorToolsIcon = editorToolsHiddenElement === "second" ? ChevronUpIcon : ChevronDownIcon;
let t16;
if ($[36] !== hasMonaco || $[37] !== onClickReference || $[38] !== onEditQuery) {
t16 = hasMonaco ? /* @__PURE__ */ jsx(QueryEditor, { onClickReference, onEdit: onEditQuery }) : /* @__PURE__ */ jsx(Spinner, {});
$[36] = hasMonaco;
$[37] = onClickReference;
$[38] = onEditQuery;
$[39] = t16;
} else {
t16 = $[39];
}
let t17;
if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
t17 = /* @__PURE__ */ jsx(ExecuteButton, {});
$[40] = t17;
} else {
t17 = $[40];
}
let t18;
if ($[41] !== toolbar) {
t18 = /* @__PURE__ */ jsxs("div", { className: "graphiql-toolbar", role: "toolbar", "aria-label": "Editor Commands", children: [
t17,
toolbar
] });
$[41] = toolbar;
$[42] = t18;
} else {
t18 = $[42];
}
let t19;
if ($[43] !== editorToolsFirstRef || $[44] !== t16 || $[45] !== t18) {
t19 = /* @__PURE__ */ jsxs("section", { className: "graphiql-query-editor", "aria-label": "Operation Editor", ref: editorToolsFirstRef, children: [
t16,
t18
] });
$[43] = editorToolsFirstRef;
$[44] = t16;
$[45] = t18;
$[46] = t19;
} else {
t19 = $[46];
}
const t20 = activeSecondaryEditor === "variables" && editorToolsHiddenElement !== "second" && "active";
let t21;
if ($[47] !== t20) {
t21 = cn(t20);
$[47] = t20;
$[48] = t21;
} else {
t21 = $[48];
}
let t22;
if ($[49] !== handleToolsTabClick || $[50] !== t21) {
t22 = /* @__PURE__ */ jsx(UnStyledButton, { type: "button", className: t21, onClick: handleToolsTabClick, "data-name": "variables", children: "Variables" });
$[49] = handleToolsTabClick;
$[50] = t21;
$[51] = t22;
} else {
t22 = $[51];
}
let t23;
if ($[52] !== activeSecondaryEditor || $[53] !== editorToolsHiddenElement || $[54] !== handleToolsTabClick || $[55] !== isHeadersEditorEnabled) {
t23 = isHeadersEditorEnabled && /* @__PURE__ */ jsx(UnStyledButton, { type: "button", className: cn(activeSecondaryEditor === "headers" && editorToolsHiddenElement !== "second" && "active"), onClick: handleToolsTabClick, "data-name": "headers", children: "Headers" });
$[52] = activeSecondaryEditor;
$[53] = editorToolsHiddenElement;
$[54] = handleToolsTabClick;
$[55] = isHeadersEditorEnabled;
$[56] = t23;
} else {
t23 = $[56];
}
let t24;
if ($[57] !== EditorToolsIcon) {
t24 = /* @__PURE__ */ jsx(EditorToolsIcon, { className: "graphiql-chevron-icon", "aria-hidden": "true" });
$[57] = EditorToolsIcon;
$[58] = t24;
} else {
t24 = $[58];
}
let t25;
if ($[59] !== editorToolsText || $[60] !== t24 || $[61] !== toggleEditorTools) {
t25 = /* @__PURE__ */ jsx(UnStyledButton, { type: "button", onClick: toggleEditorTools, "aria-label": editorToolsText, className: "graphiql-toggle-editor-tools", children: t24 });
$[59] = editorToolsText;
$[60] = t24;
$[61] = toggleEditorTools;
$[62] = t25;
} else {
t25 = $[62];
}
let t26;
if ($[63] !== editorToolsText || $[64] !== t25) {
t26 = /* @__PURE__ */ jsx(Tooltip, { label: editorToolsText, children: t25 });
$[63] = editorToolsText;
$[64] = t25;
$[65] = t26;
} else {
t26 = $[65];
}
let t27;
if ($[66] !== editorToolsDragBarRef || $[67] !== t22 || $[68] !== t23 || $[69] !== t26) {
t27 = /* @__PURE__ */ jsxs("div", { ref: editorToolsDragBarRef, className: "graphiql-editor-tools", children: [
t22,
t23,
t26
] });
$[66] = editorToolsDragBarRef;
$[67] = t22;
$[68] = t23;
$[69] = t26;
$[70] = t27;
} else {
t27 = $[70];
}
const t28 = activeSecondaryEditor === "variables" ? "Variables" : "Headers";
const t29 = activeSecondaryEditor === "variables" ? "" : "hidden";
let t30;
if ($[71] !== onEditVariables || $[72] !== t29) {
t30 = /* @__PURE__ */ jsx(VariableEditor, { className: t29, onEdit: onEditVariables });
$[71] = onEditVariables;
$[72] = t29;
$[73] = t30;
} else {
t30 = $[73];
}
let t31;
if ($[74] !== activeSecondaryEditor || $[75] !== isHeadersEditorEnabled || $[76] !== onEditHeaders) {
t31 = isHeadersEditorEnabled && /* @__PURE__ */ jsx(HeaderEditor, { className: activeSecondaryEditor === "headers" ? "" : "hidden", onEdit: onEditHeaders });
$[74] = activeSecondaryEditor;
$[75] = isHeadersEditorEnabled;
$[76] = onEditHeaders;
$[77] = t31;
} else {
t31 = $[77];
}
let t32;
if ($[78] !== editorToolsSecondRef || $[79] !== t28 || $[80] !== t30 || $[81] !== t31) {
t32 = /* @__PURE__ */ jsxs("section", { className: "graphiql-editor-tool", "aria-label": t28, ref: editorToolsSecondRef, children: [
t30,
t31
] });
$[78] = editorToolsSecondRef;
$[79] = t28;
$[80] = t30;
$[81] = t31;
$[82] = t32;
} else {
t32 = $[82];
}
let t33;
if ($[83] !== editorFirstRef || $[84] !== t19 || $[85] !== t27 || $[86] !== t32) {
t33 = /* @__PURE__ */ jsxs("div", { className: "graphiql-editors", ref: editorFirstRef, children: [
t19,
t27,
t32
] });
$[83] = editorFirstRef;
$[84] = t19;
$[85] = t27;
$[86] = t32;
$[87] = t33;
} else {
t33 = $[87];
}
const editors = t33;
const tabContainerRef = useRef(null);
let t34;
if ($[88] !== className) {
t34 = cn("graphiql-container", className);
$[88] = className;
$[89] = t34;
} else {
t34 = $[89];
}
let t35;
if ($[90] !== forcedTheme || $[91] !== setPluginHiddenElement || $[92] !== showPersistHeadersSettings) {
t35 = /* @__PURE__ */ jsx(Sidebar, { forcedTheme, showPersistHeadersSettings, setHiddenElement: setPluginHiddenElement });
$[90] = forcedTheme;
$[91] = setPluginHiddenElement;
$[92] = showPersistHeadersSettings;
$[93] = t35;
} else {
t35 = $[93];
}
let t36;
if ($[94] === Symbol.for("react.memo_cache_sentinel")) {
t36 = {
minWidth: "200px"
};
$[94] = t36;
} else {
t36 = $[94];
}
let t37;
if ($[95] !== PluginContent) {
t37 = PluginContent && /* @__PURE__ */ jsx(PluginContent, {});
$[95] = PluginContent;
$[96] = t37;
} else {
t37 = $[96];
}
let t38;
if ($[97] !== pluginFirstRef || $[98] !== t37) {
t38 = /* @__PURE__ */ jsx("div", { ref: pluginFirstRef, className: "graphiql-plugin", style: t36, children: t37 });
$[97] = pluginFirstRef;
$[98] = t37;
$[99] = t38;
} else {
t38 = $[99];
}
let t39;
if ($[100] !== pluginDragBarRef || $[101] !== visiblePlugin) {
t39 = visiblePlugin && /* @__PURE__ */ jsx("div", { className: "graphiql-horizontal-drag-bar", ref: pluginDragBarRef });
$[100] = pluginDragBarRef;
$[101] = visiblePlugin;
$[102] = t39;
} else {
t39 = $[102];
}
let t40;
if ($[103] !== activeTabIndex || $[104] !== handleTabClick || $[105] !== handleTabClose || $[106] !== tabs) {
t40 = tabs.map((tab, index_1, arr) => /* @__PURE__ */ jsxs(Tab, { dragConstraints: tabContainerRef, value: tab, isActive: index_1 === activeTabIndex, children: [
/* @__PURE__ */ jsx(Tab.Button, { "aria-controls": "graphiql-session", id: `graphiql-session-tab-${index_1}`, title: tab.title, onClick: handleTabClick, children: tab.title }),
arr.length > 1 && /* @__PURE__ */ jsx(Tab.Close, { onClick: handleTabClose })
] }, tab.id));
$[103] = activeTabIndex;
$[104] = handleTabClick;
$[105] = handleTabClose;
$[106] = tabs;
$[107] = t40;
} else {
t40 = $[107];
}
let t41;
if ($[108] !== moveTab || $[109] !== t40 || $[110] !== tabs) {
t41 = /* @__PURE__ */ jsx(Tabs, { ref: tabContainerRef, values: tabs, onReorder: moveTab, "aria-label": "Select active operation", className: "no-scrollbar", children: t40 });
$[108] = moveTab;
$[109] = t40;
$[110] = tabs;
$[111] = t41;
} else {
t41 = $[111];
}
let t42;
if ($[112] === Symbol.for("react.memo_cache_sentinel")) {
t42 = /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" });
$[112] = t42;
} else {
t42 = $[112];
}
let t43;
if ($[113] !== addTab) {
t43 = /* @__PURE__ */ jsx(Tooltip, { label: LABEL.newTab, children: /* @__PURE__ */ jsx(UnStyledButton, { type: "button", className: "graphiql-tab-add", onClick: addTab, "aria-label": LABEL.newTab, children: t42 }) });
$[113] = addTab;
$[114] = t43;
} else {
t43 = $[114];
}
let t44;
if ($[115] !== logo || $[116] !== t41 || $[117] !== t43) {
t44 = /* @__PURE__ */ jsxs("div", { className: "graphiql-session-header", children: [
t41,
t43,
logo
] });
$[115] = logo;
$[116] = t41;
$[117] = t43;
$[118] = t44;
} else {
t44 = $[118];
}
const t45 = `${TAB_CLASS_PREFIX}${activeTabIndex}`;
let t46;
if ($[119] !== editorDragBarRef) {
t46 = /* @__PURE__ */ jsx("div", { className: "graphiql-horizontal-drag-bar", ref: editorDragBarRef });
$[119] = editorDragBarRef;
$[120] = t46;
} else {
t46 = $[120];
}
let t47;
if ($[121] !== isFetching) {
t47 = isFetching && /* @__PURE__ */ jsx(Spinner, {});
$[121] = isFetching;
$[122] = t47;
} else {
t47 = $[122];
}
let t48;
if ($[123] !== responseTooltip) {
t48 = /* @__PURE__ */ jsx(ResponseEditor, { responseTooltip });
$[123] = responseTooltip;
$[124] = t48;
} else {
t48 = $[124];
}
let t49;
if ($[125] !== editorSecondRef || $[126] !== footer || $[127] !== t47 || $[128] !== t48) {
t49 = /* @__PURE__ */ jsxs("div", { className: "graphiql-response", ref: editorSecondRef, children: [
t47,
t48,
footer
] });
$[125] = editorSecondRef;
$[126] = footer;
$[127] = t47;
$[128] = t48;
$[129] = t49;
} else {
t49 = $[129];
}
let t50;
if ($[130] !== editors || $[131] !== t45 || $[132] !== t46 || $[133] !== t49) {
t50 = /* @__PURE__ */ jsxs("div", { role: "tabpanel", id: "graphiql-session", "aria-labelledby": t45, children: [
editors,
t46,
t49
] });
$[130] = editors;
$[131] = t45;
$[132] = t46;
$[133] = t49;
$[134] = t50;
} else {
t50 = $[134];
}
let t51;
if ($[135] !== pluginSecondRef || $[136] !== t44 || $[137] !== t50) {
t51 = /* @__PURE__ */ jsxs("div", { ref: pluginSecondRef, className: "graphiql-sessions", children: [
t44,
t50
] });
$[135] = pluginSecondRef;
$[136] = t44;
$[137] = t50;
$[138] = t51;
} else {
t51 = $[138];
}
let t52;
if ($[139] !== t38 || $[140] !== t39 || $[141] !== t51) {
t52 = /* @__PURE__ */ jsxs("div", { className: "graphiql-main", children: [
t38,
t39,
t51
] });
$[139] = t38;
$[140] = t39;
$[141] = t51;
$[142] = t52;
} else {
t52 = $[142];
}
let t53;
if ($[143] !== t34 || $[144] !== t35 || $[145] !== t52) {
t53 = /* @__PURE__ */ jsxs("div", { className: t34, children: [
t35,
t52
] });
$[143] = t34;
$[144] = t35;
$[145] = t52;
$[146] = t53;
} else {
t53 = $[146];
}
let t54;
if ($[147] !== children || $[148] !== t53) {
t54 = /* @__PURE__ */ jsxs(Tooltip.Provider, { children: [
t53,
children
] });
$[147] = children;
$[148] = t53;
$[149] = t54;
} else {
t54 = $[149];
}
return t54;
}
function _temp2(acc, curr) {
bb64: switch (getChildComponentType(curr)) {
case GraphiQL.Logo: {
acc.logo = curr;
break bb64;
}
case GraphiQL.Toolbar: {
acc.toolbar = curr;
break bb64;
}
case GraphiQL.Footer: {
acc.footer = curr;
break bb64;
}
default: {
acc.children.push(curr);
}
}
return acc;
}
function _temp(state) {
return Boolean(state.monaco);
}
function getChildComponentType(child) {
if (child && typeof child === "object" && "type" in child && typeof child.type === "function") {
return child.type;
}
}
const GraphiQL = Object.assign(GraphiQL_, {
Logo: GraphiQLLogo,
Toolbar: GraphiQLToolbar,
Footer: GraphiQLFooter
});
export {
GraphiQL,
GraphiQLInterface
};
//# sourceMappingURL=GraphiQL.js.map