graphiql
Version:
An graphical interactive in-browser GraphQL IDE.
886 lines (885 loc) • 25.9 kB
JavaScript
import { ActivityBar } from "./ui/activity-bar.js";
import { GraphiQLFooter } from "./ui/footer.js";
import { c } from "react-compiler-runtime";
import { Children, Fragment, useEffect, useRef, useState } from "react";
import { clsx } from "clsx";
import { ChevronDownIcon, ChevronUpIcon, CopyIcon, GraphiQLProvider, MergeIcon, PlusIcon, PortalProvider, PrettifyIcon, QueryEditor, ResponseEditor, SaveIcon, SidePanel, Spinner, StatusBar, Tab, Tabs, Tooltip, TopBar, UnStyledButton, VarHeadersStrip, pick, useDragResize, useGraphiQL, useGraphiQLActions, useGraphiQLSettings, useMonaco } from "@graphiql/react";
import { HISTORY_PLUGIN, HistoryStore } from "@graphiql/plugin-history";
import { DOC_EXPLORER_PLUGIN, DocExplorerStore } from "@graphiql/plugin-doc-explorer";
import { QUERY_BUILDER_PLUGIN } from "@graphiql/plugin-query-builder";
import { COLLECTIONS_PLUGIN } from "@graphiql/plugin-collections";
import { jsx, jsxs } from "react/jsx-runtime";
// src/GraphiQL.tsx
var DEFAULT_PLUGINS = Object.freeze([
HISTORY_PLUGIN,
QUERY_BUILDER_PLUGIN,
COLLECTIONS_PLUGIN
]);
/**
* The top-level React component for GraphiQL, intended to encompass the entire
* browser viewport.
*
* @see https://github.com/graphql/graphiql#usage
*/
var GraphiQL_ = (t0) => {
const $ = c(54);
let brand;
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, brand, children, ...props} = t0);
$[0] = t0;
$[1] = brand;
$[2] = children;
$[3] = className;
$[4] = confirmCloseTab;
$[5] = defaultEditorToolsVisibility;
$[6] = forcedTheme;
$[7] = isHeadersEditorEnabled;
$[8] = maxHistoryLength;
$[9] = onEditHeaders;
$[10] = onEditQuery;
$[11] = onEditVariables;
$[12] = props;
$[13] = responseTooltip;
$[14] = showPersistHeadersSettings;
$[15] = t1;
$[16] = t2;
} else {
brand = $[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 = $[16];
}
const plugins = t1 === void 0 ? DEFAULT_PLUGINS : t1;
const referencePlugin = t2 === void 0 ? DOC_EXPLORER_PLUGIN : t2;
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 t3 = showPersistHeadersSettings ?? props.shouldPersistHeaders !== false;
let t4;
if ($[17] !== brand || $[18] !== className || $[19] !== confirmCloseTab || $[20] !== defaultEditorToolsVisibility || $[21] !== forcedTheme || $[22] !== isHeadersEditorEnabled || $[23] !== onEditHeaders || $[24] !== onEditQuery || $[25] !== onEditVariables || $[26] !== responseTooltip || $[27] !== t3) {
t4 = {
showPersistHeadersSettings: t3,
onEditQuery,
onEditVariables,
onEditHeaders,
responseTooltip,
defaultEditorToolsVisibility,
isHeadersEditorEnabled,
forcedTheme,
confirmCloseTab,
className,
brand
};
$[17] = brand;
$[18] = className;
$[19] = confirmCloseTab;
$[20] = defaultEditorToolsVisibility;
$[21] = forcedTheme;
$[22] = isHeadersEditorEnabled;
$[23] = onEditHeaders;
$[24] = onEditQuery;
$[25] = onEditVariables;
$[26] = responseTooltip;
$[27] = t3;
$[28] = t4;
} else t4 = $[28];
const interfaceProps = t4;
let t5;
if ($[29] !== plugins) {
t5 = plugins.includes(HISTORY_PLUGIN);
$[29] = plugins;
$[30] = t5;
} else t5 = $[30];
const hasHistoryPlugin = t5;
const HistoryToUse = hasHistoryPlugin ? HistoryStore : Fragment;
const DocExplorerToUse = referencePlugin === DOC_EXPLORER_PLUGIN ? DocExplorerStore : Fragment;
let t6;
if ($[31] !== referencePlugin) {
t6 = referencePlugin ? [referencePlugin] : [];
$[31] = referencePlugin;
$[32] = t6;
} else t6 = $[32];
let t7;
if ($[33] !== plugins || $[34] !== t6) {
t7 = [...t6, ...plugins];
$[33] = plugins;
$[34] = t6;
$[35] = t7;
} else t7 = $[35];
let t8;
if ($[36] !== hasHistoryPlugin || $[37] !== maxHistoryLength) {
t8 = hasHistoryPlugin && { maxHistoryLength };
$[36] = hasHistoryPlugin;
$[37] = maxHistoryLength;
$[38] = t8;
} else t8 = $[38];
let t9;
if ($[39] !== children || $[40] !== interfaceProps) {
t9 = /* @__PURE__ */ jsx(GraphiQLInterface, {
...interfaceProps,
children
});
$[39] = children;
$[40] = interfaceProps;
$[41] = t9;
} else t9 = $[41];
let t10;
if ($[42] !== DocExplorerToUse || $[43] !== t9) {
t10 = /* @__PURE__ */ jsx(DocExplorerToUse, { children: t9 });
$[42] = DocExplorerToUse;
$[43] = t9;
$[44] = t10;
} else t10 = $[44];
let t11;
if ($[45] !== HistoryToUse || $[46] !== t10 || $[47] !== t8) {
t11 = /* @__PURE__ */ jsx(HistoryToUse, {
...t8,
children: t10
});
$[45] = HistoryToUse;
$[46] = t10;
$[47] = t8;
$[48] = t11;
} else t11 = $[48];
let t12;
if ($[49] !== props || $[50] !== referencePlugin || $[51] !== t11 || $[52] !== t7) {
t12 = /* @__PURE__ */ jsx(GraphiQLProvider, {
plugins: t7,
referencePlugin,
...props,
children: t11
});
$[49] = props;
$[50] = referencePlugin;
$[51] = t11;
$[52] = t7;
$[53] = t12;
} else t12 = $[53];
return t12;
};
var TAB_CLASS_PREFIX = "graphiql-session-tab-";
var LABEL = {
newTab: "New tab",
prettify: "Prettify editors",
merge: "Merge fragments",
copy: "Copy operation",
save: "Save operation"
};
var GraphiQLInterface = (t0) => {
const $ = c(166);
const { forcedTheme, defaultEditorToolsVisibility, isHeadersEditorEnabled: t1, children: $children, confirmCloseTab, className, onEditQuery, onEditVariables, onEditHeaders, responseTooltip, showPersistHeadersSettings, brand } = t0;
const isHeadersEditorEnabled = t1 === void 0 ? true : t1;
const { addTab, moveTab, closeTab, changeTab, setVisiblePlugin, saveQuery, copyQuery, prettifyEditors, mergeQuery } = useGraphiQLActions();
let t2;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t2 = pick("initialVariables", "initialHeaders", "tabs", "activeTabIndex", "visiblePlugin", "operations", "plugins", "saveHandlers", "savingTabIds", "saveError");
$[0] = t2;
} else t2 = $[0];
const { initialVariables, initialHeaders, tabs, activeTabIndex, visiblePlugin, operations, plugins, saveHandlers, savingTabIds, saveError } = useGraphiQL(t2);
const canSave = saveHandlers.size > 0;
let t3;
if ($[1] !== activeTabIndex || $[2] !== savingTabIds || $[3] !== tabs) {
t3 = tabs[activeTabIndex] && savingTabIds.has(tabs[activeTabIndex].id);
$[1] = activeTabIndex;
$[2] = savingTabIds;
$[3] = tabs;
$[4] = t3;
} else t3 = $[4];
const isSaving = Boolean(t3);
const hasMonaco = useMonaco(_temp);
const containerRef = useRef(null);
const [portalContainer, setPortalContainer] = useState(null);
let t4;
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t4 = (node) => {
containerRef.current = node;
setPortalContainer(node);
};
$[5] = t4;
} else t4 = $[5];
const setContainerRef = t4;
useGraphiQLSettings(containerRef);
const t5 = visiblePlugin ? void 0 : "first";
let t6;
if ($[6] !== setVisiblePlugin || $[7] !== t5) {
t6 = {
defaultSizeRelation: .3333333333333333,
direction: "horizontal",
initiallyHidden: t5,
onHiddenElementChange(resizableElement) {
if (resizableElement === "first") setVisiblePlugin(null);
},
sizeThresholdSecond: 200,
storageKey: "docExplorerFlex"
};
$[6] = setVisiblePlugin;
$[7] = t5;
$[8] = t6;
} else t6 = $[8];
const { hiddenElement: pluginHiddenElement, setHiddenElement: setPluginHiddenElement, firstRef: pluginFirstRef, dragBarRef: pluginDragBarRef, secondRef: pluginSecondRef } = useDragResize(t6);
let t7;
if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
t7 = {
direction: "horizontal",
storageKey: "editorFlex"
};
$[9] = t7;
} else t7 = $[9];
const { firstRef: editorFirstRef, dragBarRef: editorDragBarRef, secondRef: editorSecondRef } = useDragResize(t7);
let t8;
if ($[10] !== initialHeaders || $[11] !== initialVariables) {
t8 = (d) => {
if (d === "variables" || d === "headers") return;
if (typeof d === "boolean") return d ? void 0 : "second";
return initialVariables || initialHeaders ? void 0 : "second";
};
$[10] = initialHeaders;
$[11] = initialVariables;
$[12] = t8;
} else t8 = $[12];
let t9;
if ($[13] !== defaultEditorToolsVisibility || $[14] !== t8) {
t9 = t8(defaultEditorToolsVisibility);
$[13] = defaultEditorToolsVisibility;
$[14] = t8;
$[15] = t9;
} else t9 = $[15];
let t10;
if ($[16] !== t9) {
t10 = {
defaultSizeRelation: 3,
direction: "vertical",
initiallyHidden: t9,
sizeThresholdSecond: 60,
storageKey: "secondaryEditorFlex"
};
$[16] = t9;
$[17] = t10;
} else t10 = $[17];
const { hiddenElement: editorToolsHiddenElement, setHiddenElement: setEditorToolsHiddenElement, firstRef: editorToolsFirstRef, dragBarRef: editorToolsDragBarRef, secondRef: editorToolsSecondRef } = useDragResize(t10);
let t11;
if ($[18] !== $children) {
t11 = Children.toArray($children).reduce(_temp2, { children: [] });
$[18] = $children;
$[19] = t11;
} else t11 = $[19];
const { footer, children } = t11;
let t12;
let t13;
if ($[20] !== pluginHiddenElement || $[21] !== setPluginHiddenElement || $[22] !== visiblePlugin) {
t12 = () => {
if (visiblePlugin && pluginHiddenElement === "first") setPluginHiddenElement(null);
};
t13 = [
visiblePlugin,
pluginHiddenElement,
setPluginHiddenElement
];
$[20] = pluginHiddenElement;
$[21] = setPluginHiddenElement;
$[22] = visiblePlugin;
$[23] = t12;
$[24] = t13;
} else {
t12 = $[23];
t13 = $[24];
}
useEffect(t12, t13);
let t14;
if ($[25] !== editorToolsHiddenElement || $[26] !== setEditorToolsHiddenElement) {
t14 = () => {
setEditorToolsHiddenElement(editorToolsHiddenElement === "second" ? null : "second");
};
$[25] = editorToolsHiddenElement;
$[26] = setEditorToolsHiddenElement;
$[27] = t14;
} else t14 = $[27];
const toggleEditorTools = t14;
let t15;
if ($[28] !== closeTab || $[29] !== confirmCloseTab) {
t15 = async (event) => {
const tabButton = event.currentTarget.previousSibling;
const index = Number(tabButton.id.replace(TAB_CLASS_PREFIX, ""));
if (!(confirmCloseTab ? await confirmCloseTab(index) : true)) return;
closeTab(index);
};
$[28] = closeTab;
$[29] = confirmCloseTab;
$[30] = t15;
} else t15 = $[30];
const handleTabClose = t15;
let t16;
if ($[31] !== changeTab) {
t16 = (event_0) => {
const index_0 = Number(event_0.currentTarget.id.replace(TAB_CLASS_PREFIX, ""));
changeTab(index_0);
};
$[31] = changeTab;
$[32] = t16;
} else t16 = $[32];
const handleTabClick = t16;
const editorToolsText = `${editorToolsHiddenElement === "second" ? "Show" : "Hide"} editor tools`;
const EditorToolsIcon = editorToolsHiddenElement === "second" ? ChevronUpIcon : ChevronDownIcon;
let t17;
if ($[33] !== hasMonaco || $[34] !== onEditQuery) {
t17 = hasMonaco ? /* @__PURE__ */ jsx(QueryEditor, { onEdit: onEditQuery }) : /* @__PURE__ */ jsx(Spinner, {});
$[33] = hasMonaco;
$[34] = onEditQuery;
$[35] = t17;
} else t17 = $[35];
let t18;
if ($[36] !== editorToolsFirstRef || $[37] !== t17) {
t18 = /* @__PURE__ */ jsx("section", {
className: "graphiql-query-editor",
"aria-label": "Operation Editor",
ref: editorToolsFirstRef,
children: t17
});
$[36] = editorToolsFirstRef;
$[37] = t17;
$[38] = t18;
} else t18 = $[38];
let t19;
if ($[39] !== EditorToolsIcon) {
t19 = /* @__PURE__ */ jsx(EditorToolsIcon, {
className: "graphiql-chevron-icon",
"aria-hidden": "true"
});
$[39] = EditorToolsIcon;
$[40] = t19;
} else t19 = $[40];
let t20;
if ($[41] !== editorToolsText || $[42] !== t19 || $[43] !== toggleEditorTools) {
t20 = /* @__PURE__ */ jsx(UnStyledButton, {
type: "button",
onClick: toggleEditorTools,
"aria-label": editorToolsText,
className: "graphiql-toggle-editor-tools",
children: t19
});
$[41] = editorToolsText;
$[42] = t19;
$[43] = toggleEditorTools;
$[44] = t20;
} else t20 = $[44];
let t21;
if ($[45] !== editorToolsText || $[46] !== t20) {
t21 = /* @__PURE__ */ jsx(Tooltip, {
label: editorToolsText,
children: t20
});
$[45] = editorToolsText;
$[46] = t20;
$[47] = t21;
} else t21 = $[47];
let t22;
if ($[48] !== editorToolsDragBarRef || $[49] !== t21) {
t22 = /* @__PURE__ */ jsx("div", {
ref: editorToolsDragBarRef,
className: "graphiql-editor-tools",
children: t21
});
$[48] = editorToolsDragBarRef;
$[49] = t21;
$[50] = t22;
} else t22 = $[50];
let t23;
if ($[51] !== initialHeaders || $[52] !== initialVariables || $[53] !== isHeadersEditorEnabled) {
t23 = (d_0) => {
if (d_0 === "variables" || d_0 === "headers") return d_0;
return !initialVariables && initialHeaders && isHeadersEditorEnabled ? "headers" : "variables";
};
$[51] = initialHeaders;
$[52] = initialVariables;
$[53] = isHeadersEditorEnabled;
$[54] = t23;
} else t23 = $[54];
let t24;
if ($[55] !== defaultEditorToolsVisibility || $[56] !== t23) {
t24 = t23(defaultEditorToolsVisibility);
$[55] = defaultEditorToolsVisibility;
$[56] = t23;
$[57] = t24;
} else t24 = $[57];
let t25;
if ($[58] !== isHeadersEditorEnabled || $[59] !== onEditHeaders || $[60] !== onEditVariables || $[61] !== t24) {
t25 = /* @__PURE__ */ jsx(VarHeadersStrip, {
defaultTab: t24,
headersEditorEnabled: isHeadersEditorEnabled,
onEditVariables,
onEditHeaders
});
$[58] = isHeadersEditorEnabled;
$[59] = onEditHeaders;
$[60] = onEditVariables;
$[61] = t24;
$[62] = t25;
} else t25 = $[62];
let t26;
if ($[63] !== editorToolsSecondRef || $[64] !== t25) {
t26 = /* @__PURE__ */ jsx("section", {
className: "graphiql-editor-tool",
"aria-label": "Variables and Headers",
ref: editorToolsSecondRef,
children: t25
});
$[63] = editorToolsSecondRef;
$[64] = t25;
$[65] = t26;
} else t26 = $[65];
let t27;
if ($[66] !== t18 || $[67] !== t22 || $[68] !== t26) {
t27 = /* @__PURE__ */ jsxs("div", {
className: "graphiql-editors",
children: [
t18,
t22,
t26
]
});
$[66] = t18;
$[67] = t22;
$[68] = t26;
$[69] = t27;
} else t27 = $[69];
const editors = t27;
const tabContainerRef = useRef(null);
let t28;
if ($[70] !== className) {
t28 = clsx("graphiql-container", className);
$[70] = className;
$[71] = t28;
} else t28 = $[71];
let t29;
if ($[72] !== brand) {
t29 = /* @__PURE__ */ jsx(TopBar, { brand });
$[72] = brand;
$[73] = t29;
} else t29 = $[73];
let t30;
if ($[74] !== forcedTheme || $[75] !== setPluginHiddenElement || $[76] !== showPersistHeadersSettings) {
t30 = /* @__PURE__ */ jsx(ActivityBar, {
forcedTheme,
showPersistHeadersSettings,
setHiddenElement: setPluginHiddenElement
});
$[74] = forcedTheme;
$[75] = setPluginHiddenElement;
$[76] = showPersistHeadersSettings;
$[77] = t30;
} else t30 = $[77];
let t31;
if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
t31 = /* @__PURE__ */ jsx(SidePanel, {});
$[78] = t31;
} else t31 = $[78];
let t32;
if ($[79] !== pluginFirstRef) {
t32 = /* @__PURE__ */ jsx("div", {
ref: pluginFirstRef,
className: "graphiql-plugin",
children: t31
});
$[79] = pluginFirstRef;
$[80] = t32;
} else t32 = $[80];
let t33;
if ($[81] !== pluginDragBarRef || $[82] !== visiblePlugin) {
t33 = visiblePlugin && /* @__PURE__ */ jsx("div", {
className: "graphiql-horizontal-drag-bar",
ref: pluginDragBarRef
});
$[81] = pluginDragBarRef;
$[82] = visiblePlugin;
$[83] = t33;
} else t33 = $[83];
let t34;
if ($[84] !== activeTabIndex || $[85] !== canSave || $[86] !== handleTabClick || $[87] !== handleTabClose || $[88] !== operations || $[89] !== tabs) {
t34 = tabs.map((tab, index_1) => {
const isActive = index_1 === activeTabIndex;
const otherOperations = isActive && tab.operationName && operations ? operations.length - 1 : 0;
const tabTitle = otherOperations > 0 ? `${tab.title} +${otherOperations}` : tab.title;
return /* @__PURE__ */ jsxs(Tab, {
dragConstraints: tabContainerRef,
value: tab,
isActive,
isDirty: canSave && tab.lastSavedQuery !== null && tab.query !== tab.lastSavedQuery,
children: [/* @__PURE__ */ jsx(Tab.Button, {
"aria-controls": "graphiql-session",
id: `graphiql-session-tab-${index_1}`,
title: tabTitle,
onClick: handleTabClick,
children: tabTitle
}), tabs.length > 1 && /* @__PURE__ */ jsx(Tab.Close, { onClick: handleTabClose })]
}, tab.id);
});
$[84] = activeTabIndex;
$[85] = canSave;
$[86] = handleTabClick;
$[87] = handleTabClose;
$[88] = operations;
$[89] = tabs;
$[90] = t34;
} else t34 = $[90];
let t35;
if ($[91] !== moveTab || $[92] !== t34 || $[93] !== tabs) {
t35 = /* @__PURE__ */ jsx(Tabs, {
ref: tabContainerRef,
values: tabs,
onReorder: moveTab,
"aria-label": "Select active operation",
className: "no-scrollbar",
children: t34
});
$[91] = moveTab;
$[92] = t34;
$[93] = tabs;
$[94] = t35;
} else t35 = $[94];
let t36;
if ($[95] === Symbol.for("react.memo_cache_sentinel")) {
t36 = /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" });
$[95] = t36;
} else t36 = $[95];
let t37;
if ($[96] !== addTab) {
t37 = /* @__PURE__ */ jsx(Tooltip, {
label: LABEL.newTab,
children: /* @__PURE__ */ jsx(UnStyledButton, {
type: "button",
className: "graphiql-tab-add",
onClick: addTab,
"aria-label": LABEL.newTab,
children: t36
})
});
$[96] = addTab;
$[97] = t37;
} else t37 = $[97];
let t38;
if ($[98] === Symbol.for("react.memo_cache_sentinel")) {
t38 = /* @__PURE__ */ jsx(PrettifyIcon, { "aria-hidden": "true" });
$[98] = t38;
} else t38 = $[98];
let t39;
if ($[99] !== prettifyEditors) {
t39 = /* @__PURE__ */ jsx(Tooltip, {
label: LABEL.prettify,
children: /* @__PURE__ */ jsx(UnStyledButton, {
type: "button",
className: "graphiql-tab-strip-action",
onClick: prettifyEditors,
"aria-label": LABEL.prettify,
children: t38
})
});
$[99] = prettifyEditors;
$[100] = t39;
} else t39 = $[100];
let t40;
if ($[101] === Symbol.for("react.memo_cache_sentinel")) {
t40 = /* @__PURE__ */ jsx(MergeIcon, { "aria-hidden": "true" });
$[101] = t40;
} else t40 = $[101];
let t41;
if ($[102] !== mergeQuery) {
t41 = /* @__PURE__ */ jsx(Tooltip, {
label: LABEL.merge,
children: /* @__PURE__ */ jsx(UnStyledButton, {
type: "button",
className: "graphiql-tab-strip-action",
onClick: mergeQuery,
"aria-label": LABEL.merge,
children: t40
})
});
$[102] = mergeQuery;
$[103] = t41;
} else t41 = $[103];
let t42;
if ($[104] === Symbol.for("react.memo_cache_sentinel")) {
t42 = /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" });
$[104] = t42;
} else t42 = $[104];
let t43;
if ($[105] !== copyQuery) {
t43 = /* @__PURE__ */ jsx(Tooltip, {
label: LABEL.copy,
children: /* @__PURE__ */ jsx(UnStyledButton, {
type: "button",
className: "graphiql-tab-strip-action",
onClick: copyQuery,
"aria-label": LABEL.copy,
children: t42
})
});
$[105] = copyQuery;
$[106] = t43;
} else t43 = $[106];
let t44;
if ($[107] !== canSave || $[108] !== isSaving || $[109] !== saveQuery) {
t44 = canSave && /* @__PURE__ */ jsx(Tooltip, {
label: isSaving ? "Saving operation" : LABEL.save,
children: /* @__PURE__ */ jsx(UnStyledButton, {
type: "button",
className: "graphiql-tab-strip-action",
onClick: saveQuery,
"aria-label": isSaving ? "Saving operation" : LABEL.save,
"aria-busy": isSaving,
children: isSaving ? /* @__PURE__ */ jsx(Spinner, {
className: "graphiql-tab-save-spinner",
"aria-hidden": "true"
}) : /* @__PURE__ */ jsx(SaveIcon, { "aria-hidden": "true" })
})
});
$[107] = canSave;
$[108] = isSaving;
$[109] = saveQuery;
$[110] = t44;
} else t44 = $[110];
let t45;
if ($[111] !== saveError) {
t45 = saveError && /* @__PURE__ */ jsxs("span", {
className: "graphiql-save-error",
role: "alert",
title: saveError,
children: ["Save failed: ", saveError]
});
$[111] = saveError;
$[112] = t45;
} else t45 = $[112];
let t46;
if ($[113] !== plugins) {
t46 = plugins.map(_temp3);
$[113] = plugins;
$[114] = t46;
} else t46 = $[114];
let t47;
if ($[115] !== t39 || $[116] !== t41 || $[117] !== t43 || $[118] !== t44 || $[119] !== t45 || $[120] !== t46) {
t47 = /* @__PURE__ */ jsxs("div", {
className: "graphiql-tab-strip-actions",
children: [
t39,
t41,
t43,
t44,
t45,
t46
]
});
$[115] = t39;
$[116] = t41;
$[117] = t43;
$[118] = t44;
$[119] = t45;
$[120] = t46;
$[121] = t47;
} else t47 = $[121];
let t48;
if ($[122] !== t35 || $[123] !== t37 || $[124] !== t47) {
t48 = /* @__PURE__ */ jsxs("div", {
className: "graphiql-session-header",
children: [
t35,
t37,
t47
]
});
$[122] = t35;
$[123] = t37;
$[124] = t47;
$[125] = t48;
} else t48 = $[125];
const t49 = `${TAB_CLASS_PREFIX}${activeTabIndex}`;
let t50;
if ($[126] !== editors || $[127] !== t49) {
t50 = /* @__PURE__ */ jsx("div", {
role: "region",
id: "graphiql-session",
"aria-labelledby": t49,
children: editors
});
$[126] = editors;
$[127] = t49;
$[128] = t50;
} else t50 = $[128];
let t51;
if ($[129] !== editorFirstRef || $[130] !== t48 || $[131] !== t50) {
t51 = /* @__PURE__ */ jsxs("div", {
ref: editorFirstRef,
className: "graphiql-editor-column",
children: [t48, t50]
});
$[129] = editorFirstRef;
$[130] = t48;
$[131] = t50;
$[132] = t51;
} else t51 = $[132];
let t52;
if ($[133] !== editorDragBarRef) {
t52 = /* @__PURE__ */ jsx("div", {
className: "graphiql-horizontal-drag-bar",
ref: editorDragBarRef
});
$[133] = editorDragBarRef;
$[134] = t52;
} else t52 = $[134];
let t53;
if ($[135] !== responseTooltip) {
t53 = /* @__PURE__ */ jsx(ResponseEditor, { responseTooltip });
$[135] = responseTooltip;
$[136] = t53;
} else t53 = $[136];
let t54;
if ($[137] !== footer || $[138] !== t53) {
t54 = /* @__PURE__ */ jsxs("div", {
className: "graphiql-response",
children: [t53, footer]
});
$[137] = footer;
$[138] = t53;
$[139] = t54;
} else t54 = $[139];
let t55;
if ($[140] !== editorSecondRef || $[141] !== t54) {
t55 = /* @__PURE__ */ jsx("div", {
ref: editorSecondRef,
className: "graphiql-response-column",
children: t54
});
$[140] = editorSecondRef;
$[141] = t54;
$[142] = t55;
} else t55 = $[142];
let t56;
if ($[143] !== t51 || $[144] !== t52 || $[145] !== t55) {
t56 = /* @__PURE__ */ jsxs("div", {
className: "graphiql-session-row",
children: [
t51,
t52,
t55
]
});
$[143] = t51;
$[144] = t52;
$[145] = t55;
$[146] = t56;
} else t56 = $[146];
let t57;
if ($[147] !== pluginSecondRef || $[148] !== t56) {
t57 = /* @__PURE__ */ jsx("div", {
ref: pluginSecondRef,
className: "graphiql-sessions",
children: t56
});
$[147] = pluginSecondRef;
$[148] = t56;
$[149] = t57;
} else t57 = $[149];
let t58;
if ($[150] !== t32 || $[151] !== t33 || $[152] !== t57) {
t58 = /* @__PURE__ */ jsxs("div", {
className: "graphiql-main",
children: [
t32,
t33,
t57
]
});
$[150] = t32;
$[151] = t33;
$[152] = t57;
$[153] = t58;
} else t58 = $[153];
let t59;
if ($[154] !== t30 || $[155] !== t58) {
t59 = /* @__PURE__ */ jsxs("div", {
className: "graphiql-body",
children: [t30, t58]
});
$[154] = t30;
$[155] = t58;
$[156] = t59;
} else t59 = $[156];
let t60;
if ($[157] === Symbol.for("react.memo_cache_sentinel")) {
t60 = /* @__PURE__ */ jsx(StatusBar, {});
$[157] = t60;
} else t60 = $[157];
let t61;
if ($[158] !== t28 || $[159] !== t29 || $[160] !== t59) {
t61 = /* @__PURE__ */ jsxs("div", {
ref: setContainerRef,
className: t28,
children: [
t29,
t59,
t60
]
});
$[158] = t28;
$[159] = t29;
$[160] = t59;
$[161] = t61;
} else t61 = $[161];
let t62;
if ($[162] !== children || $[163] !== portalContainer || $[164] !== t61) {
t62 = /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsxs(PortalProvider, {
container: portalContainer,
children: [t61, children]
}) });
$[162] = children;
$[163] = portalContainer;
$[164] = t61;
$[165] = t62;
} else t62 = $[165];
return t62;
};
function getChildComponentType(child) {
if (child && typeof child === "object" && "type" in child && typeof child.type === "function") return child.type;
}
var GraphiQL = Object.assign(GraphiQL_, { Footer: GraphiQLFooter });
function _temp(state) {
return Boolean(state.monaco);
}
function _temp2(acc, curr) {
bb44: switch (getChildComponentType(curr)) {
case GraphiQL.Footer:
acc.footer = curr;
break bb44;
default: acc.children.push(curr);
}
return acc;
}
function _temp3(plugin) {
return plugin.sessionActions ? /* @__PURE__ */ jsx(plugin.sessionActions, {}, plugin.title) : null;
}
export { DEFAULT_PLUGINS, GraphiQL, GraphiQLInterface };
//# sourceMappingURL=GraphiQL.js.map