@graphiql/react - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0-canary-7b355410.0

dist/graphiql-react.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var e=require("./index.cjs.js");require("graphql");require("react");require("react-dom");exports.EditorContext=e.EditorContext;exports.EditorContextProvider=e.EditorContextProvider;exports.ExecutionContext=e.ExecutionContext;exports.ExecutionContextProvider=e.ExecutionContextProvider;exports.ExplorerContext=e.ExplorerContext;exports.ExplorerContextProvider=e.ExplorerContextProvider;exports.HistoryContext=e.HistoryContext;exports.HistoryContextProvider=e.HistoryContextProvider;exports.ImagePreview=e.ImagePreview;exports.SchemaContext=e.SchemaContext;exports.SchemaContextProvider=e.SchemaContextProvider;exports.StorageContext=e.StorageContext;exports.StorageContextProvider=e.StorageContextProvider;exports.onHasCompletion=e.onHasCompletion;exports.useAutoCompleteLeafs=e.useAutoCompleteLeafs;exports.useCopyQuery=e.useCopyQuery;exports.useDragResize=e.useDragResize;exports.useEditorContext=e.useEditorContext;exports.useExecutionContext=e.useExecutionContext;exports.useExplorerContext=e.useExplorerContext;exports.useHeaderEditor=e.useHeaderEditor;exports.useHistoryContext=e.useHistoryContext;exports.useMergeQuery=e.useMergeQuery;exports.usePrettifyEditors=e.usePrettifyEditors;exports.useQueryEditor=e.useQueryEditor;exports.useResponseEditor=e.useResponseEditor;exports.useSchemaContext=e.useSchemaContext;exports.useSelectHistoryItem=e.useSelectHistoryItem;exports.useStorageContext=e.useStorageContext;exports.useVariableEditor=e.useVariableEditor;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var e=require("./index.cjs.js");require("graphql");require("react");require("react-dom");exports.Argument=e.Argument;exports.ArgumentIcon=e.ArgumentIcon;exports.Button=e.Button;exports.ButtonGroup=e.ButtonGroup;exports.ChevronDownIcon=e.ChevronDownIcon;exports.ChevronLeftIcon=e.ChevronLeftIcon;exports.ChevronUpIcon=e.ChevronUpIcon;exports.CloseIcon=e.CloseIcon;exports.DefaultValue=e.DefaultValue;exports.DeprecatedArgumentIcon=e.DeprecatedArgumentIcon;exports.DeprecatedFieldIcon=e.DeprecatedFieldIcon;exports.Directive=e.Directive;exports.DocsIcon=e.DocsIcon;exports.Dropdown=e.Dropdown;exports.EditorContext=e.EditorContext;exports.EditorContextProvider=e.EditorContextProvider;exports.ExecuteButton=e.ExecuteButton;exports.ExecutionContext=e.ExecutionContext;exports.ExecutionContextProvider=e.ExecutionContextProvider;exports.ExplorerContext=e.ExplorerContext;exports.ExplorerContextProvider=e.ExplorerContextProvider;exports.ExplorerSection=e.ExplorerSection;exports.FieldIcon=e.FieldIcon;exports.FieldLink=e.FieldLink;exports.HeaderEditor=e.HeaderEditor;exports.History=e.History;exports.HistoryContext=e.HistoryContext;exports.HistoryContextProvider=e.HistoryContextProvider;exports.HistoryIcon=e.HistoryIcon;exports.ImagePreview=e.ImagePreview;exports.KeyboardShortcutIcon=e.KeyboardShortcutIcon;exports.MarkdownContent=e.MarkdownContent;exports.PenIcon=e.PenIcon;exports.PlayIcon=e.PlayIcon;exports.PlusIcon=e.PlusIcon;exports.PrettifyIcon=e.PrettifyIcon;exports.QueryEditor=e.QueryEditor;exports.ResponseEditor=e.ResponseEditor;exports.RootTypeIcon=e.RootTypeIcon;exports.SchemaContext=e.SchemaContext;exports.SchemaContextProvider=e.SchemaContextProvider;exports.SettingsIcon=e.SettingsIcon;exports.StarFilledIcon=e.StarFilledIcon;exports.StarIcon=e.StarIcon;exports.StopIcon=e.StopIcon;exports.StorageContext=e.StorageContext;exports.StorageContextProvider=e.StorageContextProvider;exports.ToolbarButton=e.ToolbarButton;exports.TypeIcon=e.TypeIcon;exports.TypeLink=e.TypeLink;exports.UnstyledButton=e.UnstyledButton;exports.VariableEditor=e.VariableEditor;exports.onHasCompletion=e.onHasCompletion;exports.useAutoCompleteLeafs=e.useAutoCompleteLeafs;exports.useCopyQuery=e.useCopyQuery;exports.useDragResize=e.useDragResize;exports.useEditorContext=e.useEditorContext;exports.useExecutionContext=e.useExecutionContext;exports.useExplorerContext=e.useExplorerContext;exports.useHeaderEditor=e.useHeaderEditor;exports.useHistoryContext=e.useHistoryContext;exports.useMergeQuery=e.useMergeQuery;exports.usePrettifyEditors=e.usePrettifyEditors;exports.useQueryEditor=e.useQueryEditor;exports.useResponseEditor=e.useResponseEditor;exports.useSchemaContext=e.useSchemaContext;exports.useSelectHistoryItem=e.useSelectHistoryItem;exports.useStorageContext=e.useStorageContext;exports.useVariableEditor=e.useVariableEditor;

dist/graphiql-react.es.js

@@ -1,4 +0,4 @@
-export { E as EditorContext, a as EditorContextProvider, q as ExecutionContext, r as ExecutionContextProvider, v as ExplorerContext, w as ExplorerContextProvider, H as HistoryContext, y as HistoryContextProvider, b as ImagePreview, S as SchemaContext, B as SchemaContextProvider, F as StorageContext, G as StorageContextProvider, d as onHasCompletion, u as useAutoCompleteLeafs, e as useCopyQuery, K as useDragResize, f as useEditorContext, s as useExecutionContext, x as useExplorerContext, g as useHeaderEditor, z as useHistoryContext, h as useMergeQuery, j as usePrettifyEditors, k as useQueryEditor, m as useResponseEditor, D as useSchemaContext, A as useSelectHistoryItem, J as useStorageContext, n as useVariableEditor } from "./index.es.js";
+export { A as Argument, _ as ArgumentIcon, am as Button, an as ButtonGroup, $ as ChevronDownIcon, a0 as ChevronLeftIcon, a1 as ChevronUpIcon, a2 as CloseIcon, D as DefaultValue, a3 as DeprecatedArgumentIcon, a4 as DeprecatedFieldIcon, w as Directive, a5 as DocsIcon, ao as Dropdown, E as EditorContext, a as EditorContextProvider, ak as ExecuteButton, r as ExecutionContext, s as ExecutionContextProvider, x as ExplorerContext, y as ExplorerContextProvider, z as ExplorerSection, a6 as FieldIcon, F as FieldLink, H as HeaderEditor, G as History, J as HistoryContext, K as HistoryContextProvider, a7 as HistoryIcon, b as ImagePreview, a8 as KeyboardShortcutIcon, ap as MarkdownContent, a9 as PenIcon, aa as PlayIcon, ab as PlusIcon, ac as PrettifyIcon, Q as QueryEditor, e as ResponseEditor, ad as RootTypeIcon, S as SchemaContext, O as SchemaContextProvider, ae as SettingsIcon, af as StarFilledIcon, ag as StarIcon, ah as StopIcon, W as StorageContext, X as StorageContextProvider, aj as ToolbarButton, ai as TypeIcon, T as TypeLink, al as UnstyledButton, V as VariableEditor, d as onHasCompletion, u as useAutoCompleteLeafs, f as useCopyQuery, Z as useDragResize, g as useEditorContext, v as useExecutionContext, B as useExplorerContext, h as useHeaderEditor, M as useHistoryContext, j as useMergeQuery, k as usePrettifyEditors, m as useQueryEditor, n as useResponseEditor, U as useSchemaContext, N as useSelectHistoryItem, Y as useStorageContext, q as useVariableEditor } from "./index.es.js";
 import "graphql";
 import "react";
 import "react-dom";

dist/info.cjs.js

@@ -1,1 +0,1 @@
-"use strict";var h=Object.defineProperty;var l=(r,e)=>h(r,"name",{value:e,configurable:!0});var f=require("graphql"),g=require("./codemirror.cjs.js"),s=require("./SchemaReference.cjs.js");require("./info-addon.cjs.js");require("./index.cjs.js");require("react");require("react-dom");require("./introspection.cjs.js");require("./forEachState.cjs.js");g.CodeMirror.registerHelper("info","graphql",(r,e)=>{if(!e.schema||!r.state)return;const i=r.state,n=i.kind,c=i.step,a=s.getTypeInfo(e.schema,r.state);if(n==="Field"&&c===0&&a.fieldDef||n==="AliasedField"&&c===2&&a.fieldDef){const d=document.createElement("div");return T(d,a,e),m(d,e,a.fieldDef),d}else if(n==="Directive"&&c===1&&a.directiveDef){const d=document.createElement("div");return o(d,a,e),m(d,e,a.directiveDef),d}else if(n==="Argument"&&c===0&&a.argDef){const d=document.createElement("div");return E(d,a,e),m(d,e,a.argDef),d}else if(n==="EnumValue"&&a.enumValue&&a.enumValue.description){const d=document.createElement("div");return j(d,a,e),m(d,e,a.enumValue),d}else if(n==="NamedType"&&a.type&&a.type.description){const d=document.createElement("div");return u(d,a,e,a.type),m(d,e,a.type),d}});function T(r,e,i){v(r,e,i),p(r,e,i,e.type)}l(T,"renderField");function v(r,e,i){var n;const c=((n=e.fieldDef)===null||n===void 0?void 0:n.name)||"";c.slice(0,2)!=="__"&&(u(r,e,i,e.parentType),t(r,".")),t(r,c,"field-name",i,s.getFieldReference(e))}l(v,"renderQualifiedField");function o(r,e,i){var n;const c="@"+(((n=e.directiveDef)===null||n===void 0?void 0:n.name)||"");t(r,c,"directive-name",i,s.getDirectiveReference(e))}l(o,"renderDirective");function E(r,e,i){var n;e.directiveDef?o(r,e,i):e.fieldDef&&v(r,e,i);const c=((n=e.argDef)===null||n===void 0?void 0:n.name)||"";t(r,"("),t(r,c,"arg-name",i,s.getArgumentReference(e)),p(r,e,i,e.inputType),t(r,")")}l(E,"renderArg");function p(r,e,i,n){t(r,": "),u(r,e,i,n)}l(p,"renderTypeAnnotation");function j(r,e,i){var n;const c=((n=e.enumValue)===null||n===void 0?void 0:n.name)||"";u(r,e,i,e.inputType),t(r,"."),t(r,c,"enum-value",i,s.getEnumValueReference(e))}l(j,"renderEnumValue");function u(r,e,i,n){n instanceof f.GraphQLNonNull?(u(r,e,i,n.ofType),t(r,"!")):n instanceof f.GraphQLList?(t(r,"["),u(r,e,i,n.ofType),t(r,"]")):t(r,(n==null?void 0:n.name)||"","type-name",i,s.getTypeReference(e,n))}l(u,"renderType");function m(r,e,i){const n=i.description;if(n){const c=document.createElement("div");c.className="info-description",e.renderDescription?c.innerHTML=e.renderDescription(n):c.appendChild(document.createTextNode(n)),r.appendChild(c)}C(r,e,i)}l(m,"renderDescription");function C(r,e,i){const n=i.deprecationReason;if(n){const c=document.createElement("div");c.className="info-deprecation",e.renderDescription?c.innerHTML=e.renderDescription(n):c.appendChild(document.createTextNode(n));const a=document.createElement("span");a.className="info-deprecation-label",a.appendChild(document.createTextNode("Deprecated: ")),c.insertBefore(a,c.firstChild),r.appendChild(c)}}l(C,"renderDeprecation");function t(r,e,i="",n={onClick:null},c=null){if(i){const a=n.onClick;let d;a?(d=document.createElement("a"),d.href="javascript:void 0",d.addEventListener("click",D=>{a(c,D)})):d=document.createElement("span"),d.className=i,d.appendChild(document.createTextNode(e)),r.appendChild(d)}else r.appendChild(document.createTextNode(e))}l(t,"text");
+"use strict";var v=Object.defineProperty;var s=(r,e)=>v(r,"name",{value:e,configurable:!0});var f=require("graphql"),h=require("./codemirror.cjs.js"),m=require("./SchemaReference.cjs.js");require("./info-addon.cjs.js");require("./index.cjs.js");require("react");require("react-dom");require("./introspection.cjs.js");require("./forEachState.cjs.js");h.CodeMirror.registerHelper("info","graphql",(r,e)=>{if(!e.schema||!r.state)return;const i=r.state,n=i.kind,a=i.step,c=m.getTypeInfo(e.schema,r.state);if(n==="Field"&&a===0&&c.fieldDef||n==="AliasedField"&&a===2&&c.fieldDef){const d=document.createElement("div");d.className="CodeMirror-info-header",C(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.fieldDef),t}else if(n==="Directive"&&a===1&&c.directiveDef){const d=document.createElement("div");d.className="CodeMirror-info-header",E(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.directiveDef),t}else if(n==="Argument"&&a===0&&c.argDef){const d=document.createElement("div");d.className="CodeMirror-info-header",N(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.argDef),t}else if(n==="EnumValue"&&c.enumValue&&c.enumValue.description){const d=document.createElement("div");d.className="CodeMirror-info-header",T(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.enumValue),t}else if(n==="NamedType"&&c.type&&c.type.description){const d=document.createElement("div");d.className="CodeMirror-info-header",o(d,c,e,c.type);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.type),t}});function C(r,e,i){D(r,e,i),p(r,e,i,e.type)}s(C,"renderField");function D(r,e,i){var n;const a=((n=e.fieldDef)===null||n===void 0?void 0:n.name)||"";l(r,a,"field-name",i,m.getFieldReference(e))}s(D,"renderQualifiedField");function E(r,e,i){var n;const a="@"+(((n=e.directiveDef)===null||n===void 0?void 0:n.name)||"");l(r,a,"directive-name",i,m.getDirectiveReference(e))}s(E,"renderDirective");function N(r,e,i){var n;const a=((n=e.argDef)===null||n===void 0?void 0:n.name)||"";l(r,a,"arg-name",i,m.getArgumentReference(e)),p(r,e,i,e.inputType)}s(N,"renderArg");function T(r,e,i){var n;const a=((n=e.enumValue)===null||n===void 0?void 0:n.name)||"";o(r,e,i,e.inputType),l(r,"."),l(r,a,"enum-value",i,m.getEnumValueReference(e))}s(T,"renderEnumValue");function p(r,e,i,n){const a=document.createElement("span");a.className="type-name-pill",n instanceof f.GraphQLNonNull?(o(a,e,i,n.ofType),l(a,"!")):n instanceof f.GraphQLList?(l(a,"["),o(a,e,i,n.ofType),l(a,"]")):l(a,(n==null?void 0:n.name)||"","type-name",i,m.getTypeReference(e,n)),r.appendChild(a)}s(p,"renderTypeAnnotation");function o(r,e,i,n){n instanceof f.GraphQLNonNull?(o(r,e,i,n.ofType),l(r,"!")):n instanceof f.GraphQLList?(l(r,"["),o(r,e,i,n.ofType),l(r,"]")):l(r,(n==null?void 0:n.name)||"","type-name",i,m.getTypeReference(e,n))}s(o,"renderType");function u(r,e,i){const n=i.description;if(n){const a=document.createElement("div");a.className="info-description",e.renderDescription?a.innerHTML=e.renderDescription(n):a.appendChild(document.createTextNode(n)),r.appendChild(a)}g(r,e,i)}s(u,"renderDescription");function g(r,e,i){const n=i.deprecationReason;if(n){const a=document.createElement("div");a.className="info-deprecation",r.appendChild(a);const c=document.createElement("span");c.className="info-deprecation-label",c.appendChild(document.createTextNode("Deprecated")),a.appendChild(c);const d=document.createElement("div");d.className="info-deprecation-reason",e.renderDescription?d.innerHTML=e.renderDescription(n):d.appendChild(document.createTextNode(n)),a.appendChild(d)}}s(g,"renderDeprecation");function l(r,e,i="",n={onClick:null},a=null){if(i){const c=n.onClick;let d;c?(d=document.createElement("a"),d.href="javascript:void 0",d.addEventListener("click",t=>{c(a,t)})):d=document.createElement("span"),d.className=i,d.appendChild(document.createTextNode(e)),r.appendChild(d)}else r.appendChild(document.createTextNode(e))}s(l,"text");

dist/info.es.js

@@ -21,24 +21,39 @@ var __defProp = Object.defineProperty;
   if (kind === "Field" && step === 0 && typeInfo.fieldDef || kind === "AliasedField" && step === 2 && typeInfo.fieldDef) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderField(header, typeInfo, options);
     const into = document.createElement("div");
-    renderField(into, typeInfo, options);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.fieldDef);
     return into;
   } else if (kind === "Directive" && step === 1 && typeInfo.directiveDef) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderDirective(header, typeInfo, options);
     const into = document.createElement("div");
-    renderDirective(into, typeInfo, options);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.directiveDef);
     return into;
   } else if (kind === "Argument" && step === 0 && typeInfo.argDef) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderArg(header, typeInfo, options);
     const into = document.createElement("div");
-    renderArg(into, typeInfo, options);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.argDef);
     return into;
   } else if (kind === "EnumValue" && typeInfo.enumValue && typeInfo.enumValue.description) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderEnumValue(header, typeInfo, options);
     const into = document.createElement("div");
-    renderEnumValue(into, typeInfo, options);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.enumValue);
     return into;
   } else if (kind === "NamedType" && typeInfo.type && typeInfo.type.description) {
+    const header = document.createElement("div");
+    header.className = "CodeMirror-info-header";
+    renderType(header, typeInfo, options, typeInfo.type);
     const into = document.createElement("div");
-    renderType(into, typeInfo, options, typeInfo.type);
+    into.appendChild(header);
     renderDescription(into, options, typeInfo.type);
@@ -56,6 +71,2 @@ return into;
   const fieldName = ((_a = typeInfo.fieldDef) === null || _a === void 0 ? void 0 : _a.name) || "";
-  if (fieldName.slice(0, 2) !== "__") {
-    renderType(into, typeInfo, options, typeInfo.parentType);
-    text(into, ".");
-  }
   text(into, fieldName, "field-name", options, getFieldReference(typeInfo));
@@ -72,19 +83,7 @@ }
   var _a;
-  if (typeInfo.directiveDef) {
-    renderDirective(into, typeInfo, options);
-  } else if (typeInfo.fieldDef) {
-    renderQualifiedField(into, typeInfo, options);
-  }
   const name = ((_a = typeInfo.argDef) === null || _a === void 0 ? void 0 : _a.name) || "";
-  text(into, "(");
   text(into, name, "arg-name", options, getArgumentReference(typeInfo));
   renderTypeAnnotation(into, typeInfo, options, typeInfo.inputType);
-  text(into, ")");
 }
 __name(renderArg, "renderArg");
-function renderTypeAnnotation(into, typeInfo, options, t) {
-  text(into, ": ");
-  renderType(into, typeInfo, options, t);
-}
-__name(renderTypeAnnotation, "renderTypeAnnotation");
 function renderEnumValue(into, typeInfo, options) {
@@ -98,2 +97,18 @@ var _a;
 __name(renderEnumValue, "renderEnumValue");
+function renderTypeAnnotation(into, typeInfo, options, t) {
+  const typeSpan = document.createElement("span");
+  typeSpan.className = "type-name-pill";
+  if (t instanceof GraphQLNonNull) {
+    renderType(typeSpan, typeInfo, options, t.ofType);
+    text(typeSpan, "!");
+  } else if (t instanceof GraphQLList) {
+    text(typeSpan, "[");
+    renderType(typeSpan, typeInfo, options, t.ofType);
+    text(typeSpan, "]");
+  } else {
+    text(typeSpan, (t === null || t === void 0 ? void 0 : t.name) || "", "type-name", options, getTypeReference(typeInfo, t));
+  }
+  into.appendChild(typeSpan);
+}
+__name(renderTypeAnnotation, "renderTypeAnnotation");
 function renderType(into, typeInfo, options, t) {
@@ -132,12 +147,15 @@ if (t instanceof GraphQLNonNull) {
     deprecationDiv.className = "info-deprecation";
+    into.appendChild(deprecationDiv);
+    const label = document.createElement("span");
+    label.className = "info-deprecation-label";
+    label.appendChild(document.createTextNode("Deprecated"));
+    deprecationDiv.appendChild(label);
+    const reasonDiv = document.createElement("div");
+    reasonDiv.className = "info-deprecation-reason";
     if (options.renderDescription) {
-      deprecationDiv.innerHTML = options.renderDescription(reason);
+      reasonDiv.innerHTML = options.renderDescription(reason);
     } else {
-      deprecationDiv.appendChild(document.createTextNode(reason));
+      reasonDiv.appendChild(document.createTextNode(reason));
     }
-    const label = document.createElement("span");
-    label.className = "info-deprecation-label";
-    label.appendChild(document.createTextNode("Deprecated: "));
-    deprecationDiv.insertBefore(label, deprecationDiv.firstChild);
-    into.appendChild(deprecationDiv);
+    deprecationDiv.appendChild(reasonDiv);
   }
@@ -144,0 +162,0 @@ }

package.json

 {
   "name": "@graphiql/react",
-  "version": "0.4.0",
+  "version": "0.5.0-canary-7b355410.0",
   "repository": {
@@ -19,2 +19,3 @@ "type": "git",
     "dist",
+    "font",
     "src",
@@ -35,6 +36,6 @@ "types"
     "@graphiql/toolkit": "^0.6.0",
+    "@reach/combobox": "^0.17.0",
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^1.3.0",
     "copy-to-clipboard": "^3.2.0",
-    "escape-html": "^1.0.3",
     "graphql-language-service": "^5.0.4",
@@ -45,12 +46,14 @@ "markdown-it": "^12.2.0",
   "devDependencies": {
+    "@testing-library/react": "9.4.1",
     "@types/codemirror": "^5.60.5",
-    "@types/escape-html": "^1.0.1",
     "@types/set-value": "^4.0.1",
     "@vitejs/plugin-react": "^1.3.0",
     "graphql": "^16.4.0",
+    "postcss-nesting": "^10.1.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "vite": "^2.9.5",
+    "vite-plugin-react-svg": "^0.2.0"
   }
 }

src/editor/completion.ts

 import type { Editor, EditorChange } from 'codemirror';
-import escapeHTML from 'escape-html';
-import {
-  GraphQLList,
-  GraphQLNonNull,
-  GraphQLSchema,
-  GraphQLType,
-} from 'graphql';
+import type { IHint } from 'codemirror-graphql/hint';
+import { GraphQLSchema, GraphQLType, isListType, isNonNullType } from 'graphql';
 
@@ -26,3 +21,10 @@ import { ExplorerContextType } from '../explorer';
     let information: HTMLDivElement | null;
+    let fieldName: HTMLSpanElement | null;
+    let typeNamePill: HTMLSpanElement | null;
+    let typeNamePrefix: HTMLSpanElement | null;
+    let typeName: HTMLAnchorElement | null;
+    let typeNameSuffix: HTMLSpanElement | null;
+    let description: HTMLDivElement | null;
     let deprecation: HTMLDivElement | null;
+    let deprecationReason: HTMLDivElement | null;
     CodeMirror.on(
@@ -32,7 +34,7 @@ data,
       // @ts-expect-error
-      (ctx: GraphQLField<{}, {}, {}>, el: HTMLDivElement) => {
+      (ctx: IHint, el: HTMLDivElement) => {
         // Only the first time (usually when the hint UI is first displayed)
         // do we create the information nodes.
         if (!information) {
-          const hintsUl = el.parentNode as Node & ParentNode;
+          const hintsUl = el.parentNode as HTMLUListElement & ParentNode;
 
@@ -43,10 +45,54 @@ // This "information" node will contain the additional info about the
           information.className = 'CodeMirror-hint-information';
-          information.addEventListener('click', onClickHintInformation);
           hintsUl.appendChild(information);
 
-          // This "deprecation" node will contain info about deprecated usage.
+          const header = document.createElement('header');
+          header.className = 'CodeMirror-hint-information-header';
+          information.appendChild(header);
+
+          fieldName = document.createElement('span');
+          fieldName.className = 'CodeMirror-hint-information-field-name';
+          header.appendChild(fieldName);
+
+          typeNamePill = document.createElement('span');
+          typeNamePill.className = 'CodeMirror-hint-information-type-name-pill';
+          header.appendChild(typeNamePill);
+
+          typeNamePrefix = document.createElement('span');
+          typeNamePill.appendChild(typeNamePrefix);
+
+          typeName = document.createElement('a');
+          typeName.className = 'CodeMirror-hint-information-type-name';
+          typeName.href = 'javascript:void 0'; // eslint-disable-line no-script-url
+          typeName.addEventListener('click', onClickHintInformation);
+          typeNamePill.appendChild(typeName);
+
+          typeNameSuffix = document.createElement('span');
+          typeNamePill.appendChild(typeNameSuffix);
+
+          description = document.createElement('div');
+          description.className = 'CodeMirror-hint-information-description';
+          information.appendChild(description);
+
           deprecation = document.createElement('div');
-          deprecation.className = 'CodeMirror-hint-deprecation';
-          hintsUl.appendChild(deprecation);
+          deprecation.className = 'CodeMirror-hint-information-deprecation';
+          information.appendChild(deprecation);
 
+          const deprecationLabel = document.createElement('span');
+          deprecationLabel.className =
+            'CodeMirror-hint-information-deprecation-label';
+          deprecationLabel.innerText = 'Deprecated';
+          deprecation.appendChild(deprecationLabel);
+
+          deprecationReason = document.createElement('div');
+          deprecationReason.className =
+            'CodeMirror-hint-information-deprecation-reason';
+          deprecation.appendChild(deprecationReason);
+
+          const handleScroll = () => {
+            if (information) {
+              information.style.paddingTop = hintsUl.scrollTop + 12 + 'px';
+            }
+          };
+          hintsUl.addEventListener('scroll', handleScroll);
+
           // When CodeMirror attempts to remove the hint UI, we detect that it was
@@ -59,2 +105,3 @@ // removed and in turn remove the information nodes.
               if (event.target === hintsUl) {
+                hintsUl.removeEventListener('scroll', handleScroll);
                 hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
@@ -68,3 +115,10 @@ if (information) {
                 information = null;
+                fieldName = null;
+                typeNamePill = null;
+                typeNamePrefix = null;
+                typeName = null;
+                typeNameSuffix = null;
+                description = null;
                 deprecation = null;
+                deprecationReason = null;
                 onRemoveFn = null;
@@ -76,27 +130,55 @@ }
 
-        // Now that the UI has been set up, add info to information.
-        const description = ctx.description
-          ? markdown.render(ctx.description)
-          : 'Self descriptive.';
-        const type = ctx.type
-          ? '<span class="infoType">' + renderType(ctx.type) + '</span>'
-          : '';
+        if (fieldName) {
+          fieldName.innerText = ctx.text;
+        }
 
-        information.innerHTML =
-          '<div class="content">' +
-          (description.slice(0, 3) === '<p>'
-            ? '<p>' + type + description.slice(3)
-            : type + description) +
-          '</div>';
+        if (typeNamePill && typeNamePrefix && typeName && typeNameSuffix) {
+          if (ctx.type) {
+            typeNamePill.style.display = 'inline';
 
-        if (ctx && deprecation && ctx.deprecationReason) {
-          const reason = ctx.deprecationReason
-            ? markdown.render(ctx.deprecationReason)
-            : '';
-          deprecation.innerHTML =
-            '<span class="deprecation-label">Deprecated</span>' + reason;
-          deprecation.style.display = 'block';
-        } else if (deprecation) {
-          deprecation.style.display = 'none';
+            const renderType = (type: GraphQLType) => {
+              if (isNonNullType(type)) {
+                typeNameSuffix!.innerText = '!' + typeNameSuffix!.innerText;
+                renderType(type.ofType);
+              } else if (isListType(type)) {
+                typeNamePrefix!.innerText += '[';
+                typeNameSuffix!.innerText = ']' + typeNameSuffix!.innerText;
+                renderType(type.ofType);
+              } else {
+                typeName!.innerText = type.name;
+              }
+            };
+
+            typeNamePrefix.innerText = '';
+            typeNameSuffix.innerText = '';
+            renderType(ctx.type);
+          } else {
+            typeNamePrefix.innerText = '';
+            typeName.innerText = '';
+            typeNameSuffix.innerText = '';
+            typeNamePill.style.display = 'none';
+          }
         }
+
+        if (description) {
+          if (ctx.description) {
+            description.style.display = 'block';
+            description.innerHTML = markdown.render(ctx.description);
+          } else {
+            description.style.display = 'none';
+            description.innerHTML = '';
+          }
+        }
+
+        if (deprecation && deprecationReason) {
+          if (ctx.deprecationReason) {
+            deprecation.style.display = 'block';
+            deprecationReason.innerHTML = markdown.render(
+              ctx.deprecationReason,
+            );
+          } else {
+            deprecation.style.display = 'none';
+            deprecationReason.innerHTML = '';
+          }
+        }
       },
@@ -107,12 +189,7 @@ );
   function onClickHintInformation(event: Event) {
-    if (
-      !schema ||
-      !explorer ||
-      !(event.currentTarget instanceof HTMLElement) ||
-      event.currentTarget.className !== 'typeName'
-    ) {
+    if (!schema || !explorer || !(event.currentTarget instanceof HTMLElement)) {
       return;
     }
 
-    const typeName = event.currentTarget.innerHTML;
+    const typeName = event.currentTarget.innerText;
     const type = schema.getType(typeName);
@@ -125,11 +202,1 @@ if (type) {
 }
-
-function renderType(type: GraphQLType): string {
-  if (type instanceof GraphQLNonNull) {
-    return `${renderType(type.ofType)}!`;
-  }
-  if (type instanceof GraphQLList) {
-    return `[${renderType(type.ofType)}]`;
-  }
-  return `<a class="typeName">${escapeHTML(type.name)}</a>`;
-}

src/editor/components/index.ts

@@ -0,3 +1,13 @@
+import { HeaderEditor } from './header-editor';
 import { ImagePreview } from './image-preview';
+import { QueryEditor } from './query-editor';
+import { ResponseEditor } from './response-editor';
+import { VariableEditor } from './variable-editor';
 
-export { ImagePreview };
+export {
+  HeaderEditor,
+  ImagePreview,
+  QueryEditor,
+  ResponseEditor,
+  VariableEditor,
+};

src/editor/hooks.ts

@@ -5,3 +5,3 @@ import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
 import { parse, print } from 'graphql';
-import { RefObject, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
 
@@ -256,3 +256,3 @@ import { useExplorerContext } from '../explorer';
             {
-              className: 'autoInsertedLeaf',
+              className: 'auto-inserted-leaf',
               clearOnEnter: true,
@@ -259,0 +259,0 @@ title: 'Automatically added leaf fields',

src/editor/index.ts

 import { onHasCompletion } from './completion';
-import { ImagePreview } from './components';
 import {
+  HeaderEditor,
+  ImagePreview,
+  QueryEditor,
+  ResponseEditor,
+  VariableEditor,
+} from './components';
+import {
   EditorContext,
@@ -30,6 +36,9 @@ EditorContextProvider,
 export {
-  onHasCompletion,
-  ImagePreview,
   EditorContext,
   EditorContextProvider,
+  HeaderEditor,
+  ImagePreview,
+  onHasCompletion,
+  QueryEditor,
+  ResponseEditor,
   useAutoCompleteLeafs,
@@ -44,2 +53,3 @@ useCopyQuery,
   useVariableEditor,
+  VariableEditor,
 };
@@ -46,0 +56,0 @@

src/history/index.ts

@@ -0,1 +1,2 @@
+import { History } from './components';
 import {
@@ -11,2 +12,3 @@ HistoryContext,
 export {
+  History,
   HistoryContext,
@@ -13,0 +15,0 @@ HistoryContextProvider,

src/index.ts

 import {
   EditorContext,
   EditorContextProvider,
+  HeaderEditor,
   ImagePreview,
   onHasCompletion,
+  QueryEditor,
+  ResponseEditor,
   useAutoCompleteLeafs,
@@ -15,2 +18,3 @@ useCopyQuery,
   useVariableEditor,
+  VariableEditor,
 } from './editor';
@@ -23,7 +27,14 @@ import {
 import {
+  Argument,
+  DefaultValue,
+  Directive,
   ExplorerContext,
   ExplorerContextProvider,
+  ExplorerSection,
+  FieldLink,
+  TypeLink,
   useExplorerContext,
 } from './explorer';
 import {
+  History,
   HistoryContext,
@@ -66,2 +77,9 @@ HistoryContextProvider,
 
+import './style/root.css';
+import './style/deprecation.css';
+
+export * from './icons';
+export * from './toolbar';
+export * from './ui';
+
 export {
@@ -71,4 +89,7 @@ // editor
   EditorContextProvider,
+  HeaderEditor,
   ImagePreview,
   onHasCompletion,
+  QueryEditor,
+  ResponseEditor,
   useAutoCompleteLeafs,
@@ -83,2 +104,3 @@ useCopyQuery,
   useVariableEditor,
+  VariableEditor,
   // execution
@@ -89,6 +111,13 @@ ExecutionContext,
   // explorer
+  Argument,
+  DefaultValue,
+  Directive,
   ExplorerContext,
   ExplorerContextProvider,
+  ExplorerSection,
+  FieldLink,
+  TypeLink,
   useExplorerContext,
   // history
+  History,
   HistoryContext,
@@ -110,2 +139,4 @@ HistoryContextProvider,
 
+export * from './icons';
+
 export type {
@@ -112,0 +143,0 @@ // editor

src/markdown.ts

 import MarkdownIt from 'markdown-it';
 
-export const markdown = new MarkdownIt();
+export const markdown = new MarkdownIt({
+  breaks: true,
+  linkify: true,
+});

src/vite-env.d.ts

@@ -1,1 +0,1 @@
-// / <reference types="vite/client" />
+/// <reference types="vite/client" />

types/editor/components/index.d.ts

@@ -0,2 +1,6 @@
+import { HeaderEditor } from './header-editor';
 import { ImagePreview } from './image-preview';
-export { ImagePreview };
+import { QueryEditor } from './query-editor';
+import { ResponseEditor } from './response-editor';
+import { VariableEditor } from './variable-editor';
+export { HeaderEditor, ImagePreview, QueryEditor, ResponseEditor, VariableEditor, };

types/editor/index.d.ts

 import { onHasCompletion } from './completion';
-import { ImagePreview } from './components';
+import { HeaderEditor, ImagePreview, QueryEditor, ResponseEditor, VariableEditor } from './components';
 import { EditorContext, EditorContextProvider, useEditorContext } from './context';
@@ -15,3 +15,3 @@ import { useHeaderEditor } from './header-editor';
 import type { UseVariableEditorArgs } from './variable-editor';
-export { onHasCompletion, ImagePreview, EditorContext, EditorContextProvider, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, };
+export { EditorContext, EditorContextProvider, HeaderEditor, ImagePreview, onHasCompletion, QueryEditor, ResponseEditor, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, VariableEditor, };
 export type { EditorContextType, ResponseTooltipType, TabsState, UseHeaderEditorArgs, UseQueryEditorArgs, UseResponseEditorArgs, UseVariableEditorArgs, };

types/history/index.d.ts

@@ -0,5 +1,6 @@
+import { History } from './components';
 import { HistoryContext, HistoryContextProvider, useHistoryContext } from './context';
 import { useSelectHistoryItem } from './hooks';
 import type { HistoryContextType } from './context';
-export { HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem, };
+export { History, HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem, };
 export type { HistoryContextType };

types/index.d.ts

@@ -1,5 +0,5 @@
-import { EditorContext, EditorContextProvider, ImagePreview, onHasCompletion, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor } from './editor';
+import { EditorContext, EditorContextProvider, HeaderEditor, ImagePreview, onHasCompletion, QueryEditor, ResponseEditor, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, VariableEditor } from './editor';
 import { ExecutionContext, ExecutionContextProvider, useExecutionContext } from './execution';
-import { ExplorerContext, ExplorerContextProvider, useExplorerContext } from './explorer';
-import { HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem } from './history';
+import { Argument, DefaultValue, Directive, ExplorerContext, ExplorerContextProvider, ExplorerSection, FieldLink, TypeLink, useExplorerContext } from './explorer';
+import { History, HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem } from './history';
 import { SchemaContext, SchemaContextProvider, useSchemaContext } from './schema';
@@ -14,3 +14,9 @@ import { StorageContext, StorageContextProvider, useStorageContext } from './storage';
 import type { StorageContextType } from './storage';
-export { EditorContext, EditorContextProvider, ImagePreview, onHasCompletion, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, ExecutionContext, ExecutionContextProvider, useExecutionContext, ExplorerContext, ExplorerContextProvider, useExplorerContext, HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem, SchemaContext, SchemaContextProvider, useSchemaContext, StorageContext, StorageContextProvider, useStorageContext, useDragResize, };
+import './style/root.css';
+import './style/deprecation.css';
+export * from './icons';
+export * from './toolbar';
+export * from './ui';
+export { EditorContext, EditorContextProvider, HeaderEditor, ImagePreview, onHasCompletion, QueryEditor, ResponseEditor, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, VariableEditor, ExecutionContext, ExecutionContextProvider, useExecutionContext, Argument, DefaultValue, Directive, ExplorerContext, ExplorerContextProvider, ExplorerSection, FieldLink, TypeLink, useExplorerContext, History, HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem, SchemaContext, SchemaContextProvider, useSchemaContext, StorageContext, StorageContextProvider, useStorageContext, useDragResize, };
+export * from './icons';
 export type { EditorContextType, ResponseTooltipType, TabsState, UseHeaderEditorArgs, UseQueryEditorArgs, UseResponseEditorArgs, UseVariableEditorArgs, ExecutionContextType, ExplorerContextType, ExplorerFieldDef, ExplorerNavStack, ExplorerNavStackItem, HistoryContextType, SchemaContextType, StorageContextType, };

types/utility/resize.d.ts

@@ -16,5 +16,5 @@ /// <reference types="react" />
     firstRef: import("react").RefObject<HTMLDivElement>;
-    setHiddenElement: (element: ResizableElement | null) => void;
+    setHiddenElement: import("react").Dispatch<import("react").SetStateAction<ResizableElement | null>>;
     secondRef: import("react").RefObject<HTMLDivElement>;
 };
 export {};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2389538

increased by29.44%

Number of package files

212

increased by73.77%

Lines of code

46026

increased by12.13%

Worsened metrics

Dev dependency count

11

increased by22.22%

Number of low supply chain risk alerts

4

increased byInfinity%

Dependency changes

• + Added@reach/combobox@^0.17.0

• + Added@reach/auto-id@0.17.0(transitive)

• + Added@reach/combobox@0.17.0(transitive)

• + Added@reach/descendants@0.17.0(transitive)

• + Added@reach/observe-rect@1.2.0(transitive)

• + Added@reach/popover@0.17.0(transitive)

• + Added@reach/portal@0.17.0(transitive)

• + Added@reach/rect@0.17.0(transitive)

• + Added@reach/utils@0.17.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedscheduler@0.20.2(transitive)

• + Addedtabbable@4.0.0(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• + Addedtslib@2.8.0(transitive)

• - Removedescape-html@^1.0.3

• - Removedescape-html@1.0.3(transitive)